Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Histogram

A histogram is a visual representation of data that uses bars to show the frequency or number of observations within a given range of values.

On this page

When to use

  • To show the distribution of a continuous data set
  • To identify trends or patterns in the data

Difference between vertical bar charts and histograms

  • Vertical bar charts are used to show different data points for different categories. Each bar represents a number or amount for a given category.
  • Histograms are used to show the distribution of a continuous data set. The bars in a histogram are placed right next to each other, with no space between the bars, to show the continuity of the data.
  • Use vertical bars when you want to show the distribution of data across categories or groups.
  • Use histograms when you want to show the distribution of a continuous data set.

Examples

  • A histogram showing the distribution of physical activity levels by age
  • A histogram showing the distribution of ages for individuals diagnosed with a certain disease.

What to avoid

  • Don't use histograms to show data that does not have a clear numeric value
  • Don't use histograms to show data that is not continuous
  • Don't use histograms to show data with different units or different scales

Design and code

HTML 
<!-- Add D3 library in the head section -->
<script src="https://d3js.org/d3.v7.min.js"></script>
   
<!-- Add a div in the section where you want the graph -->
<div id="histogramDiv"></div>
JS 
<script>
  // set the dimensions 
      const margin = {top: 10, right: 30, bottom: 50, left: 90},
          width = 620 - margin.left - margin.right,
          height = 520 - margin.top - margin.bottom;
      
    // append the svg 
    const svg = d3.select("#histogramDiv")
      .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})`);
    
    // dummy data
    d3.csv("/src/design-manual/data/en/histograms/data.csv").then( function(data) {
    
      // xAxis
      const x = d3.scaleLinear()
          .domain([0, 1000])
          .range([0, width]);
          
      svg.append("g")
          .attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x))
          .style("font-size","17px");
    
      // set the parameters
      const histogramFunc = d3.histogram()
          .value(function(d) { return d.price; })   
          .domain(x.domain())  
          .thresholds(x.ticks(70)); 
    
      const allBins = histogramFunc(data);
    
      // yAxis
      const y = d3.scaleLinear()
          .range([height, 0]);
        
        y.domain([0, d3.max(allBins, function(d) { return d.length; })]);   
    
      svg.append("g")
          .call(d3.axisLeft(y))
          .style("font-size","17px");
          
          // xAxis label 
        svg.append("text")
            .attr("text-anchor", "end")
            .attr("x", width/2 + margin.left - 90)
            .attr("y", height + margin.top + 40)
            .style("font-weight","bold")
            .style("font-size", "23px")
            .text("Bins");
      
        // yAxis label
        svg.append("text")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(-90)")
            .attr("y", -margin.left + 35)
            .attr("x", -margin.top - height/2 + 20)
              .style("font-weight","bold")
              .style("font-size", "23px")
            .text("Price");
            
      // append the bars
      svg.selectAll("rect")
        .data(allBins)
        .join("rect")
        .attr("x", 1)
        .attr("transform", function(d) { return `translate(${x(d.x0)} , ${y(d.length)})`})
            .attr("width", function(d) { return x(d.x1) - x(d.x0) -1})
            .attr("height", function(d) { return height - y(d.length); })
            .style("fill", "#336699")
    });
</script>

Content and design guidelines

  • Always start the Y axis at 0
  • In general, use the same colour for all bars, unless you want to highlight a specific range
  • Use the right number of bins to separate the data in ranges - play around with different bin sizes
  • Makes sure all bins are of equal size
  • Have the bars touch each other (no space between them)
  • Follow the general design guidelines

Accessibility guidelines

  • Provide a data table with the graph
  • If the bar graph tells a clear story, include that story in the alt text. For example, if the graph shows a distribution that resembles a normal “bell” curve, spell it out in the alt text
  • Follow the general accessibility guidelines
Date modified: