chart
import {chart, res} with {values as data} from "@fil/umap-o-matic"
values = peryear.slice(1, -1) // remove the first and last years which are incomplete
data = d3.csv(
"https://gist.githubusercontent.com/Fil/15e57d2584b618521d173d4c0088d13b/raw/2f7f1a236c074635435cc7ebf9253c20a5681690/data.csv",
d => {
d = d3.autoType(d); // d3.autoType converts "2010-09" to a JavaScript Date object
d.celsius = (d.temp - 32) * (5 / 9); // convert °F to Celsius
delete d.temp; // who needs Farenheit
return d;
}
)
peryear = [
...d3.rollup(data, v => v.map(d => d.celsius), d => d.date.getFullYear())
].map(d =>
Object.assign(
{
title: d[0],
mean: d3.mean(d[1]),
color: color(d3.mean(d[1]))
},
d[1]
)
)
color = d3.scaleSequential(d3.interpolateInferno).domain([3.6, 10.5])
d3 = require("d3@5", "d3-array@2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
