Gallery › Bubble chart

Bubble chart: Parks: size, visits and upkeep

Like scatter, plus a size column; bubble area is proportional to size.

Parks: size, visits and upkeepBubble size is yearly maintenance cost

Bubble chart of Visits per year against Acres, sized by Maintenance cost: 6 points. Acres ranges from 3 to 140; Visits per year from 8,000 to 61,000. The highest Visits per year is 61,000 (Kingfisher Park), at Acres 42. The correlation (Pearson r) between Acres and Visits per year is -0.62.

Data for “Parks: size, visits and upkeep”
Park	Acres	Visits per year	Maintenance cost
Kingfisher Park	42	61,000	$180K
Courthouse Square	3	48,000	$65K
Dry Creek Trail	88	27,000	$92K
Glimmer Commons	12	35,000	$71K
Rodeo Grounds	25	19,000	$54K
Mesquite Flats	140	8,000	$38K

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": "parks-bubble",
  "type": "bubble",
  "title": "Parks: size, visits and upkeep",
  "subtitle": "Bubble size is yearly maintenance cost",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "x": "Acres",
  "y": "Visits per year",
  "size": "Maintenance cost",
  "data": {
    "columns": [
      "Park",
      "Acres",
      "Visits per year",
      {
        "name": "Maintenance cost",
        "format": {
          "style": "currency",
          "currency": "USD",
          "notation": "compact"
        }
      }
    ],
    "rows": [
      [
        "Kingfisher Park",
        42,
        61000,
        180000
      ],
      [
        "Courthouse Square",
        3,
        48000,
        65000
      ],
      [
        "Dry Creek Trail",
        88,
        27000,
        92000
      ],
      [
        "Glimmer Commons",
        12,
        35000,
        71000
      ],
      [
        "Rodeo Grounds",
        25,
        19000,
        54000
      ],
      [
        "Mesquite Flats",
        140,
        8000,
        38000
      ]
    ]
  }
}

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