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 make one final adjustment to the scatter plot before we consider it complete. Let’s look at the x-axis for a moment.

#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)

  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

There are two problems with it. The first problem is there are too many tick marks. Fewer tick marks would make it easier to read.

The second problem is the labels for the ticks. If you were to view the weather in most weather apps, the humidity is displayed as a percentage. The dataset stores the humidity as a number between 0 and 1. We are currently seeing decimal values. We will need to convert this into a percentage. Let’s tackle both problems. 

## Configuring the axis ticks

First, we will reduce the number of ticks drawn by the axis. We are going to modify the `xAxis` function we defined in our script. We’ll start by are going to chaining a function called `ticks()`.


There are two problems with it. The first problem is there are too many tick marks. Fewer tick marks would make it easier to read.

The second problem is the labels for the ticks. If you were to view the weather in most weather apps, the humidity is displayed as a percentage. The dataset stores the humidity as a number between 0 and 1. We are currently seeing decimal values. We will need to convert this into a percentage. Let’s tackle both problems. 

# Configuring the axis ticks

First, we will reduce the number of ticks drawn by the axis. We are going to modify the `xAxis` function we defined in our script. We’ll start by are going to chaining a function called `ticks()`.


We can change how ticks on an axis are distributed and formatted if we don't like the default behavior of D3.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Refining the Axis Ticks

Configuring the axis ticks