Making a simple scatter plot with d3.js

https://medium.com/@kj_schmidt/making-a-simple-scatter-plot-with-d3js-58cc894d7c97

Making a simple scatter plot with d3.js

KJ Schmidt

Follow

Feb 20, 2019 · 3 min read

 

Getting started

This tutorial uses d3 v4.6. The CDN is hosted on Cloudflare, so you can start by adding this script tag to your html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

While still in your html file, add a div with an ID (I’m using #scatter in this tutorial) where you’d like the scatter plot to go:

<div id="scatter"></div>

Now onto the javascript. Create a new javascript file for your graph (don’t forget to go back to your html file and add a script tag for it!).

Next, we’ll need some data. We can add this directly to our javascript file. You can add dummy data or use the data I used about the federal minimum wage from United States Department of Labor:

data = [{
     date: 2009,
     wage: 7.25
}, {
     date: 2008,
     wage: 6.55
}, {
     date: 2007,
     wage: 5.85
}, {
     date: 1997,
     wage: 5.15
}, {
     date: 1996,
     wage: 4.75
}, {
     date: 1991,
     wage: 4.25
}, {
     date: 1981,
     wage: 3.35
}, {
     date: 1980,
     wage: 3.10
}, {
     date: 1979,
     wage: 2.90
}, {
     date: 1978,
     wage: 2.65
}]

Get going on the graph

First, we’ll set our variables for margin, width, and height.

var margin = {
     top: 20,
     right: 20,
     bottom: 30,
     left: 40
}width = 700 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;

Next, we need to format the data. I used d3.timeParse() because my data includes dates. You can also sort your data, which I did from lowest to highest year. Sorting is only important here if you plan to connect your data points.

// format the data
data.forEach(function (d) {
     parseDate = d3.timeParse("%Y");
     d.date = parseDate(d.date);
     d.wage = +d.wage;
});//sort the data by date
data.sort(function (a, b) {
     return a.date - b.date;
});

Now it’s time to set the ranges and scale for our x and y axis. I used .scaleTime() for the x axis since it’s in years, and .scaleLinear() for the y axis since it’s a continuous scale.

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);// Scale the range of the data
x.domain(d3.extent(data, function (d) {
     return d.date;
}));y.domain([0, d3.max(data, function (d) {
     return d.wage;
})]);

This next code establishes what kind of graph we’re making. We’re using d3.line(), which allows us to make either a scatter plot or a line chart.

var valueline = d3.line()
     .x(function (d) {
          return x(d.date);
     })
     .y(function (d) {
          return y(d.wage);
     });

Now we need to append the SVG object to the #scatter div we made earlier in the html.

var svg = d3.select("#scatter").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Optional: If you want to connect your data points like this, add this code for a trend line:

svg.append("path")
     .data([data])
     .attr("class", "line")
     .attr("d", valueline)
     //styling:
     .attr("stroke", "#32CD32")
     .attr("stroke-width", 2)
     .attr("fill", "#FFFFFF");

*make sure you sorted your data in the format/sort step, or you may have a weird shape here.

Almost done

It’s time to add the actual data points:

var path = svg.selectAll("dot")
     .data(data)
     .enter().append("circle")
     .attr("r", 5)
     .attr("cx", function (d) {
           return x(d.date);
     })
     .attr("cy", function (d) {
          return y(d.wage);
     })
     .attr("stroke", "#32CD32")
     .attr("stroke-width", 1.5)
     .attr("fill", "#FFFFFF");

For both the line and data point code, you can edit the way it looks with the .attr lines.

Lastly, we add the axis. I added some formatting to the y axis to show dollar amounts with .tickFormat(). You can also specify the amount of ticks you want with .ticks().

svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(x));svg.append("g")
     .call(d3.axisLeft(y).tickFormat(function (d) {
          return "$" + d3.format(".2f")(d)
     }));

You have a graph!

If you’re having any issues, see the full code or check it out live.

Interested in adding effects and showing the data point’s value on hover? I have another tutorial for that!