Plot.plot({
marginLeft: 280,
marginRight: 20,
//marginTop: 55,
height: 250,
style: {
fontSize: "18px",
background: "transparent",
fontWeight: 400,
},
x: { axis: null },
y: { label: null },
marks: [
// Draw title
// Plot.text(['CAF Grants for 2022-23 School Year'], {
// frameAnchor: "top-left",
// dy: -50,
// dx: -250,
// fontSize: "30px",
// fontWeight: "600",
// }),
Plot.barX(funding, {
x: d3.max(funding, d => d.value),
y: "category",
fill: "#e5e5e5",
insetTop: 2,
insetBottom: 2
}),
Plot.barX(funding, {
x: "value",
y: "category",
sort: { y: "x", reverse: true },
fill: "#036eb0",
insetTop: 2,
insetBottom: 2
}),
Plot.text(funding, {
text: d => `${d.value}%`,
x: "value",
y: "category",
textAnchor: "end",
dx: -4,
fill: "white",
})
]
})
funding = FileAttachment("CAF Funding 2022-23@3.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.
