The avatar for @udg-master-data-science
UdG | Master's in Data Science
Public
Edited
Jan 10, 2024
Fork of Exercise 2: Data questions, visual answers
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
daily_orders_product
SELECT YEAR(order_date) as Order_Year, MONTH(order_date) as Order_Month, sum(orders) as Total_Orders FROM daily_orders_product GROUP BY Order_Month, Order_Year ORDER BY Order_Month, Order_Year
Insert cell
Insert cell
Data_Group = d3.group(daily_orders, d => d3.timeYear(d.order_date).getFullYear(), d => d.store_id);
Insert cell
Data_Group1 = d3.group(daily_orders, d => d.store_id);
Insert cell
Insert cell
Stores_Orders = Array.from(Data_Group, ([year, storeData]) => {
return Array.from(storeData, ([store_id, orders]) => {
const storeInfo = stores.find(store => store.id === store_id);
return {
Year: year,
Store_Id: store_id,
Total_Orders: d3.sum(orders, d => d.orders),
Latitude: storeInfo ? storeInfo.latitude : null,
Longitude: storeInfo ? storeInfo.longitude : null,
City: storeInfo ? storeInfo.city : null
};
});
}).flat();
Insert cell
Stores_Orders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Stores_Orders1 = Array.from(Data_Group1, ([store_id, orders]) => {
const storeInfo = stores.find(store => store.id === store_id);
return {
Store_Id: store_id,
Total_Orders: d3.sum(orders, d => d.orders),
Latitude: storeInfo ? storeInfo.latitude : null,
Longitude: storeInfo ? storeInfo.longitude : null,
City: storeInfo ? storeInfo.city : null
};
}).sort((a, b) => b.Total_Orders - a.Total_Orders);
Insert cell
Stores_Orders1
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Top5_MAX_StoresOrders = Stores_Orders1.slice(0, 5).sort((a, b) => b.Total_Orders - a.Total_Orders);
Insert cell
Top5_MAX_StoresOrders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Top5_min_StoresOrders = Stores_Orders1.slice(-5).sort((a, b) => a.Total_Orders - b.Total_Orders);
Insert cell
Top5_min_StoresOrders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {scheme: "Dark2", legend: true},
width,
title: "#Total Number of Monthly Orders for Recent Years",
x: { label: "Month", grid: true },
y: { label: "# Total Orders", grid: true },
marks: [
Plot.lineY(Orders_Month, {
x: "Order_Month",
y: "Total_Orders",
stroke: "Order_Year",
tip: true
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
width,
title: "Total Orders of All Stores Divided in Recent Years",
x: { label: "Id Stores",grid: true },
y: { label: "Total Stores",grid: true },
color: {scheme: "Category10", legend: true},
marks: [
Plot.barY(Stores_Orders, {
x: "Store_Id",
y: "Total_Orders",
fill: "Year",
tip: true
}),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
color: { legend: true },
width,
title: "Top 5 Stores with the Highest Total Orders in Recent Years",
x: { label: "Id Stores",grid: true },
y: { label: "Total Stores",grid: true },
marks: [
Plot.barY(Top5_MAX_StoresOrders, {
x: "Store_Id",
y: "Total_Orders",
fill: "City",
tip: true
}),
Plot.ruleY([0])
]
});
Insert cell
Plot.plot({
color: { legend: true },
width,
title: "Top 5 Stores with the Lowest Total Orders in Recent Years",
x: { label: "Id Stores",grid: true },
y: { label: "Total Stores",grid: true },
marks: [
Plot.barY(Top5_min_StoresOrders, {
x: "Store_Id",
y: "Total_Orders",
fill: "City",
tip: true
}),
Plot.ruleY([0])
]
});
Insert cell
Insert cell
Insert cell
Plot.plot({
width,
title: "Most Popular Pizza by Day of the Week (Taking into account the day with the most orders)",
subtitle: "Weekday (Monday-1, Tuesday-2, Wednesday-3, Thursday-4, Friday-5, Saturday-6, Sunday-7)",
color: { legend: true },
x: { label: "Weekdays", grid: true, axis: "top" },
y: { label: "Total Orders", grid: true },
fx: { label: "Years"},
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.cell(Popular_Pizza, {
fx: "Order_Year",
x: "Order_Day",
y: "Total_Orders",
fill: "Name",
tip: true
})
]
})
Insert cell
Plot.plot({
width,
title: "Most Popular Pizza by Day of the Week (Taking into account all days of the year)",
subtitle: "Weekday (Monday-1, Tuesday-2, Wednesday-3, Thursday-4, Friday-5, Saturday-6, Sunday-7)",
color: { legend: true },
x: { label: "Weekdays", grid: true, axis: "top" },
y: { label: "Total Orders", grid: true },
fx: { label: "Years"},
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.cell(Popular_Pizza_Sum, {
fx: "Order_Year",
x: "Order_Day",
y: "Total_Orders",
fill: "Name",
tip: true
})
]
})
Insert cell
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