ordersPerPizza = d3
.flatRollup(
pizza,
(v) => d3.sum(v, (d) => d.orders),
(d) => d.name
)
.map(([name, count]) => ({
name,
count
}));
maxOrderedPizzaName = ordersPerPizza[d3.maxIndex(ordersPerPizza, (d) => d.count)].name
multiline = Plot.plot({
width: width,
height: 420,
marginRight: 120,
color: {
type: "sequential",
scheme: "purples",
},
marks: [
Plot.lineY(pizza.filter( d => d.name !== maxOrderedPizzaName), Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
opacity: 0.7,
stroke: "orders",
interval: d3.utcWeek
}))
,
Plot.lineY(pizza.filter( d => d.name === maxOrderedPizzaName), Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
stroke: "red",
interval: d3.utcWeek,
tip: true
})),
Plot.tip(
[`${maxOrderedPizzaName}`],
{x: new Date("2022-09-01"), y: 10, dy: -320, anchor: "bottom-right", strokeWidth: 1, fontWeight: "bold"}
),
]
})
Plot.plot({
title: "Pizza orders over time",
subtitle: "From less ordered (top) to most ordered (bottom)",
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
color: {
scheme: "Magma",
legend: true
},
marks: [
Plot.tickX(
pizza,
Plot.binX(
{
fill: "sum",
},
{
x: "order_date",
stroke: "orders",
interval: d3.utcWeek,
sort: {fy: "stroke", reduce: "sum"},
}
)
),
Plot.frame({ stroke: "#aaa", strokeWidth: 0.5 })
]
})
Plot.plot({
title: "Pizza orders over time",
subtitle: "From less ordered (top) to most ordered (bottom)",
width: 720,
height: 420,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
marginRight: 90,
label: "",
},
color: {
legend: true,
scheme: "Category10"
},
marks: [
Plot.areaY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
fill: "category",
interval: d3.utcWeek,
tip: true,
sort: {fy: "y", reduce: "sum"}
})),
Plot.ruleY([0])
],
y: {
tickFormat: d => "",
tickSize: 0
}
})
pizza
Type Table, then Shift-Enter. Ctrl-space for more options.
import {Select} from "@observablehq/inputs"
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.
