D3.js bar chart

Create a simple bar chart with D3.js.

Example program

Create a simple bar chart.

Example code

<!DOCTYPE html>
<html>

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

<body>
  <script>
    // 1. Prepare data
    var dataset = [
      { "name": "A", "value": 5 },
      { "name": "B", "value": 6 },
      { "name": "C", "value": 8 },
      { "name": "D", "value": 1 },
      { "name": "E", "value": 2 },
      { "name": "F", "value": 6 },
      { "name": "G", "value": 8 },
      { "name": "H", "value": 6 },
      { "name": "I", "value": 10 },
      { "name": "J", "value": 9 }
    ]
    var width = 400; // Graph width
    var height = 300; // Graph height
    var padding = 30; // Margin for scale display

    // 2. Set SVG area
    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

    //  3. Set axis scales
    var xScale = d3.scaleBand()
      .rangeRound([padding, width - padding])
      .padding(0.1)
      .domain(dataset.map(function (d) { return d.name; }));

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function (d) { return d.value; })])
      .range([height - padding, padding]);

    // 4. Display axes
    svg.append("g")
      .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
      .call(d3.axisBottom(xScale));

    svg.append("g")
      .attr("transform", "translate(" + padding + "," + 0 + ")")
      .call(d3.axisLeft(yScale));

    // 5. Display bars
    svg.append("g")
      .selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function (d) { return xScale(d.name); })
      .attr("y", function (d) { return yScale(d.value); })
      .attr("width", xScale.bandwidth())
      .attr("height", function (d) { return height - padding - yScale(d.value); })
      .attr("fill", "steelblue");
  </script>
</body>

</html>

Code settings

1. Prepare data

Create padding as a variable to secure the width needed to display the axes. Margins with the width set by padding are added to the top, bottom, left, and right.

2. Set SVG area

Set an svg tag inside body to prepare the drawing area.

3. Set axis scales

Prepare a scale conversion function that maps the axis width to the screen width, and a function for displaying the axes.

The x axis is set using D3’s d3.scaleBand() function.

var xScale = d3.scaleBand()
    .rangeRound([padding, width - padding])
    .padding(0.1)
    .domain(dataset.map(function(d) { return d.name; }));

First, set the scale display range with rounding using .rangeRound(..).

.rangeRound([padding, width - padding])

Here, because there is a gap of padding at both ends of the graph, the x axis is set to the range from padding to width - padding.

In .padding(..), set the spacing between bars in the bar chart as a ratio from 0.0 to 1.0.

.padding(0.1)

In .domain(..), set the horizontal-axis labels (name) and their count.

.domain(dataset.map(function(d) { return d.name; }));

The arguments are converted with map and set. The label strings set here are displayed on the x axis.

The y axis is set using D3’s d3.scaleLinear() function.

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d.value; })])
    .range([height - padding, padding]);

d3.scaleLinear() is a function that proportionally converts the scale set with domain(..) to the scale set with range. In domain, set graph coordinate values from 0 to the maximum numeric value (value, obtained with d3.max(...)). In range, set the range while considering the displayed distance and padding. Because the y-axis values increase as the screen goes downward, set the larger screen-side value (height - padding) at y=0.

4. Display axes

Set the x and y axes.

  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
    .call(d3.axisBottom(xScale));
 
  svg.append("g")
    .attr("transform", "translate(" + padding + "," + 0 + ")")
    .call(d3.axisLeft(yScale));

The x axis is offset by the graph height, and the y axis is offset by the display margin of the x axis.

d3.axisBottom(xScale)
d3.axisLeft(yScale)

The functions above are for displaying SVG elements for axes. When called with call(..), they display the axis scale using SVG elements such as line.

5. Display bars

  svg.append("g")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d) { return xScale(d.name); })
    .attr("y", function(d) { return yScale(d.value); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - padding - yScale(d.value); })
    .attr("fill", "steelblue");

Display the bars. xScale contains the function called with d3.scaleBand(), and passing the mapped axis label (d.name) as an argument returns each coordinate. .bandwidth() retrieves the width while considering the configured padding(). Because "rect" displays a rectangle from the top toward the lower right, the "y" attribute becomes the top coordinate of the bar.