Dataviz at Office for National Statistics (UK)
selection // brush an axis below to see this update!
data = {
const col0 = rawData.columns[0];
const result = rawData.map((d) => ({
[col0]: d[col0]
}));
for (const column of rawData.columns.slice(1)) {
const xScale = x.get(column);
const vals = rawData
.map((d, i) => ({ x: d[column], index: i }))
.filter((d) => d.x != null);
const placedPoints = useSpacedJitter
? spacedJitter(vals, (d) => xScale(d.x), [0, 40], {
edgeSpacing: 0.5
})
: vals.map((d) => ({ x: xScale(d.x), y: Math.random() * 40, datum: d }));
for (const { x, y, datum } of placedPoints) {
result[datum.index][column] = { x, y, rawX: datum.x };
}
}
result.columns = rawData.columns;
return result;
}
// Create an horizontal (*x*) scale for each key.
x = new Map(
Array.from(keys, (key) => [
key,
d3.scaleLinear(
d3.extent(rawData, (d) => d[key]),
[marginLeft, width - marginRight]
)
])
)
// Create the vertical (*y*) scale.
y = d3.scalePoint(keys, [marginTop, height - marginBottom])
width = 928
height = keys.length * 100
marginTop = 120
marginRight = 10
marginLeft = 10
marginBottom = 20
rawData = FileAttachment("cars.csv").csv({ typed: true })
keys = rawData.columns.slice(1)
import {legend as Legend} from "@d3/color-legend"
import { spacedJitter } from "@jtrim-ons/avoiding-overlaps-in-jitter-plots";
columnOrientedData = (await FileAttachment("column-oriented-data.json").json())
.combinedDataObjectColumnOriented
ltlas = new Set(config.areasGeogLevelObject.lower)
config = FileAttachment("config.json").json()
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.
