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 talk about the three scales we have learned about in the last three lessons. They are the quantize, quantile, and threshold scales. If we look at our drawings, each chart is telling a different story. 

h1 {
  text-align: center;
}

h1:not(:first-child) {
  margin-top: 50px;
}

.chart{
  width: 600px;
  height: 150px;
  background-color: #f7f7f7;
  margin: 25px auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Heatmap</title>
  
</head>

<body>
  <h1>Linear Scale</h1>
  <div class="chart" id="heatmap1"></div>

  <h1>Quantize Scale</h1>
  <div class="chart" id="heatmap2"></div>

  <h1>Quantile Scale</h1>
  <div class="chart" id="heatmap3"></div>

  <h1>Threshold Scale</h1>
  <div class="chart" id="heatmap4"></div>

  <script src="https://d3js.org/d3.v6.min.js"></script>
  
</body>

</html>

async function draw(el, scale) {
  // Data
  const dataset = await d3.json('/udata/W96VkQJkGG5/data-5-3.json')
  dataset.sort((a, b) => a - b)

  // Dimensions
  let dimensions = {
    width: 600,
    height: 150,
  }

  const box = 30

  // Draw Image
  const svg = d3.select(el)
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height)

  // Scales
  let colorScale;

  if(scale === 'linear') {
    colorScale = d3.scaleLinear()
      .domain(d3.extent(dataset))
      .range(["white", "red"])
  } else if(scale === 'quantize') {
    colorScale = d3.scaleQuantize()
      .domain(d3.extent(dataset))
      .range(["white", "pink", "red"])
  } else if(scale === 'quantile') {
    colorScale = d3.scaleQuantile()
      .domain(dataset)
      .range(["white", "pink", "red"])
  } else if(scale === 'threshold') {
    colorScale = d3.scaleThreshold()
      .domain([45200, 135600])
      .range(["white", "pink", "red"])
  }

  // Rectangles
  svg.append('g')
    .attr('transform', 'translate(2,2)')
    .attr('stroke', 'black')
    .selectAll('rect')
    .data(dataset)
    .join('rect')
    .attr('width', box - 3)
    .attr('height', box - 3)
    .attr("x", (d, i) => box * (i % 20)) // 0, 30, 60
    .attr("y", (d, i) => box * ((i / 20) | 0))
    .attr('fill', colorScale)
}

draw('#heatmap1', 'linear')
draw('#heatmap2', 'quantize')
draw('#heatmap3', 'quantile')
draw('#heatmap4', 'threshold')

codemirror

The data is the same throughout all charts. The difference between them is the scales.

The quantize scale tells us that there is a massive disparity between social classes. There are more individuals in the lower class than the middle and upper classes combined. The quantile scale tells us that there is an even amount of individuals in each class. Lastly, the threshold scale tells a similar story to the quantize scale except less dramatic. 

# Which scale suits our story?

Out of the three scales, the threshold scale tells the story most accurately. The thresholds are based on research rather than letting D3 calculate the threshold. 
>**Remember** the thresholds for the scale are being set manually. The outcome of the heatmap may come out differently based on the data. For example, if we had a list of the top 100 wealthiest individuals in the country, the heatmap will be entirely red. 

# Grabbing the thresholds

Let’s check out the thresholds generated by each scale. We know how they’re generated, but we may want to look at the thresholds generated by the quantize and quantile scales. We will update our chain of conditional statements to the following:

The quantize, quantile, and threshold scales will transform continuous data into discrete data. Let's review the pros and cons of each scale.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Quantize vs. Quantile vs. Threshold