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") ? "red" : "lightblue",
})),
Plot.tip(
["Veggie Pizza Small"],
{
x: new Date("2021-04-16"),
y: 1,
dy: -290,
fill: "pink",
}
),
]
});
Plot.plot({
marks: [
["bottom-left"].map((anchor) => [Plot.tip([anchor], {frameAnchor: anchor, anchor})])
]
})
Plot.plot({
width: 720,
height: 300,
marginLeft: 90,
color:{scheme: "PuOr",legend: true},
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
marks: [
Plot.tickX(
pizza,
Plot.binX(
{
fill: "sum",
},
{
x: "order_date",
interval: d3.utcWeek,
stroke:"orders"
}
)
),
Plot.frame({ stroke: "#808080", strokeWidth: 1
})
]
})
Plot.plot({
color: {legend:true},
width: 720,
height: 420,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
marginRight: 90,
label: ""
},
marks: [
Plot.areaY(pizza, {
x: "order_date",
y: "orders",
fill: "category",
interval: d3.utcWeek,
tip: true
}),
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.
