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

Let's add some color to the heatmap. At the moment, the rectangles are all the same color. We are going to be using a scale to calculate the color of the rectangle. This is where things can get tricky. Our dataset contains values between $0 and $300,000. How do we assign a color to an income?

Luckily, most scales in D3 are capable of working with colors. It is common practice to need to assign a color to a shape based on a value. The developers of D3 have developed scales to work with colors. This includes the linear scale. Let’s use the linear scale to paint the rectangles.

# Adjusting the `draw()` function

Before we do, we are going to adjust the draw function. The heatmap will be drawn multiple times with different scales. This will allow us to compare the different scales on how they handle colors. We need to be able to tell the `draw()` function which scale it should use. We will add a parameter for the type of scale to use. In the `draw()` function’s parameters, we will add a second parameter called `scale`.

async function draw(el, scale) {
  // some code...
}

draw('#heatmap1', 'linear')

In addition, we have updated the call to the `draw()` function to pass in a string that says `linear`. The `scale` argument will tell our `draw()` function which scale to use. In this example, it will use the linear scale.

# Using scales with colors

Let's create a scale for transforming numbers into colors. Above where we drew the rectangles, we are going to create a section for our scales.

 Color is how the reader will be able to understand the data.

Colors with a Linear Scale

Color is how the reader will be able to understand the data.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Colors with a Linear Scale