Creating a D3.js line chart

Explains how to create a basic line chart in D3.

Example program

Example code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Line Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <script>
    // 1. Prepare data
    var dataset = [
      [5, 20],
      [25, 67],
      [85, 21],
      [100, 33],
      [220, 88],
      [250, 50],
      [330, 95],
      [410, 12],
      [475, 44],
      [480, 90]
    ];

    var width = 400; // Graph width
    var height = 300; // 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
    svg.append("path")
      .datum(dataset)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function (d) { return xScale(d[0]); })
        .y(function (d) { return yScale(d[1]); }));
  </script>
</body>

</html>

Example code explanation

The step-by-step scatter plot graph explanation page introduces how to create a scatter plot in detail. A line chart can be drawn by slightly changing the plot portion.

1. Prepare data

An object is declared to set margins.

var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

The bottom and left margins are set larger to display the axes.

2. Set SVG area

Set the SVG display area.

3. Set axis scales

Set the axis scales.

d3.scaleLinear()

The code above sets a function that converts the range set with domain(..) to the range set with range(..). It creates functions that convert line graph coordinates into screen pixel values.

4. Display axes

Use D3’s d3.axisBottom() and d3.axisLeft() functions to set axis elements. Pass the axis-scale functions as arguments and call them with call, and SVG elements are added automatically.

  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)

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + 0 + ")")
    .call(axisy)

.ticks() controls the number of axis ticks. Set it with an integer.

After calling the axes, add axis labels with text elements.

    .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");

    .append("text")
    .attr("fill", "black")
    .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
    .attr("y", -35)
    .attr("transform", "rotate(-90)")
    .attr("text-anchor", "middle")
    .attr("font-weight", "bold")
    .attr("font-size", "10pt")
    .text("Y Label");

"text-anchor" is an attribute for aligning text positions. Here it is set to "middle" for center alignment. Each label is moved by 35px so it does not overlap the axis.

5. Display line

Display the line of the line chart with a "path" element. The data binding is done as follows.

.datum(dataset)

Unlike data, which binds individual data items, datum is used to add the data set to a single path.

The following code is the method that creates the "d" attribute of the SVG element path.

  d3.line()
    .x(function(d) { return xScale(d[0]); })
    .y(function(d) { return yScale(d[1]); })

Closing

A line chart can be created with the same algorithm as a bar chart and scatter plot. Once you create one, it can be applied easily to other graphs.