Public
Edited
Mar 29, 2024
pizzaorders[0]
po[0]
Plot.plot({
marks: [
Plot.barX(po, Plot.groupY({x: "sum", title: "first", filter: groups => _.sum(groups.map(d => d.orders)) > 60000}, {
x: "orders",
y: "pizza_type",
sort: {y: "x", reverse: true, limit: 100},
title: "pizza_type",
fill: "DarkSeaGreen"
})),
Plot.ruleX([0])
],
marginLeft: 200,
width
})
po
X
day_of_week
Y
sum
orders
Color
pizza_type
Size
—
Facet X
—
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.
po
X
orderDate
Y
sum
orders
Color
pizza_type
Size
—
Facet X
—
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.auto(po, {
x: "orderDate",
y: { value: "orders", reduce: "sum" },
color: "pizza_type",
mark: "dot"
}).plot({ color: { legend: true }, width, x: { interval: d3.timeWeek } })
po
X
—
state
Y
sum
orders
Color
pizza_type
Size
—
Facet X
—
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.
po
X
orderDate
Y
max
unit_price
Color
pizza_size
Size
—
Facet X
—
Facet Y
pizza_type
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.barX(po, Plot.groupY({x: "sum", title: "first"}, {
x: "total",
y: "pizza_type",
sort: {y: "x", reverse: true, limit: 100},
title: "pizza_type",
fill: "DarkSeaGreen"
})),
Plot.ruleX([0])
],
marginLeft: 200,
width
})
po
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.line(po, Plot.groupX({y: "sum", title: "first"}, {
x: d => d3["time"+time_window](d["orderDate"]),
y: "orders",
z: "pizza_type",
title: "pizza_type",
stroke: d => d.pizza_type === selected_pizza_type ? "GoldenRod" : "Silver"
})),
Plot.ruleY([0])
],
width
})
cutOffDate = new Date("2022/07/03") // First week in July 2022
po_filtered = po.filter(d => d.orderDate > cutOffDate)
Plot.plot({
marks: [
Plot.line(po_filtered, Plot.groupX({y: "sum", title: "first", filter: groups => d3.sum(groups.map(d => d.orders)) > 2500}, {
x: d => d3.timeWeek(d["orderDate"]),
y: "orders",
z: "pizza_type",
title: "pizza_type",
stroke: d => d.pizza_type === "Meat Lover's Pizza" ? "LimeGreen" : "Silver"
})),
Plot.ruleY([2500])
],
width
})
Plot.plot({
marks: [
Plot.line(po_filtered, Plot.groupX({y: "sum", title: "first", filter: orders => d3.sum(orders) < 2500}, {
x: d => d3.timeWeek(d["orderDate"]),
y: "orders",
z: "pizza_type",
title: "pizza_type",
stroke: d => d.pizza_type === "Sicilian Pizza" ? "Crimson" : "Silver",
filter: "orders"
})),
Plot.ruleY([0])
],
width
})
import {Plot} from "@mkfreeman/plot-tooltip"
import {pizzaorders} from "@observablehq/data-vis-course-assignment"
po = pizzaorders.map( order => {
let pizza_size, pizza_type;
[pizza_size, pizza_type] = getPizzaDetails(order)
return {
pizza_size,
pizza_type,
...order
}
})
getPizzaDetails = order => {
const name_substrings = order.name.split(" ")
let size = name_substrings[name_substrings.length-1]
let type = name_substrings.slice(0,-1).join(" ")
if (size === "Large" && name_substrings[name_substrings.length-2] === "Extra") {
size = "Extra Large"
type = name_substrings.slice(0,-2).join(" ")
}
return [size, type]
}
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.
