Public
Edited
Feb 1, 2024
Insert cell
Insert cell
budget-long-table@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.barY(budgetLongTable, {x: "Year", y: "Budget", fx: "Category", stroke: "white", strokeWidth: 2, fill: "Category"}),
Plot.ruleY([300], {opacity: 0.05}),
Plot.ruleY([0], {opacity: 0.9}),
Plot.gridY(),
// Plot.text(
// budgetLongTable, {
// x: "Year", y: (d) => (d.Budget / 2), fx: "Category", text: "Budget", fill: "White"
// }
// )
],
height: 500, // Update canvas height
width: 800, // Update canvas width
marginLeft: 100,
marginRight: 20,
marginTop: 50,
marginBottom: 50,
color: {
legend: false,
range: colours
},
title: "City of Toronto Budget Allocated to Parks & Recreation"
})
Insert cell
Plot.plot({
marks: [
Plot.barY(budgetLongTable, {x: "Year", y: "Budget", stroke: "white", strokeWidth: 2, fill: "Category"}),
Plot.ruleY([600], {opacity: 0.05}),
Plot.ruleY([0], {opacity: 0.9}),
Plot.gridY()
],
height: 500, // Update canvas height
width: 800, // Update canvas width
marginLeft: 100,
marginRight: 20,
marginTop: 50,
marginBottom: 50,
color: {
legend: true,
range: colours
},
title: "City of Toronto Budget Allocated to Parks & Recreation"
})
Insert cell
colours = ["#00A189", "#0D534D", "#8DBF2E"]
Insert cell
Insert cell
AggregateOutdoor.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
height: 400,
width: 800,
marginLeft: 100,
marginRight: 50,
marks: [
Plot.barY(outdoor, { x: "month", y: "stops", tip: true, fill: "#007FA3" }),
Plot.ruleY([0]),
Plot.gridY(),
Plot.axisX({x: "month", fill: "black", dx: 14})
]
})
Insert cell
AggregateIndoor.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
height: 400,
width: 800,
marginLeft: 100,
marginRight: 50,
marks: [
Plot.barY(aggregateindoor, { x: "month", y: "n_stops", tip: true, fill: "#6D247A" }),
Plot.ruleY([0]),
Plot.gridY(),
Plot.axisX({x: "month", fill: "black", dx: 14})
]
})
Insert cell

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.
Learn more