daily_orders_product
Type Table, then Shift-Enter. Ctrl-space for more options.
daily_orders
Type Table, then Shift-Enter. Ctrl-space for more options.
stores
Type Table, then Shift-Enter. Ctrl-space for more options.
dailyOrdersExt = daily_orders_product.map((d) => ({
...d,
kind: d.name.split("Pizza")[0].trim(),
size: d.name.split("Pizza")[1].trim(),
dayKind:
d.day_of_week == "Saturday" || d.day_of_week == "Sunday"
? "Weekend"
: "Business Day", // We use the 'Pizza' string as the delimiter between 'kind of pizza' and size of the pizza'.
priceRange: getPriceRange(d.price)
}));
function getPriceRange(price) {
var ranges = [
{ value: 13, range: "11-13" },
{ value: 16, range: "14-16" },
{ value: 20, range: "17-20" },
{ value: 23, range: "21-23" },
{ value: Infinity, range: "24-27" },
],
range;
ranges.some(function (a) {
if (price <= a.value) {
range = a.range;
return true;
}
});
return range;
}
monthlyMeanRevenuesPerCategory = d3
.flatRollup(
dailyOrdersExt,
(v) => d3.mean(v, (d) => d.revenue),
(d) => d.order_date.getUTCFullYear(),
(d) => d.order_date.getUTCMonth(),
(d) => d.category
)
.map(([year, month, category, meanRevenue]) => ({
date: new Date(year, month + 1),
category,
meanRevenue,
}));
monthlyMeanRevenues = d3
.flatRollup(
dailyOrdersExt,
(v) => d3.mean(v, (d) => d.revenue),
(d) => d.order_date.getUTCFullYear(),
(d) => d.order_date.getUTCMonth(),
)
.map(([year, month, meanRevenue]) => ({
date: new Date(year, month + 1),
meanRevenue,
}));
dateFormat = [{
year: "numeric",
month: "short",
}];
monthlyRangeOrders = d3
.flatRollup(
dailyOrdersExt,
(v) => d3.sum(v, (d) => d.orders),
(d) => d.order_date.getUTCFullYear(),
(d) => d.order_date.getUTCMonth(),
(d) => d.priceRange
)
.map(([year, month, priceRange, orders]) => ({
date: new Date(year, month),
priceRange,
orders,
}));
likert = Likert([
["11-13", -1],
["14-16", -1],
["17-20", 0],
["21-23", 1],
["24-27", 1]
])
dailyRevenue = d3
.flatRollup(
dailyOrdersExt,
(v) => d3.sum(v, (d) => d.revenue),
(d) => d.order_date,
)
.map(([date, revenue]) => ({
order_date: new Date(date),
revenue,
}));
m = d3
.flatRollup(
dailyOrdersExt,
(v) => d3.sum(v, (d) => d.orders),
(d) => d.kind,
)
.map(([kind, revenue]) => ({
kind,
revenue,
}));
Plot.plot({
title: "Daily revenue evolution",
marginLeft: 100,
width: 700,
x: {
//padding: 0.2,
tickFormat: Plot.formatWeekday("en"),
tickSize: 0,
domain: [1,2,3,4,5,6,0],
axis: "top"
},
y: {
padding: 0.2,
axis: null,
},
color: {
scheme: "GnBu",
legend: true,
label: "Daily Revenue",
stroke: null
},
fx: {
axis: "top",
//padding: 0.4
},
fy:{
tickFormat: Plot.formatMonth("en"),
padding: 0.2,
},
facet: {
data: dailyRevenue,
x: d => d.order_date.getUTCFullYear(),
y: d => d.order_date.getUTCMonth(),
},
marks: [
Plot.cell(dailyRevenue, {
y: d => d3.timeMonday.count( d3.utcMonth(d.order_date), d.order_date),
x: d => d.order_date.getUTCDay(),
fill: "revenue",
channels: {
Date: {
value: "order_date",
label: "Date"
}
},
tip: {
format: {
Date: true,
r: false,
x: false,
y: false,
fx: false,
fy: false,
}
}
}),
]
})
import {Select} from "@observablehq/inputs"
import {Likert} from "@observablehq/plot-diverging-stacked-bar"
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.
