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

In the script section, most of the code has been prepared. At the bottom, we are creating a scale for the y-axis, but not for the x-axis. It is because the x-axis will measure the date. We have not had the opportunity to discuss how to scale time. D3 introduces two scales for scaling time. We will be looking at both scales in this lesson.

Both scales are based on the linear scale. They can transform continuous data into continuous data. In general, time is considered continuous. Therefore we will need a scale that can work with continuous data. What makes the scales special is that they can work with dates instead of regular numbers.

# The `scaleTime()` function

We are going to create the scale for the x-axis. We will be working in the script section. At the bottom of the `draw()` function, where we created the `yScale` function, define a variable called `xScale`. Its value will be the `d3.scaleTime()` function.

// Scales
const yScale = d3.scaleLinear()
  .domain(d3.extent(dataset, yAccessor))
  .range([dimensions.ctrHeight, 0])
  .nice()

const xScale = d3.scaleTime()
  .domain(d3.extent(dataset, xAccessor))
  .range([0, dimensions.ctrWidth])

The `scaleTime()` function will generate a scale that can transform dates into numbers. The domain must be the range of dates it should expect. We are using the `d3.extent()` function to help us grab the range of dates.

In the first argument of the `extent()` function, we will pass the data. As for the second argument, we are passing in the `xAccessor` function. The `xAccessor` function will return the date. We can use the `extent()` function to find the oldest and latest dates. It is flexible in that regard. It is not exclusively for working with numbers. It can work with dates easily. 

For the range, we are using 0 and the `dimensions.ctrWidth` property. The line will be drawn across the entire width of the container in our image. We want the starting point for the line to start on the left side, and the ending point for the line should be on the right side of the container.

# Parsing dates

Our scale is ready, or so it seems. There is one problem with our scale. To find out the problem, let’s log a value that has been transformed by this scale. 

D3 provides a set of functions for passing and scaling time. Time is considered continuous.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Time Scales & Parsing

The `scaleTime()` function

Time Scales & Parsing

The scaleTime() function

The `scaleTime()` function