Gallery › Histogram

Histogram: How long residents' commutes take

One column of numbers; bins or binWidth sets the bars.

How long residents' commutes takeOne-way minutes, from a resident survey (60 answers)

Histogram of Minutes: 60 values in 12 bins of width 10. Values range from 5 to 110; the median is 35.5 and the mean 40.27. The most common bin is 20 to under 30, with 13 values.

Data for “How long residents' commutes take”
Minutes from	To under	Count	Share
0	10	2	3.3%
10	20	7	11.7%
20	30	13	21.7%
30	40	12	20%
40	50	9	15%
50	60	6	10%
60	70	4	6.7%
70	80	3	5%
80	90	2	3.3%
90	100	1	1.7%
100	110	0	0%
110	120	1	1.7%

Source: Halcyon County sample data (fictional, for the demo)

The spec

This is everything OSCharts needed to draw the chart above. The data is a table: named columns and rows, the way it sits in a spreadsheet.

{
  "id": "commute-histogram",
  "type": "histogram",
  "title": "How long residents' commutes take",
  "subtitle": "One-way minutes, from a resident survey (60 answers)",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "binWidth": 10,
  "data": {
    "columns": [
      "Minutes"
    ],
    "rows": [
      [
        5
      ],
      [
        8
      ],
      [
        12
      ],
      [
        14
      ],
      [
        15
      ],
      [
        15
      ],
      [
        17
      ],
      [
        18
      ],
      [
        19
      ],
      [
        20
      ],
      [
        21
      ],
      [
        22
      ],
      [
        22
      ],
      [
        23
      ],
      [
        24
      ],
      [
        25
      ],
      [
        25
      ],
      [
        26
      ],
      [
        27
      ],
      [
        28
      ],
      [
        28
      ],
      [
        29
      ],
      [
        30
      ],
      [
        30
      ],
      [
        31
      ],
      [
        32
      ],
      [
        33
      ],
      [
        34
      ],
      [
        35
      ],
      [
        35
      ],
      [
        36
      ],
      [
        37
      ],
      [
        38
      ],
      [
        39
      ],
      [
        40
      ],
      [
        41
      ],
      [
        42
      ],
      [
        43
      ],
      [
        44
      ],
      [
        45
      ],
      [
        45
      ],
      [
        47
      ],
      [
        48
      ],
      [
        50
      ],
      [
        52
      ],
      [
        54
      ],
      [
        55
      ],
      [
        57
      ],
      [
        58
      ],
      [
        60
      ],
      [
        62
      ],
      [
        65
      ],
      [
        68
      ],
      [
        70
      ],
      [
        72
      ],
      [
        75
      ],
      [
        80
      ],
      [
        85
      ],
      [
        95
      ],
      [
        110
      ]
    ]
  }
}

Put it on a page

In a browser, load the two files and mount the chart:

<link rel="stylesheet" href="oscharts.css">
<script src="oscharts.js" defer></script>
<div id="chart"></div>
<script type="module">
  OSCharts.mount(document.getElementById("chart"), spec);
</script>

Or render it on a server or in a build step, so the chart is in the page before any JavaScript runs:

import { render } from "oscharts";
const html = render(spec);   // a complete, accessible <figure>

Command line: npx oscharts render spec.json > chart.html