Gallery › Heatmap

Heatmap: Public meeting attendance

A row-label column, then one number column per heatmap column.

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": "meeting-heatmap",
  "type": "heatmap",
  "title": "Public meeting attendance",
  "subtitle": "People attending, by body and month",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Body",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep"
    ],
    "rows": [
      [
        "Commissioners Court",
        34,
        41,
        38,
        52,
        77,
        45
      ],
      [
        "Planning and Zoning",
        12,
        18,
        22,
        15,
        19,
        26
      ],
      [
        "Library Board",
        6,
        5,
        8,
        9,
        7,
        6
      ],
      [
        "Parks Board",
        9,
        11,
        14,
        21,
        13,
        10
      ],
      [
        "Appraisal Review",
        3,
        22,
        31,
        8,
        2,
        1
      ]
    ]
  }
}

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