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

We are going to draw an axis to help us read the data. The states should be drawn across the x-axis. The population should be drawn on the y-axis. If you would like, try adding an axis as an exercise. You already know how to accomplish this task. Try tackling this challenge before proceeding.

# Solution

If you were able to draw the axes, then that is great. If not, that is fine, too. We will draw the axes together. We will be working at the bottom of the `draw()` function. 

The first step is to create the functions for drawing the axes. We will define a variable called `xAxis`. It will be set to the `d3.axisBottom` function.

// Draw Axis
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)

The `axisBottom()` function will draw a horizontal axis with the ticks pointing downward. We need to pass in the `xScale` function so that D3 understands how to draw the axis. Along with the x-axis, we are preparing the y-axis. We have a variable called `yAxis`. It will be set to the `d3.axisLeft()` function. The `axisLeft()` function will draw a vertical axis with the ticks pointing left. We will pass in the `yScale` function.

# Drawing the axis

The axes functions are ready. Let’s start drawing them. The shapes for the axis should be drawn in a group to keep things organized. Once again, we are drawing a lot of shapes. Grouping shapes will make it easier to search for them. 

We'll look at a few special ways we can refine an axis's appearance by removing the outer ticks.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Drawing the Axis

Solution