# 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

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 datadata.forEach(function (d) {     parseDate = d3.timeParse("%Y");     d.date = parseDate(d.date);     d.wage = +d.wage;});//sort the data by datedata.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 datax.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!

posted @ 2020-07-18 03:24  功夫 熊猫  阅读(38)  评论(0编辑  收藏