Plot.plot({
marginLeft: 10,// don’t need left-margin since labels are inset
marginRight: 150,
marginTop: 50,
width: 800,
height: 450,
style: {
fontSize: "14px",
background: "transparent",
},
x: {
label: null,
},
y: {
//label: "Funds raised ($)",
},
marks: [
// Draw title
// Plot.text(['Growth in CAF funding by school year'], {
// frameAnchor: "top-left",
// dy: -60,
// fontSize: "30px",
// fontWeight: "600",
// }),
// Draw area curves for Total amount raised & Employee matching
Plot.areaY(data, {
x: "date",
y: "total",
fill: "rgba(3, 110, 176, 0.75)",
}),
Plot.areaY(data, {
x: "date",
y: "matching",
fill: "rgba(255,255,255,0.5)",
}),
Plot.gridY({
strokeDasharray: "0.5,3", // dashed
strokeOpacity: 1 // opaque
}),
Plot.axisY({
tickSize: 0, // don’t draw ticks
dx: 45, // offset right
dy: -6, // offset up
lineAnchor: "bottom", // draw labels above grid lines
tickFormat: (d, i, _) => formatLabel(d, i, _)
}),
// Draw dots for all Total amount raised & Emplloyee matching values
// Plot.dot(data, {
// x: "date",
// y: d => Math.max(d.total),
// fill: "#036eb0",
// r: 3,
// }),
// Plot.dot(data, {
// x: "date",
// y: d => Math.max(d.matching),
// fill: "rgba(255,255,255,0.5)",
// r: 3,
// }),
// Draw vertical line for most recent value
Plot.ruleX(data, Plot.selectLast({
x: "date",
y: d => Math.max(d.total),
stroke: "#ba4657",
})),
// Draw dots for most recent Total amount raised & Emplloyee matching values
Plot.dot(data, Plot.selectLast({
x: "date",
y: d => Math.max(d.total),
fill: "#ba4657",
r: 5,
})),
Plot.dot(data, Plot.selectLast({
x: "date",
y: d => Math.max(d.matching),
fill: "#ba4657",
r: 5,
})),
// Draw label for most recent School year
Plot.text(data, Plot.selectLast({
x: "date",
y: "total",
text: d => `2022-23\nSchool Year`,
textAnchor: "start",
dx: 10,
dy: -32,
fontSize: "20px",
fontWeight: "600",
})),
// Draw labels for most recent Total amount raised value
Plot.text(data, Plot.selectLast({
x: "date",
y: "total",
text: d => `Total Amount\nRaised`,
textAnchor: "start",
dx: 10,
dy: 15,
fontSize: "18px",
fontWeight: "400",
color: "#000",
})),
Plot.text(data, Plot.selectLast({
x: "date",
y: "total",
text: d => d3.format("($,")(d.total),
textAnchor: "start",
dx: 10,
dy: 48,
fontSize: "18px",
fill: "#ba4657",
fontWeight: "600",
})),
// Draw labels for most recent Employee matching value
Plot.text(data, Plot.selectLast({
x: "date",
y: "matching",
text: d => `Employer\nMatching`,
textAnchor: "start",
dx: 10,
dy: 0,
fontSize: "18px",
fontWeight: "400",
color: "#000",
})),
Plot.text(data, Plot.selectLast({
x: "date",
y: "matching",
text: d => d3.format("($,")(d.matching),
textAnchor: "start",
dx: 10,
dy: 32,
fontSize: "18px",
fill: "#ba4657",
fontWeight: "600",
})),
]
})
formatLabel = (d, i, _) => {
if (i === 0) {
return "";
} else if (i === _.length - 1) {
return `$${d3.format(".2s")(d)}`;
} else {
return d3.format(".2s")(d);
}
}
<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600&display=swap');
svg {
font-family: 'Lexend Deca', sans-serif;
font-weight: 400;
color: #000;
}
</style>
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.
