Dataviz at Office for National Statistics (UK)
alternateDirection = false
function piledPlot(data, { diameter = 1, x = d => d } = {}) {
const circles = data
.map((d, i, data) => ({ x: +x(d, i, data), placed: false, y: 0, data: d }))
.sort((a, b) => a.x - b.x);
let time = 0;
let y = 0;
let backwards = false;
while (time < circles.length) {
let x = Infinity;
for (let i = 0; i < circles.length; i++) {
let c = circles[backwards ? circles.length - 1 - i : i];
if (c.placed) continue;
let xDiff = Math.abs(c.x - x);
if (xDiff < diameter) continue;
c.placed = true;
c.insertionTime = ++time;
c.y = y;
x = c.x;
}
y += diameter;
if (alternateDirection) backwards = !backwards;
}
return circles;
}
data = (await FileAttachment("cars-2.csv").csv({
typed: true
})).map(({ Name: name, Weight_in_lbs: value }) => ({ name, value: +value }))
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.value))
.range([margin.left, width - margin.right])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
colourScale = chroma.scale(['yellow', '008ae5'])
height = 450
radius = width < 600 ? 5 : 6.5
padding = 1.5
margin = ({top: 20, right: 20, bottom: 30, left: 20})
d3 = require("d3@6")
chroma = require('chroma-js')
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.
