The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
x: {
domain: data2.map((d) => d.month),
padding: 0,
round: false,
axis: null
},
y: { axis: null, domain: [-0.25, 0.8], nice: true },
facet: {
data: data2,
y: "type",
marginRight: 295
},
fy: {
domain: facets,
axis: "right",
tickFormat: (d) => `${parseInt(d) < 10 ? " " : ""}${d}`,
label: null,
round: false
},
marginTop: 27,
marginLeft: 10,
marginRight: 300,
color: { domain: [false, true], range: ["white", "black"] },
marks: [
Plot.text(data2, {
filter: (d) => d.type === facets[0],
x: "month",
y: (d) => 1.5 + 0.15 * !!d.month.match(/Jan|Feb|Mar|Jul|Aug|Sep/),
text: data2.map((d) => d.month[0]),
fontSize: 13,
fontWeight: "bold"
}),
Plot.ruleY([0]),
Plot.barY(data2, {
x: "month",
y: (d) => d.count / maxes.get(d.type),
fill: (d) => d.count > means.get(d.type),
stroke: "black"
})
],
width: 580,
height: 600
})
// each year is duplicated to show seasonality
data2 = data.concat(data.map((d) => ({ ...d, month: `${d.month}+` })))
/* Bertin's hand-picked order, grouping metrics by seasonal pattern. */
order = [18, 17, 19, 7, 10, 3, 11, 12, 15, 13, 0, 1, 6, 8, 9, 16, 5, 2, 4, 14]
facets = d3.permute([...new Set(data.map((d) => d.type))], order)
means = d3.rollup(data, v => d3.mean(v, d => d.count), d => d.type)
maxes = d3.rollup(data, v => d3.max(v, d => d.count), d => d.type)
data = FileAttachment("data.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.
