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

For our next project, we are going to add interactions to our scatterplot. We created a scatterplot in an earlier section, so we are going to bring back that code. Here is the completed project we left off with.

#chart{
  width: 800px;
  height: 800px;
  background-color: #f7f7f7;
  margin: 25px auto;
  position: relative
}

#tooltip {
  text-align: center;
  border: 1px solid #ccc;
  position: absolute;
  padding: 10px;
  background-color: #fff;
  display: none;
}

#tooltip .metric-date {
  text-decoration: underline;
}

.axis {
  font-size: 18px;
  shape-rendering: geometricPrecision;
}


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Scatterplot</title>
  
</head>

<body>
  <div id="chart"></div>

  <script src="https://d3js.org/d3.v6.min.js"></script>
  
</body>

</html>

async function draw() {
  // Data
  const dataset = await d3.json('/udata/1kL2GBJw8VB/data-4-1.json')

  const xAccessor = (d) => d.currently.humidity
  const yAccessor = (d) => d.currently.apparentTemperature
  
  // Dimensions
  let dimensions = {
    width: 800,
    height: 800,
    margin: {
      top: 50,
      right: 50,
      bottom: 50,
      left: 50
    }
  }

  dimensions.ctrWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.ctrHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

  // Draw Image
  const svg = d3.select("#chart")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height)

  const ctr = svg.append("g") // <g>
    .attr(
      "transform",
      `translate(${dimensions.margin.left}, ${dimensions.margin.top})`
    )

  // Scales
  const xScale = d3.scaleLinear()
    .domain(d3.extent(dataset, xAccessor))
    .rangeRound([0, dimensions.ctrWidth])
    .clamp(true)

  const yScale = d3.scaleLinear()
    .domain(d3.extent(dataset, yAccessor))
    .rangeRound([dimensions.ctrHeight, 0])
    .nice()
    .clamp(true)

  // 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')

  // Axes
  const xAxis = d3.axisBottom(xScale)
    .ticks(5)
    .tickFormat(d => d * 100 + "%")

  const xAxisGroup = ctr.append("g")
    .call(xAxis)
    .style("transform", `translateY(${dimensions.ctrHeight}px)`)
    .classed('axis', true)

  xAxisGroup.append("text")
    .attr("x", dimensions.ctrWidth / 2)
    .attr("y", dimensions.margin.bottom - 10)
    .attr("fill", "black")
    .text("Humidity")
    .style("text-anchor", "middle")


  xAxisGroup.append("text")
    .attr("x", dimensions.ctrWidth / 2)
    .attr("y", dimensions.margin.bottom - 10)
    .attr("fill", "black")
    .text("Humidity")

  const yAxis = d3.axisLeft(yScale);

  const yAxisGroup = ctr.append("g")
    .call(yAxis)
    .classed("axis", true);

  yAxisGroup.append("text")
    .attr("x", -dimensions.ctrHeight / 2)
    .attr("y", -dimensions.margin.left + 15)
    .attr("fill", "black")
    .html("Temperature (&deg;F)")
    .style("transform", "rotate(270deg)")
    .style("text-anchor", "middle")
}

draw()

codemirror

The scatterplot is displaying hundreds of dots. It can be difficult to read each dot. We can use tooltips to improve the user experience. 

We briefly talked about how to listen for events at the start of this section. D3 provides an API to listen for events on our selections. All browser events are supported in D3. 

We are going to use D3’s event system to add a tooltip to our scatterplot. Tooltips give additional information about a shape. They are completely voluntary. We do not want to show a tooltip unless a reader is hovering their mouse over a dot. We will use an event to help us detect when the mouse is hovering over a dot.

# Adding the template

First things first, we are going to add an element for displaying the tooltip. We can accomplish this task with SVG. Alternatively, we can use regular HTML elements. Throughout most of this course, we have been sticking to SVG shapes, but it is perfectly acceptable to use regular HTML elements.

Creating tooltips with SVG shapes is excessive in this situation. If we think about it, a tooltip is made up of a rectangle shape with text inside it. We can accomplish this sort of feature easily with HTML. It is because text is automatically positioned inside an element. Whereas with SVG, we need to set the position of a text element with coordinates.  SVG is a little more complex when it comes to positioning and changing values. It is so much easier to perform this kind of task with just plain HTML and CSS. 

> **Tip**: This is something important to understand. Not everything has to be SVG. There are some situations where regular HTML is more than suitable. Most of the time, you can use regular HTML for UI elements. Another benefit of using regular HTML is not having to worry about an element being cut off. This makes it perfect for tooltips. The tooltip will not get cut off if it appears outside the bounds of an image.

Alright, let’s get started. We will update the HTML document to the following:

D3's event system can be used to add helpful UI elements such as tooltips that provide additional details about a chart.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Adding a Tooltip