Gain insights into creating interactive web data visualizations with D3.js. Learn about SVGs, selections, advanced scatter plots, scales, animations, and interactivity to transform data into meaningful insights.

In this course, you will learn to create your own interactive data visualizations for the web with D3.js, a very popular JavaScript library. 

Starting with the fundamentals, you'll learn about SVG, selections, classes, and styles, as well as displaying data. This will give you the base to start working with more advanced concepts. 

Once you’ve got the basics out of the way, you will start practicing drawing various scatter plots, where you’ll learn all the best practices for creating stunning visualizations.

Lastly, you will dive into scales and one of the more fun parts: adding animation and interactivity.

By the time you finish this course, you will have a powerful new library to add to your resume, and you’ll be able to transform data into meaningful insights.

Master D3.js for Data Visualization

The `data()` method we used previously returned a selection object. However, the selection object is slightly different from other selection objects we have worked with thus far. There are two new properties called `_enter` and `_exit`. We will be discussing what the enter selection is in this lesson.

# What is the enter selection?

Joining data can become complex when the ratio between data and elements is not 1-to-1. If we have more elements than we have data, we should remove excess elements. If there are fewer elements than we have data, we should add more elements.

In the developer tools, the selection object returned was different from the previous selection objects.

A new property is available called `_enter`. This is called the enter selection. **The enter selection contains a list of data items that have not been joined to an element.** Let's take a look inside this array.

We will find an empty array. That is because every piece of data was joined to an element. That may not always be the case. Let’s look at what happens when there are not enough elements in the document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>D3 Basics</title>
  </head>
  <body>
    <ul>
      <li>Hi</li>
      <li>Hi</li>
    </ul>

    <script src="https://d3js.org/d3.v6.js"></script>
    
  </body>
</html>

const data = [10, 20, 30, 40, 50]

const el = d3.selectAll('li')
  .data(data)

console.log(el)

codemirror

In the widget above, the three `<li>` elements have been removed. The JavaScript code remains the same. If we look at the output, nothing changes on the document. However, the selection logged in the console is different.

This time, the enter selection is not empty anymore. The enter selection will have a total of 5 items in the array. The first two items are empty. It is because the first two items in the `data` array were joined to an element. If we want to know which data is joined to which element, we can look in the `_groups` property. The enter selection will only contain what has not been joined.

The last three items in the array hold an `EnterNode`. D3 creates a virtual element. It is an element that does not occupy space in the document. It is stored in memory. If we look inside any of the nodes, we will find that the virtual element does not hold any attributes or content. It only holds the data. 

The purpose of the enter selection is to tell us how many items of data have not been joined to an element. The next step becomes clear. We want to start the process of creating new elements that can be joined with the remaining data.

# The `join()` method

D3 comes with a function that can handle this entire process.



D3 introduces two new selections called enter and exit. Let's discuss what the enter selection is

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

The Enter Selection