totalSales = {
const allTimeSales = pizza.reduce((acc, { name, orders }) => {
if (!acc[name]) {
acc[name] = 0;
}
acc[name] += orders;
return acc;
}, {});
const allTimeSalesArray = Object.entries(allTimeSales).map(([name, totalOrders]) => ({
name,
totalOrders
}));
const sortedAllTimeSalesArray = allTimeSalesArray.sort((a,b) => (b.totalOrders - a.totalOrders))
return sortedAllTimeSalesArray;
}
multiline = Plot.plot({
subtitle: "Top-" + n_sellers + " All-Time Best-Sellers",
width: width,
height: 420,
marginRight: 120,
color: {type: "categorical",
scheme: "Reds",
domain: totalSales.slice(0, n_sellers).map(d => d.name),
legend: "swatches",
reverse: true
},
marks: [
Plot.lineY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
interval: d3.utcWeek,
opacity: n_sellers === 0 ? 1.0 : 0.2,
stroke: n_sellers === 0 ? "Black" : "Gray"
})),
Plot.lineY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
interval: d3.utcWeek,
tip: true,
stroke: "name"
})),
]
})
Plot.plot({
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
color: {
type: "sequential",
scheme: "YlOrRd",
width: 340,
label: "Orders",
legend: "ramp"
},
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: ""
},
color: {
type: "categorical",
scheme: "Observable10",
width: 340,
label: "Category",
legend: "swatches"
},
marks: [
Plot.areaY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
interval: d3.utcWeek,
tip: true,
fill: "category"
})),
Plot.ruleY([0])
],
y: {
tickFormat: d => ""
}
})
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.
