Plot.plot({
width: width,
height: 420,
marginRight: 120,
marks: [
Plot.lineY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
interval: d3.utcWeek,
tip: true
})),
]
})
Plot.plot({
width: width,
height: 420,
marginRight: 120,
marks: [
Plot.lineY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
interval: d3.utcWeek,
tip: true,
stroke: d => (d.name === "Veggie Pizza Small") ? "blue" : "lightgray",
})),
Plot.tip(["Veggie Pizza Small" ], {
x: new Date("2022-10-19T12:00Z"),
y: 1,
dy: -320,
fill:"lightblue",
content: () => "Veggie Pizza Small"
})
]
})
Plot.plot({
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
color: {
range:["black"]
},
marks: [
Plot.tickX(
pizza,
Plot.binX(
{
fill: "sum",
},
{
x: "order_date",
interval: d3.utcWeek
}
)
),
Plot.frame({ stroke: "#aaa", strokeWidth: 0.5 })
]
})
Plot.plot({
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
color: {
scheme: "Blues",
legend: true
},
marks: [
Plot.tickX(
pizza,
Plot.binX(
{
fill: "sum",
},
{
x: "order_date",
interval: d3.utcWeek,
stroke: "orders"
}
)
),
Plot.frame({ stroke: "#aaa", strokeWidth: 0.5 })
]
})
Plot.plot({
width: 720,
height: 420,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
marginRight: 90,
label: ""
},
marks: [
Plot.areaY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
interval: d3.utcWeek,
tip: true
})),
Plot.ruleY([0])
],
y: {
tickFormat: d => ""
}
})
Plot.plot({
width: 720,
height: 420,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
marginRight: 90,
label: ""
},
color: {
data: pizza,
type: "ordinal",
scheme: "PuBuGn",
legend: true
},
marks: [
Plot.areaY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
interval: d3.utcWeek,
strokes: "orders",
tip: true,
fill: "category"
})),
Plot.ruleY([0])
],
y: {
tickFormat: d => ""
}
})
pizza
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
