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 are going to take the time to discuss the problem with our chart. Switching between metrics does not seem to be an issue. However, the animations do not work normally. The transitions occur very quickly. That is because, by default, the animation is configured to play for a quarter of a second. 

The animation has been slowed down so that we can see the problem more clearly.

body{
  background-color: #f7f7f7;
}

#chart{
  margin: 25px auto;
  width: 800px;
}

.bar-labels{
  text-anchor: middle;
  font-size: 16px;
  font-family: sans-serif;
}

select {
  margin: 25px auto 0;
  display: block;
  font-size: 20px;
}

.mean-line {
  stroke: #d62828;
  stroke-dasharray: 6;
  stroke-width: 2px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Histogram</title>
  
</head>

<body>
  <select id="metric">
    <option value="humidity" selected>Humidity</option>
    <option value="temperature">Temperature</option>
    <option value="dewPoint">Dew Point</option>
    <option value="windSpeed">Wind Speed</option>
    <option value="cloudCover">Cloud Cover</option>
    <option value="ozone">Ozone</option>
  </select>
  
  <div id="chart"></div>

  <script src="https://d3js.org/d3.v6.js"></script>
  
</body>

</html>

async function draw() {
  // Data
  const dataset = await d3.json('/udata/1kL2GBJw8VB/data-4-1.json')

  // Dimensions
  let dimensions = {
    width: 800,
    height: 400,
    margins: 50
  };

  dimensions.ctrWidth = dimensions.width - dimensions.margins * 2
  dimensions.ctrHeight = dimensions.height - dimensions.margins * 2

  // 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.margins}, ${dimensions.margins})`
    )

  const labelsGroup = ctr.append('g')
    .classed('bar-labels', true)

  const xAxisGroup = ctr.append("g")
    .style(
      "transform", `translateY(${dimensions.ctrHeight}px)`
    )

  function histogram(metric) {
    const xAccessor = d => d.currently[metric]
    const yAccessor = d => d.length

    // Create Scale
    const xScale = d3.scaleLinear()
      .domain(d3.extent(dataset, xAccessor))
      .range([0, dimensions.ctrWidth])
      .nice()

    const bin = d3.bin()
      .domain(xScale.domain())
      .value(xAccessor)
      .thresholds(10)

    const newDataset = bin(dataset)

    const padding = 1

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(newDataset, yAccessor)])
      .range([dimensions.ctrHeight, 0])
      .nice()

    // Draw Bars
    ctr.selectAll('rect')
      .data(newDataset)
      .join('rect')
      .transition()
      .duration(5000)
      .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
      .attr("height", d => dimensions.ctrHeight - yScale(yAccessor(d)))
      .attr('x', d => xScale(d.x0))
      .attr("y", d => yScale(yAccessor(d)))
      .attr('fill', '#01c5c4')

    labelsGroup.selectAll('text')
      .data(newDataset)
      .join('text')
      .transition()
      .duration(5000)
      .attr('x', d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
      .attr('y', d => yScale(yAccessor(d)) - 10)
      .text(yAccessor)

    // Draw Axis
    const xAxis = d3.axisBottom(xScale)

    xAxisGroup.transition()
      .duration(5000)
      .call(xAxis)
  }

  d3.select("#metric").on('change', function (e) {
    e.preventDefault()

    histogram(this.value)
  })

  histogram('humidity')
}

draw()

codemirror

If we switch from humidity to temperature, the animation for the bars starts at the top left corner. They animate into the correct spot. The problem is that the starting positions are wrong. So, why is this happening? 

## Default values

Keep in mind, when we add shapes to the document, they will have an x and y coordinate of `0`. Their width and heights will also be `0`. Therefore, their animations will start from `0` and move to their respective values. 

We can fix the animation by changing the starting positions before the animation plays. One thing to note is that this problem will only affect shapes that are added to the document. Shapes that are being updated do not experience this issue. Another problem is that the shapes being removed do not get animated. 

We are going to be focusing on the bars. However, the issue affects the labels as well. As for the axis, the animation works for our purposes, so we will leave it alone. Once we fix the bars, we will move onto the labels.

Let’s take a moment to understand what is happening with our code. 

If we switch from humidity to temperature, the animation for the bars starts at the top left corner. They animate into the correct spot. The problem is that the starting positions are wrong. So, why is this happening? 

# Default values

Keep in mind, when we add shapes to the document, they will have an x and y coordinate of `0`. Their width and heights will also be `0`. Therefore, their animations will start from `0` and move to their respective values. 

We can fix the animation by changing the starting positions before the animation plays. One thing to note is that this problem will only affect shapes that are added to the document. Shapes that are being updated do not experience this issue. Another problem is that the shapes being removed do not get animated. 

We are going to be focusing on the bars. However, the issue affects the labels as well. As for the axis, the animation works for our purposes, so we will leave it alone. Once we fix the bars, we will move onto the labels.

Let’s take a moment to understand what is happening with our code. 

Newly created elements will have default x, y, height, and width attributes. This can create problems when trying to animate them.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Understanding the Problem

Default