The avatar for @dv-develop-2025-spring-observable-tutor
DV DEVELOP 2025 SPRING Observable Tutorials
Public
Edited
Apr 24
Insert cell
Insert cell
Insert cell
pizzaorders_new
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
viewof variables = Inputs.radio(["orderDate_Num", "day_of_week", "state"], {label: "Select one", value: "state"})

// "orderMonth", "flavor", "size", "orders", and "total" did not seem logical to add, as it either was "irrelevant" or obvious
Insert cell
Insert cell
Insert cell
// bar chart of orders per flavor depending on the month - code from @d3/bar-chart/2
Plot.plot({
title: "Units Ordered by Month",
x: { label: "Pizza Flavor" },
y: { label: "Orders", grid: true },
marginLeft: 60,
marks: [
Plot.barY(
pizzaorder_filtered_month,
Plot.groupX(
{ y: "sum" }, // reducer by group
{ y: "total", x: "flavor", fill: "flavor", sort: { x: "y", reverse: true } },
)
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hawaiianPizzaMed = pizzaorders_new.filter(d => d.flavor === "Hawaiian" && d.size === "Medium")
Insert cell
hawaiianPizzaMed
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
pizzaorder_filtered_month = pizzaorders_new.filter(d => d.orderMonth + 1 === month_slider)
Insert cell
pizzaorder_filtered_day = pizzaorders_new.filter(d => d.day_of_week + 1 === day_slider)
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