The avatar for @dis-2024-spring
DIS-2024-SPRING
Public
Edited
May 9, 2024
1
Insert cell
Insert cell
import {pizzaorders} from "@observablehq/data-vis-course-assignment"
Insert cell
pizzaOrders-2-3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
pizzaOrders-2-3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 160,
title: "Pizza Type Price List",
x: { label: "Price" },
y: { label: "Pizza Type" },
marks: [
Plot.barX(
pizzaorders,
Plot.groupY({ x: "mean" }, { x: "unit_price", y: "name", tip: true, sort: {y: "-x"} })
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 160,
marks: [
Plot.barX(
pizzaorders23,
Plot.groupY({ x: "sum" }, { x: "orders", y: "Pizza Flavor", tip: true,sort: {y: "-x"} })
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 161,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.dot(pizzaorders23, {
fx: "orderMonth",
x: "orders",
y: "name",
tip: true,
sort: {y: "-x"}
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 161,
color: { legend: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.dot(pizzaorders23, {
fx: "orderMonth",
x: "orders",
y: "name",
stroke: "Pizza Size",
tip: true
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { label: "Total Order" },
y: { label: "Pizza Type" },
color: { legend: true },
marginLeft: 160,
marks: [
Plot.barX(
pizzaorders23,
Plot.groupY(
{ x: "sum" },
{ x: "orders", y: "name", fill: "Pizza Size", tip: true, sort: {y: "-x"} }
)
),
Plot.ruleX([0])
]
})
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { label: "Total Order" },
y: { label: "Pizza Type" },
marginLeft: 160,
color: { legend: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.barX(
pizzaorders23,
Plot.groupY(
{ fill: "sum", x: "sum" },
{ fx: "Day of the Week", x: "orders", y: "name", fill: "orders", tip: true,sort: {y: "-x"} }
)
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
pizzaorders
X
sum
orders
Y
name
Color
unit_price
Size
—
Facet X
state
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 160,
color: { legend: true },
marks: [
Plot.dot(pizzaorders23, {
x: "orderMonth",
y: "orders",
fill: (d)=>(d.Category === pickCategory ? "red" : pickColor),
tip: true
})
]
})
Insert cell
pizzaorders23
X
orders
Y
name
Color
Pizza Size
Size
—
Facet X
orderMonth
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
pizzaOrders-2-3.csv
X
sum
orders
Y
Pizza Flavor
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
import {Pack} from "@d3/pack"
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