D3.js line graph and scatter plot types
The basic method for creating a line chart is explained in Creating a line chart. The program that displays a basic line chart is shown below.
Basic line chart
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Line Plot</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
// 1. Prepare data
var dataset = [
[5, 20],
[25, 67],
[85, 50],
[150, 70],
[220, 88],
[250, 50],
[330, 95],
[410, 12],
[475, 44],
[480, 90]
];
var width = 800; // Graph width
var height = 400; // Graph height
var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };
// 2. Set SVG area
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
// 3. Set axis scales
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d[0]; })])
.range([margin.left, width - margin.right]);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d[1]; })])
.range([height - margin.bottom, margin.top]);
// 4. Display axes
var axisx = d3.axisBottom(xScale).ticks(5);
var axisy = d3.axisLeft(yScale).ticks(5);
svg.append("g")
.attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
.call(axisx)
.append("text")
.attr("fill", "black")
.attr("x", (width - margin.left - margin.right) / 2 + margin.left)
.attr("y", 35)
.attr("text-anchor", "middle")
.attr("font-size", "10pt")
.attr("font-weight", "bold")
.text("X Label");
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + 0 + ")")
.call(axisy)
.append("text")
.attr("fill", "black")
.attr("text-anchor", "middle")
.attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
.attr("y", -35)
.attr("transform", "rotate(-90)")
.attr("font-weight", "bold")
.attr("font-size", "10pt")
.text("Y Label");
// 5. Display line and plots
svg.append("path")
.datum(dataset)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
// Important section starts here -----------------------------
.attr("d", d3.line()
.x(function (d) { return xScale(d[0]); })
.y(function (d) { return yScale(d[1]); })
);
// Important section ends here -----------------------------
svg.append("g")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) { return xScale(d[0]); })
.attr("cy", function (d) { return yScale(d[1]); })
.attr("fill", "steelblue")
.attr("r", 4);
</script>
</body>
</html>
By default, a line graph is created by connecting the configured data points with straight lines. In the code above, the important part sets the "d" attribute of the "path" element.
.attr("d", d3.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
);
You can change the shape of the line by modifying part of the d3.line function with a curve function.
.attr("d", d3.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
.curve(d3.curveBasis)
);
Several functions can be set in the curve function, as summarized below.
Data intervals
Linear d3.curveLinear
d3.curveLinear
This performs linear interpolation between data points. It is the same as the default value. Change the important part of the example program as follows.
Linear interpolation is a method that assumes a terrain or value changes linearly and obtains an arbitrary point between grid points by connecting two adjacent observations with a straight line.
Usage is the same for all of the following functions.
.attr("d", d3.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
.curve(d3.curveLinear)
);
Spline interpolation d3.curveBasis
d3.curveBasis
This draws a spline between data points. The start and end of the line match the data points.
Cardinal spline d3.curveCardinal
d3.curveCardinal
This function can set the bend of the line with d3.curveCardinal.tension(alpha). alpha is set between 0 and 1. If it is 0, it matches the default d3.curveCatmullRom; if it is 1, it matches d3.curveLinear. The default value of alpha is 0.
Catmull-Rom spline d3.curveCatmullRom
d3.curveCatmullRom
This function can set the bend of the line with d3.curveCatmullRom.alpha(alpha). alpha is set between 0 and 1.
Natural curve spline d3.curveNatural
d3.curveNatural
Cubic spline in the x direction d3.curveMonotoneX
d3.curveMonotoneX
Cubic spline in the y direction d3.curveMonotoneY
d3.curveMonotoneY
Step (center) d3.curveStep
d3.curveStep
Step (end) d3.curveStepAfter
d3.curveStepAfter
Step (start) d3.curveStepBefore
d3.curveStepBefore
Data interval interpolation (no endpoint interpolation)
Spline d3.curveBasisOpen
d3.curveBasisOpen
Cardinal spline d3.curveCardinalOpen
d3.curveCardinalOpen
This function can set the bend of the line with d3.curveCardinalOpen.tension(alpha). alpha is set between 0 and 1. The default value of alpha is 0.
Catmull-Rom spline d3.curveCatmullRomOpen
d3.curveCatmullRomOpen
This function can set the bend of the line with d3.curveCatmullRomClosed.alpha(alpha). alpha is set between 0 and 1. The default value is 0.5.
Closed loop
Linear d3.curveLinearClosed
d3.curveLinearClosed
Spline d3.curveBasisClosed
d3.curveBasisClosed
Cardinal spline d3.curveCardinalClosed
d3.curveCardinalClosed
This function can set the bend of the line with d3.curveCardinalClosed.tension(alpha). alpha is set between 0 and 1. The default value is 0.
Catmull-Rom spline d3.curveCatmullRomClosed
d3.curveCatmullRomClosed
This function can set the bend of the line with d3.curveCatmullRomClosed.alpha(alpha). alpha is set between 0 and 1. The default value is 0.5.
Hierarchy
Spline d3.curveBundle
d3.curveBundle
This function can specify a bundle coefficient with d3.curveBundle.beta(b). The default value of b is 0.85. The graph shows examples for 1.0, 0.5, and 0; when set to 0, it becomes a straight line connecting the start and end points.