# A little about D3

**D3** is an interactive JavaScript library for data visualization that uses Scalar Vector Graphics (SVG) coupled with HTML and CSS to output charts and figures that illustrate the numeric data. To display charts and figures, you need to make use of a data set that can be loaded from a `.csv` file or be hardcoded as an array. You can add this dataset to your figure by selecting the containers, but what if the number of items in the dataset does not match the number of containers selected? This is where the `enter()` and `exit()` method of D3 come in. 

> The **`enter()`** and **`exit()`** method allows you to `append` or `remove` containers according to the size of your dataset. 

- If the array is longer than the selection, there’s a shortage of elements, and we need to add elements.
- If the array is shorter than the selection, there’s a surplus of DOM elements, and we need to remove elements.

# `enter()`

Let's take a look at the code below. You should focus on the highlighted lines (31 - 51). The code above *line 31* is used to style the `div` containers and display the button. After reading the code, press the *RUN* button and then press the button displayed in the output. 

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
#content div {
	display: inline-block;
	margin: 20px;
	background-color: lightblue;
	color: black;
	padding: 30px;
	width: 10px;
	height: 30px;
	text-align: center;
}
</style>

<body>
	
	<div id="menu">
		<button onClick="doEnter();">Add elements using .enter and .append</button>
	</div>

	<div id="content">
		<div></div>
		<div></div>
		<div></div>
	</div>
  
	<script>

	var myData = ['A', 'B', 'C', 'D', 'E'];

	function doEnter() {
		var u = d3.select('#content')
		.selectAll('div')
		.data(myData);

		u.text(function(d) {
			return d;
		});
	}

	</script>
</body>
</html>

codemirror

Observe two things:
1. *line (31 - 35)*: There are *three* `div` containers.
2. *line (39)*: There are *five* items in the dataset. 

Therefore, when we try to add the data in our `div` containers, it will just add the first three items and omit the rest. 

To cater to this problem, add the `enter()` method -- it will return an enter selection that represents elements that need to be added. This method is usually followed by `append()`, which adds elements to the DOM:
```javascript
.enter()
.append("div")
```

Now, after adding the `enter()` and `append()` method, observe how all of the dataset's items are printed:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
#content div {
	display: inline-block;
	margin: 20px;
	background-color: lightblue;
	color: black;
	padding: 30px;
	width: 10px;
	height: 30px;
	text-align: center;
}
</style>

<body>
	
	<div id="menu">
		<button onClick="doEnter();">Add elements using .enter and .append</button>
	</div>

	<div id="content">
		<div></div>
		<div></div>
		<div></div>
	</div>
  
	<script>

	var myData = ['A', 'B', 'C', 'D', 'E'];

	function doEnter() {
		var u = d3.select('#content')
		.selectAll('div')
		.data(myData);

		u.enter()
		.append("div");
		
		u.text(function(d) {
			return d;
		});
	}

	</script>
</body>
</html>

# `exit()`

Take a look at the code below -- you should focus on the highlighted lines (31 - 51). The code above *line 31* is used to style the `div` containers and display the button. After reading the code, press the *RUN* button, then press the button displayed in the output. 

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
#content div {
	display: inline-block;
	margin: 20px;
	background-color: lightblue;
	color: black;
	padding: 30px;
	width: 10px;
	height: 30px;
	text-align: center;
}
</style>

<body>
	
	<div id="menu">
		<button onClick="doEnter();">Add elements using .enter and .append</button>
	</div>

	<div id="content">
		<div></div>
		<div></div>
		<div></div>
	</div>
  
	<script>

	var myData = ['A'];

	function doEnter() {
		var u = d3.select('#content')
		.selectAll('div')
		.data(myData);

		u.text(function(d) {
			return d;
		});
	}

	</script>
</body>
</html>

Observe two things:-

1. *line (31 - 35)*: The number of `div` containers is still the same at *three*.
2. *line (39)*: However, the number of items in the dataset is now *one*, which is less than the number of `div` containers.

Therefore, when we try to add data in our `div` containers, it adds data to the first container but leaves the following two containers empty because there is no item in the dataset to fill them. 

To cater to this problem, add the #key# `exit()` method: returns an exit selection #key#, which consists of the elements that need to be removed from the DOM. This method is usually followed by `remove()`:
```javascript
.exit()
.remove()
```

After adding the `exit()` and `remove()` methods, notice how all the extra `div` containers are removed.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
#content div {
	display: inline-block;
	margin: 20px;
	background-color: lightblue;
	color: black;
	padding: 30px;
	width: 10px;
	height: 30px;
	text-align: center;
}
</style>

<body>
	
	<div id="menu">
		<button onClick="doEnter();">Add elements using .enter and .append</button>
	</div>

	<div id="content">
		<div></div>
		<div></div>
		<div></div>
	</div>
  
	<script>

	var myData = ['A'];

	function doEnter() {
		var u = d3.select('#content')
		.selectAll('div')
		.data(myData);
		
		u.exit()
		.remove();

		u.text(function(d) {
			return d;
		});
	}

	</script>
</body>
</html>

What is D3 enter and exit?

D3's enter() appends elements for extra data items; exit() removes extra elements for insufficient data.