Public
Edited
Dec 28, 2023
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
daily_orders_product
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
daily_orders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
stores
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
daily_orders_stores = filterFields(joinArrays(daily_orders, stores, "store_id", "id"), ["order_date", "city", "store_id", "revenue", "latitude", "longitude"]);
Insert cell
total_revenue_per_city = Object.values(daily_orders_stores.reduce((accumulator, current) => {
const year = current.order_date.toLocaleString(undefined, {year: "numeric"})
const city = current.city;
const store = current.store_id;
const revenue = current.revenue;

const key = `${year}-${city}`;

if(!accumulator[key])
accumulator[key] = {date: new Date(year), city: city, store_id: store, revenue: revenue, latitude: current.latitude, longitude: current.longitude};
else accumulator[key].revenue += current.revenue;
return accumulator;
}, {}));
Insert cell
total_revenue_per_store = Object.values(daily_orders_stores.reduce((accumulator, current) => {
const year = current.order_date.toLocaleString(undefined, {year: "numeric"})
const city = current.city;
const store = current.store_id;
const revenue = current.revenue;

const key = `${year}-${city}-${store}`;

if(!accumulator[key])
accumulator[key] = {date: new Date(year), city: city, store_id: store, revenue: revenue, latitude: current.latitude, longitude: current.longitude};
else accumulator[key].revenue += current.revenue;
return accumulator;
}, {}));
Insert cell
total_revenue_per_year = total_revenue_per_city.reduce((accumulator, current) => {
const year = current.date.toLocaleString(undefined, {year: "numeric"});
const revenue = current.revenue;

if(!accumulator[year]) accumulator[year] = {year: year, revenue: revenue};
else accumulator[year].revenue += revenue;

return accumulator;
}, {});
Insert cell
total_revenue_per_city
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
revenue_by_pizza_per_week = Object.values(daily_orders_product.reduce((accumulator, current) => {
const week = d3.timeWeek(current.order_date);
const name = current.name;
const revenue = current.revenue;
const orders = current.orders;
const key = `${week}-${name}`;

if(!accumulator[key]) accumulator[key] = {date: week, name: name, revenue: revenue, orders: orders};
else {
accumulator[key].revenue += revenue;
accumulator[key].orders += orders;
}
return accumulator;
}, {})).sort((a, b) => {return a.date > b.date});
Insert cell
mean_revenue_per_week = Object.values(revenue_by_pizza_per_week.reduce((mean, current) => {
const date = current.date;

if(!mean[date]) mean[date] = {date: date, mean: current.orders, count: 1};
else {
mean[date].mean += current.orders;
mean[date].count += 1;
}
return mean;
}, {})).map((x) => ({date: x.date, mean: x.mean / x.count, revenue: x.mean}));
Insert cell
revenue_by_pizza_per_week
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
pizza_revenue_category = filterFields(daily_orders_product, ["category", "name", "order_date", "revenue"]);
Insert cell
pizza_revenue_category_year = Object.values(pizza_revenue_category.reduce((accumulator, current) => {
const year = current.order_date.toLocaleString(undefined, {year: "numeric"})
const category = current.category;
const name = current.name;

const key = `${year}-${category}-${name}`;

if(!accumulator[key]) accumulator[key] = {date: year, category: category, name: name, revenue: current.revenue};
else accumulator[key].revenue += current.revenue;
return accumulator;
}, {})).sort((a, b) => {return b.revenue - a.revenue});
Insert cell
revenue_category_year = Object.values(pizza_revenue_category_year.reduce((accumulator, current) => {
const year = current.date;
const category = current.category;

const key = `${year}-${category}`;

if(!accumulator[key]) accumulator[key] = {date: year, category: category, revenue: current.revenue};
else accumulator[key].revenue += current.revenue;
return accumulator;
}, {})).sort((a, b) => {return b.category.localeCompare(a.category)});
Insert cell
pizza_revenue_category_year
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof year = Inputs.radio(["2020", "2021", "2022"], {label: "Select year to plot:", value: "2020", labelWidth: 200, width: 100})
Insert cell
Plot.plot({
subtitle: "Total ammount of revenue per pizza, stacked by category and sorted by year. Also shows the total revenue per category per year.",
fx: {label: null},
grid: true,
width: width,
marginLeft: 55,
marginRight: 0,
color: {scheme: "Viridis"},
y: {domain: [0, 9500000]},
marks: [
Plot.barY(pizza_revenue_category_year, Plot.stackY(
{order: "y", reverse: true},
Plot.groupZ({y: "sum"}, {
filter: (d) => d.date == year, y: "revenue", z: "name", fill: "name", fx: "category", inset: 0.5,
tip: {format: {fill: true, y: d => `$${d.toLocaleString("en")}`, z: false, fx: false}}
})
)),
Plot.tip(revenue_category_year, {
filter: (d) => d.date == year, y: "revenue", fx: "category",
text: d => `$${d.revenue.toLocaleString("en")}`, dy: -7, anchor: "bottom",
title: d => `${d.category}: $${d.revenue.toLocaleString("en")}`,
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
us = FileAttachment("us-counties-10m.json").json()
Insert cell
california = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d])).get("06")
Insert cell
counties = ({
type: "FeatureCollection",
features: Object.values(topojson.feature(us, us.objects.counties).features.reduce((accumulator, current) => {
if(current.id.slice(0, 2) == "06") accumulator[current.id] = current;
return accumulator;
}, {}))
});
Insert cell
Insert cell
Insert cell
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