Published
Edited
Apr 12, 2022
2 stars
Plot.plot({
width: 1000,
color: {
legend: true,
...dataset.colors,
},
facet: {
data: dataset.data,
// Hack to plot an arbirary 5x5 grid of charts
// Credit: https://3iap.com/observable-plot-parking-plague-javascript-data-visualization-ukcPx9d7TqGaDLZUM2pkjQ/
x: (d) => Math.round(d.Year % 5),
y: (d) => Math.floor(d.Year / 5)
},
x: {
axis: null,
},
fx: {
axis: null,
},
y: {
axis: null,
},
fy: {
axis: null,
},
r: {
range: [10, 40],
},
marks: [
Plot.frame(),
Plot.dot(dataset.data, {
x: "Year",
r: dataset.r,
stroke: dataset.stroke,
// Hack to plot the data at the center of x axis
transform: customTransform,
}),
Plot.text(dataset.data, {
x: () => dataset.median,
y: () => dataset.median,
text: (d) => `${d.Year}`,
// Move text to top of frame
dy: -50,
}),
]
})
function customTransform(data, facets) {
return {
data: data.map(d => {
// Hack to plot the data at the center of x axis
return {...d, Year: dataset.median};
}),
facets,
};
}
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.
