The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
May 19, 2023
10 forks
Importers
14 stars
{
// Reshape wide data to make it tidy.
const points = dimensions.flatMap((dimension) =>
cars.map(({ [dimension]: value }, index) => ({ index, dimension, value }))
);
// Compute normalization scales for each dimension.
const scales = new Map(
dimensions.map((dimension) => [
dimension,
d3.scaleLinear().domain(d3.extent(cars, (d) => d[dimension]))
])
);
// Compute ticks for each dimension.
const ticks = dimensions.flatMap((dimension) => {
return scales
.get(dimension)
.ticks(7)
.map((value) => ({ dimension, value }));
});
return Plot.plot({
marginLeft: 104,
marginRight: 20,
x: { axis: null },
y: { padding: 0.1, domain: dimensions, label: null, tickPadding: 9 },
color: { scheme: "BrBG", type: "linear", reverse: true, legend: true },
marks: [
Plot.ruleY(dimensions),
Plot.lineX(points, {
x: ({dimension, value}) => scales.get(dimension)(value),
y: "dimension",
z: "index",
stroke: ({index}) => cars[index][color],
strokeWidth: 0.5,
strokeOpacity: 0.5
}),
Plot.text(ticks, {
x: ({dimension, value}) => scales.get(dimension)(value),
y: "dimension",
text: "value",
fill: "black",
stroke: "white",
strokeWidth: 3
})
]
});
}
dimensions = cars.columns.slice(1)
cars = FileAttachment("cars.csv").csv({ typed: true })
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.
