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 exit selection is the opposite of the enter selection. It is an array of elements that should be removed. In some cases, we may have more elements than we have data. The excess elements should be removed.

Whenever we call the `data()` method, D3 will create an exit selection. Let’s view what the exit selection looks like. First, we need to modify our current codebase to be able to view it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>D3 Basics</title>
  </head>
  <body>
    <ul>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <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.select('ul')
  .selectAll('li')
  .data(data)
  // .join('li')
  // .text('Hello')

console.log(el)

codemirror

In the widget above, we have commented out the `join()` and `text()` methods. We would not be able to view the `_exit` property with these methods in the way. We are temporarily commenting them out to be able to view the exit selection. In the HTML file, we have added six more `<li>` elements.

If we look at the output, the `<li>` elements will remain unaffected. In the console, we will see the following under the `_exit` property.

The exit selection is a list of elements that should be removed from the document.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

The Exit Selection