Gallery › Scatter chart
Scatter chart: Lot size and appraised value
Two number columns (x and y); optional group and label columns; trendline: true adds a fitted line.
Scatter chart of Appraised value against Lot size (acres): 24 points in 3 groups (Burnt End, Glimmer and Unincorporated). Lot size (acres) ranges from 0.18 to 5; Appraised value from $198K to $549K. The highest Appraised value is $549K (P-308), at Lot size (acres) 5. The correlation (Pearson r) between Lot size (acres) and Appraised value is 0.94. The dashed line is the least-squares fit: Appraised value = 6.50e+4 × Lot size (acres) + 2.51e+5.
- Burnt End
- Glimmer
- Unincorporated
| Parcel | Town | Lot size (acres) | Appraised value |
|---|---|---|---|
| P-101 | Burnt End | 0.21 | $214K |
| P-102 | Burnt End | 0.25 | $236K |
| P-103 | Burnt End | 0.33 | $251K |
| P-104 | Burnt End | 0.18 | $198K |
| P-105 | Burnt End | 0.5 | $289K |
| P-106 | Burnt End | 0.41 | $276K |
| P-107 | Burnt End | 0.29 | $241K |
| P-108 | Burnt End | 0.62 | $318K |
| P-201 | Glimmer | 0.35 | $268K |
| P-202 | Glimmer | 0.48 | $301K |
| P-203 | Glimmer | 0.27 | $247K |
| P-204 | Glimmer | 0.75 | $352K |
| P-205 | Glimmer | 0.55 | $322K |
| P-206 | Glimmer | 0.31 | $259K |
| P-207 | Glimmer | 0.9 | $384K |
| P-208 | Glimmer | 0.44 | $287K |
| P-301 | Unincorporated | 2.1 | $412K |
| P-302 | Unincorporated | 1.4 | $356K |
| P-303 | Unincorporated | 3.2 | $468K |
| P-304 | Unincorporated | 1.1 | $331K |
| P-305 | Unincorporated | 4.5 | $521K |
| P-306 | Unincorporated | 2.7 | $433K |
| P-307 | Unincorporated | 1.8 | $377K |
| P-308 | Unincorporated | 5 | $549K |
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": "lots-scatter",
"type": "scatter",
"title": "Lot size and appraised value",
"subtitle": "A sample of 24 residential parcels",
"trendline": true,
"source": "Halcyon County sample data (fictional, for the demo)",
"group": "Town",
"data": {
"columns": [
"Parcel",
"Town",
{
"name": "Lot size (acres)",
"format": {
"maximumFractionDigits": 2
}
},
{
"name": "Appraised value",
"format": {
"style": "currency",
"currency": "USD",
"notation": "compact"
}
}
],
"rows": [
[
"P-101",
"Burnt End",
0.21,
214000
],
[
"P-102",
"Burnt End",
0.25,
236000
],
[
"P-103",
"Burnt End",
0.33,
251000
],
[
"P-104",
"Burnt End",
0.18,
198000
],
[
"P-105",
"Burnt End",
0.5,
289000
],
[
"P-106",
"Burnt End",
0.41,
276000
],
[
"P-107",
"Burnt End",
0.29,
241000
],
[
"P-108",
"Burnt End",
0.62,
318000
],
[
"P-201",
"Glimmer",
0.35,
268000
],
[
"P-202",
"Glimmer",
0.48,
301000
],
[
"P-203",
"Glimmer",
0.27,
247000
],
[
"P-204",
"Glimmer",
0.75,
352000
],
[
"P-205",
"Glimmer",
0.55,
322000
],
[
"P-206",
"Glimmer",
0.31,
259000
],
[
"P-207",
"Glimmer",
0.9,
384000
],
[
"P-208",
"Glimmer",
0.44,
287000
],
[
"P-301",
"Unincorporated",
2.1,
412000
],
[
"P-302",
"Unincorporated",
1.4,
356000
],
[
"P-303",
"Unincorporated",
3.2,
468000
],
[
"P-304",
"Unincorporated",
1.1,
331000
],
[
"P-305",
"Unincorporated",
4.5,
521000
],
[
"P-306",
"Unincorporated",
2.7,
433000
],
[
"P-307",
"Unincorporated",
1.8,
377000
],
[
"P-308",
"Unincorporated",
5,
549000
]
]
}
}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