Public
Edited
Oct 31, 2023
Plot.plot({
marginLeft: 80,
marginRight: 40,
style: { "font-size": "16px" },
y: {
label: null,
type: "band",
domain: ["first", "daily", "weekly", "monthly", "other"],
tickSize: 0,
},
x: { axis: null },
marks: [
Plot.barX(aggdata, {x: "pct", y: "bin", fill: "orange"}),
Plot.text(aggdata, {x: "pct", y: "bin", text: (d) => d3.format(".0%")(d.pct), dx: 5, textAnchor: "start"}),
Plot.tip(aggdata, Plot.pointer({
x: 0,
y: "bin",
title: d => d.description,
anchor: "left",
lineWidth: 5,
pointerSize: 16,
fontSize: 16,
//fontFamily: "poppins",
}))
]
})
Plot.plot({
width: 900,
height: 200,
marginTop: 40,
marginLeft: 90,
marginRight: 30,
style: {
"font-size": "0.8em", // Set the font-size property
"backgroundColor": "#eee",
},
y: {
label: null,
type: "band",
domain: ["first", "daily", "weekly", "monthly", "other"],
},
x: {
percent: true,
grid: true,
},
marks: [
Plot.axisX({anchor: "top", label: "% of rides", labelAnchor: "right"}),
Plot.barX(triprate, Plot.groupY({ x: "proportion" }, { y: "trip_rate_bin", fill: "pink" })),
Plot.text(triprate, Plot.groupY(
{ x: "proportion" },
{ y: "trip_rate_bin", text: d => d3.format(".0%")(d.length / triprate.length), dx: 17 }
)),
]
})
bar_chart_sample.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
