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 will use mouse events to help us detect when the reader is hovering over a dot. If they are, we are going to move the tooltip element above the dot. The contents of the tooltip will need to be updated to show the data joined to the dot.

# Adding mouse events

A mouse event called `mouseenter` can be used to detect when the mouse is hovering over an element. We will be using this event to help us create our UI. In the script section, search for the section in our code where we draw the dots.

At the end of this chain, we will add the `on()` function to listen for the `mouseenter` event.

// Draw circles
ctr.selectAll('circle')
  .data(dataset)
  .join('circle')
  .attr("cx", d => xScale(xAccessor(d)))
  .attr("cy", d => yScale(yAccessor(d)))
  .attr('data-temp', yAccessor)
  .attr("r", 5)
  .attr("fill", 'red')
  .on('mouseenter', function(e, datum) {
    console.log(datum)
  })

The second argument of the `on()` function is a callback function. One thing we should note is that we are not using an arrow function. This is because we want to use the `this` keyword. The `this` keyword in the function will tell us which dot the mouse is hovered over. Even though we are listening for the event on the entire selection, D3 is smart enough to provide us with information about a specific dot.

In addition, we are going to need the data joined to the element. We are accepting it as one of the arguments for the callback function. We have two arguments, which we will call `e` and `datum`.

The `datum` argument holds the data joined to the element. We are logging it to verify its contents. Let's view the output.

D3 supports all JavaScript mouse events. Learn how to detect hover events with D3.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Mouse Events