extent = d3.extent(data, d => d.value) // data is loaded in the Annex, below
scaleAnomalyPuOr = d3.scaleDiverging()
.domain([extent[0], 0, extent[1]])
.interpolator(d3.interpolatePuOr)
chart(scaleAnomalyPuOr) // chart is defined in the Annex, below
scaleAnomaly = d3.scaleDiverging(t => d3.interpolateRdBu(1 - t))
.domain([extent[0], 0, extent[1]])
chart(scaleAnomaly)
chart(d3.scaleDiverging([extent[0], 0, extent[1]], t => d3.interpolateRdBu(1 - t)))
scaleAnomaly(NaN)
scaleAnomaly.copy().unknown("transparent")(NaN)
scaleAnomaly.range()
chart(scaleAnomaly.copy().range(["green", "white", "orange"]))
scaleDivergingGeneric = d3.scaleDivergingSymlog(
[-1e6, 0, 1e6],
d3.interpolatePiYG
)
{
const context = DOM.context2d(width, 45);
context.font = "30px sans-serif";
context.textBaseline = "hanging";
do {
const v = 1000 * (1 / Math.random() - 1) * (Math.random() < 0.5 ? -1 : 1);
context.fillStyle = scaleDivergingGeneric(v);
context.fillRect(0, 0, width, 45);
context.fillStyle = "white";
context.fillText(`value = ${v.toFixed(2)}`, 10, 10);
yield context.canvas;
await Promises.tick(1000);
} while (1);
}
data = {
const data = [];
// https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv
// See https://observablehq.com/@mbostock/global-temperature-trends
await d3.csv(
await FileAttachment("temperatures.csv").url(),
(d, i, columns) => {
for (let i = 1; i < 13; ++i) {
data.push({
date: new Date(d.Year, i - 1, 1),
value: +d[columns[i]]
});
}
}
);
return data;
}
function chart(scale) {
const canvas = DOM.canvas(data.length, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
var i = 0;
for (const d of data) {
context.fillStyle = scale(d.value);
context.fillRect(i++, 0, 1, 1);
}
return canvas;
}
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.
