Public
Edited
Oct 3, 2023
1 fork
Plot.plot({
height: 50,
marginBottom: 20,
color: {
legend: true,
domain: ["early", "0-10", "10-20", "20-30"],
// scheme: ["green", "yellow", "orange", "red"],
},
x: { axis: null },
marks: [
Plot.barX(data, { x: "value", fill: "bin" }),
// Plot.axisX({anchor: "top", label: "%", labelAnchor: "right"}),
Plot.text(data, {
x: d => d.cumsum - d.value / 2,
text: d => d3.format(".0%")(d.value),
}),
]
})
data = [
{"bin": "early", "value": 0.35, "cumsum": 0.35},
{"bin": "0-10", "value": 0.27, "cumsum": 0.62},
{"bin": "10-20", "value": 0.15, "cumsum": 0.77},
{"bin": "20-30", "value": 0.23, "cumsum": 1.00},
]
colorScale = d3.scale("ordinal", {domain: ["A", "B", "C"], range: ["red", "blue", "green"]});
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.
