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 update the tooltip with information about the dot the reader is hovering over. We will be working on the callback function we have written for the `mouseenter` event. In our function, we are provided an argument called `datum`. There are three things we need to grab. They are the date, humidity, and temperature. These properties are available in this argument.

# Rendering the data

Let’s load these properties in the appropriate location in the tooltip. After moving the tooltip, we will use the `tooltip` selection to select the respective locations.

.on('mouseenter', function(e, datum) {
  d3.select(this)
    .attr('fill', '#120078')
    .attr('r', 8)

  tooltip.style('display', 'block')
    .style('top', yScale(yAccessor(datum)) - 25 + "px")
    .style('left', xScale(xAccessor(datum)) + "px")

  tooltip.select(".metric-humidity span")
      .text(xAccessor(datum))

  tooltip.select(".metric-temp span")
    .text(yAccessor(datum))

  tooltip.select(".metric-date")
    .text(datum.currently.time)
})

For the humidity, we are using the `.metric-humidity span` selector. The `<span>` element is where we will insert the humidity. We are changing the inner text with the `text()` function. We have an accessor function to help us access the correct property in our object. We can use the `xAccessor` function with the `datum` argument.

Next, we are updating the tooltip with the temperature. The selector for this part of the tooltip is `.metric-temp span` selection. Similar to before, we can use the `yAccessor` function with the `datum` argument to get the temperature.

The last piece of data we need to display is the date. The element that will hold the data is the `.metric-date` element. We are using the `tooltip.select()` function to select it. The date can be accessed via the `datum.currently.time` property.

Let's view the output.

D3 comes with functions for formatting data. It can handle all types of values from numeric to time.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Formatting

Rendering the data