Published unlisted
Edited
Aug 19, 2021
3 stars
Insert cell
Insert cell
raw = FileAttachment("data.csv").csv({ typed: true })
Insert cell
data = raw.flatMap(({ dataDescription, ...rest }) => {
const [attrA, attrB] = dataDescription.split("_");
return Object.keys(rest).map((key) => ({
attrA,
attrB,
date: dateParse(key),
value: rest[key]
}));
})
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 800,
facet: {
data,
y: "attrB"
},
fy: {
label: null
},
marginLeft: 50,
marks: [
Plot.frame({ stroke: "#ccc" }),
Plot.lineY(data, { x: "date", y: "value", z: "attrA", stroke: "attrA" })
]
})
Insert cell
Insert cell
groups = d3.groups(data, (d) => d.attrB)
Insert cell
Insert cell
Insert cell
htl.html`${groups.map(
([group, groupData]) =>
htl.html`<h4 style="margin-top: 1rem;">${group}</h4>${Plot.plot({
marginLeft: 50,
marks: [
Plot.frame({ stroke: "#ccc" }),
Plot.lineY(groupData, {
x: "date",
y: "value",
z: "attrA",
stroke: "attrA"
})
]
})}`
)}`
Insert cell
Insert cell
dateParse = d3.utcParse("%d-%b-%y")
Insert cell
import { swatches as Swatches } from "@d3/color-legend"
Insert cell

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.
Learn more