Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Scatter plot

A scatter plot is a visual representation of data that uses dots or markers to show the values of 2 or more variables. It’s used to show the relationship between 2 things.

On this page

When to use

  • To show the relationship between 2 or more variables
  • To show the distribution of data over 2 or more dimensions
  • To identify trends or patterns in the data

Examples

  • A scatter plot showing the relationship between physical activity level and the risk of developing a chronic disease
  • A scatter plot showing the relationship between income level and access to healthcare

What to avoid

  • Don’t use a scatter plot to show data that does not have a clear numeric value
  • Don’t use a scatter plot to show data with different units or different scales
  • Don’t use a scatter plot if there are no relationship between the variables
  • Remember that a correlation between 2 variables doesn’t necessarily mean one variable caused the other

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="scatterGraph"></div>
JS 
<script>
  // dimensions and margins
  const margin = {top: 10, right: 30, bottom: 50, left: 90},
          width = 600 - margin.left - margin.right,
          height = 540 - margin.top - margin.bottom;

  // append the svg
  const svg = d3.select("#scatterGraph")
      .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 Price/Amount
  let data = [
    {"Price":29.80,"Amount":208},
    {"Price":39.80,"Amount":303},
    {"Price":16.50,"Amount":43},
    {"Price":87.10,"Amount":412},
    {"Price":67.31,"Amount":324},
    {"Price":9.10,"Amount":232},
    {"Price":3.30,"Amount":85},
    {"Price":10.10,"Amount":178},
    {"Price":45.33,"Amount":321},
    {"Price":45.21,"Amount":421},
    {"Price":12.13,"Amount":234},
    {"Price":32.19,"Amount":425},
    {"Price":18.31,"Amount":223},
    {"Price":5.90,"Amount":18},
    {"Price":4.99,"Amount":107},
    {"Price":13.32,"Amount":132},
    {"Price":78.11,"Amount":524},
    {"Price":32.31,"Amount":302},
    {"Price":82.31,"Amount":683},
    {"Price":62.31,"Amount":552},];

  // xAxis
  const x = d3.scaleLinear()
  .domain([0, 100])
  .range([ 0, width ]);

  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x))
    .style("font-size","12px");

  // yAxis
  const y = d3.scaleLinear()
  .domain([0, 1000])
  .range([ height, 0]);

  svg.append("g")
    .call(d3.axisLeft(y))
    .style("font-size","12px");
      
  // xAxis label 
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", width/2 + margin.left - 35)
      .attr("y", height + margin.top + 35)
      .style("font-weight","bold")
      .style("font-size", "23px")
      .text("Price");

  // yAxis label
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("transform", "rotate(-90)")
      .attr("y", -margin.left + 45)
      .attr("x", -margin.top - height/2 + 60)
        .style("font-weight","bold")
        .style("font-size", "23px")
      .text("Amount")

    // Add graph data points
    svg.append('g')
    .selectAll("dot")
    .data(data)
    .join("circle")
        .attr("cx", function (d) { return x(d.Price); } )
        .attr("cy", function (d) { return y(d.Amount); } )
        .attr("r", 7)
        .style("fill", "#69b3a2");
</script>

Content and design guidelines

  • Consider adding a trend line if there’s a clear relationship between the variables
  • Don’t include too many data points - if there are too many dots, the graph could become confusing
  • Follow the general design guidelines

Accessibility guidelines

  • Provide a data table with the chart
  • If the scatter plot tells a clear story, include that story in the alt text. For example, if the graph shows a clear positive or negative relationship between 2 variables, spell that out in the alt text
  • Follow the general accessibility guidelines
Date modified: