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 talk about color scales. Up until now, we have been using custom colors. We did not receive assistance with colors by D3. If you are not that great at picking colors, you may be tempted to search for color schemes online. That is one viable solution. However, D3 comes with color schemes we can use with our charts.

There is a package called **D3 Scale Chromatic**. You can find it here: https://github.com/d3/d3-scale-chromatic

This package will contain a list of color schemes readily available. We do not need to do anything to include it in our project. It is already included with the core of D3.

If you scroll around the page, you will find dozens of color schemes. The color schemes are placed into three categories, which are categorical, diverging, and sequential. Let’s explore each of them.

# Categorical colors

The first category is called categorical. Color schemes under this category vary in colors.

## Categorical

<a name="schemeCategory10" href="#schemeCategory10">#</a> d3.schemeCategory10 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/category10.js "Source")

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/category10.png" width="100%" height="40" alt="category10">

An array of ten categorical colors represented as RGB hexadecimal strings.

<a href="#schemeAccent" name="schemeAccent">#</a> d3.schemeAccent [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Accent.js "Source")

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/Accent.png" width="100%" height="40" alt="Accent">

An array of eight categorical colors represented as RGB hexadecimal strings.

<a href="#schemeDark2" name="schemeDark2">#</a> d3.schemeDark2 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Dark2.js "Source")

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/Dark2.png" width="100%" height="40" alt="Dark2">

As you can see, each color scheme is vastly different from the next one. These color schemes are assigned under a property name. We can freely access any of the color schemes directly on the `d3` object. For example, the first color set can be accessed via the `d3.schemeCategory10` property.

This property will return an array of colors. The number of items in the array depends on the color scheme we are using. That is about it when it comes to categorical color schemes. They are properties that contain an array of colors. 

# Diverging colors

Let’s explore the next category of color schemes. The next category is called diverging color schemes.

## Diverging

Diverging color schemes are available as continuous interpolators (often used with [d3.scaleSequential](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales)) and as discrete schemes (often used with [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales)). Each discrete scheme, such as [d3.schemeBrBG](#schemeBrBG), is represented as an array of arrays of hexadecimal color strings. The *k*th element of this array contains the color scheme of size *k*. For example, `d3.schemeBrBG[9]` contains an array of nine strings representing the nine colors of the brown-blue-green diverging color scheme. Diverging color schemes support a size *k* ranging from 3 to 11.

<a href="#interpolateBrBG" name="interpolateBrBG">#</a> d3.interpolateBrBG(*t*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/BrBG.js "Source")
 <a href="#schemeBrBG" name="schemeBrBG">#</a> d3.schemeBrBG[*k*]

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/BrBG.png" width="100%" height="40" alt="BrBG">

Given a number *t* in the range [0,1], returns the corresponding color from the “BrBG” diverging color scheme represented as an RGB string.

<a href="#interpolatePRGn" name="interpolatePRGn">#</a> d3.interpolatePRGn(*t*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/PRGn.js "Source")
 <a href="#schemePRGn" name="schemePRGn">#</a> d3.schemePRGn[*k*]

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/PRGn.png" width="100%" height="40" alt="PRGn">

Given a number *t* in the range [0,1], returns the corresponding color from the “PRGn” diverging color scheme represented as an RGB string.

<a href="#interpolatePiYG" name="interpolatePiYG">#</a> d3.interpolatePiYG(*t*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/PiYG.js "Source")
 <a href="#schemePiYG" name="schemePiYG">#</a> d3.schemePiYG[*k*]

<img src="https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/PiYG.png" width="100%" height="40" alt="PiYG">

Given a number *t* in the range [0,1], returns the corresponding color from the “PiYG” diverging color scheme represented as an RGB string.

If we look at the examples, we can see how diverging color schemes work. Each scheme contains two different colors on either end. Both colors transition slowly into each other. Unlike categorical schemes, diverging colors have an almost unlimited number of colors accessible via the scale. 

There are two ways we can access a color from the scheme. If we look above any of the schemes, D3 will provide us with two options. The first option is a function called `interpolate` followed by the name of the color scheme. Each scheme has an `interpolate` function. 

The `interpolate` function has one parameter called `t`. The `t` parameter can be a number between `0` and `1`. `0` will give you the color on the left side of the scale. `1` will give you the color on the right side of the scale. Everything in between will give you a color somewhere in the transition. 

Let’s try using one of these schemes. For this demonstration, we will use the `d3.interpolateRdYlGn()` function.

D3 comes with scales for generating colors in case you don't want to select colors yourself.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Color Scales

Categorical colors

Categorical