OSCharts demo Halcyon County sample data

Gallery › Treemap

Treemap: Capital projects by cost

A label column and one number column; rectangles sized by value.

Capital projects by costFive-year capital plan, 2026 to 2030

Treemap of Cost by Project: 8 parts adding up to $16M. Largest: Courthouse accessibility upgrade, $4.2M (26.8%), FM 1102 widening, $3.6M (23%) and Burnt End fire station, $2.9M (18.5%). Smallest: Animal shelter kennels, $400K (2.6%). Each rectangle's area is its share of the total; darker means larger.

Courthouse accessibility upgrade$4.2M · 26.8%FM 1102 widening$3.6M · 23%Burnt End fire station$2.9M · 18.5%Glimmer libraryexpansion$1.8M · 11.5%Sidewalk and curb ramps$1.5M · 9.6%Park restrooms$650K · 4.2%Radio system$600K · 3.8%
Courthouse accessibilityupgrade$4.2M · 26.8%FM 1102 widening$3.6M · 23%Burnt End fire station$2.9M · 18.5%Glimmer libraryexpansion$1.8M · 11.5%Sidewalk and curbramps$1.5M · 9.6%Radiosystem$600K · 3.8%
Data for “Capital projects by cost”
ProjectCostShare
Courthouse accessibility upgrade$4.2M26.8%
FM 1102 widening$3.6M23%
Burnt End fire station$2.9M18.5%
Glimmer library expansion$1.8M11.5%
Sidewalk and curb ramps$1.5M9.6%
Park restrooms$650K4.2%
Radio system$600K3.8%
Animal shelter kennels$400K2.6%

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": "capital-treemap",
  "type": "treemap",
  "title": "Capital projects by cost",
  "subtitle": "Five-year capital plan, 2026 to 2030",
  "format": {
    "style": "currency",
    "currency": "USD",
    "notation": "compact"
  },
  "source": "Halcyon County sample data (fictional, for the demo)",
  "data": {
    "columns": [
      "Project",
      "Cost"
    ],
    "rows": [
      [
        "Courthouse accessibility upgrade",
        4200000
      ],
      [
        "FM 1102 widening",
        3600000
      ],
      [
        "Burnt End fire station",
        2900000
      ],
      [
        "Glimmer library expansion",
        1800000
      ],
      [
        "Sidewalk and curb ramps",
        1500000
      ],
      [
        "Park restrooms",
        650000
      ],
      [
        "Radio system",
        600000
      ],
      [
        "Animal shelter kennels",
        400000
      ]
    ]
  }
}

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