Plot.plot({
color: {scheme: "Category10", legend: true},
width: width,
height: 420,
marginRight: 120,
grid: true,
marks: [
Plot.lineY(selected_types, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "revenue",
z: "name",
interval: d3.utcWeek,
tip: true,
stroke: group, // Use stroke property to set colors based on size of the pizza
})),
],
});
Plot.plot({
width: 928,
height: 500,
x: {label: null},
y: {tickFormat: "s", tickSpacing: 50},
color: {scheme: "Category10", legend: true, width: 340, label: "Age (years)"},
marks: [
Plot.barY(resultbysize, {
x: "day_of_week",
y: "totalRevenue",
fill: group_2_plot,
sort: { x: "-y"}
})
]
})
data = daily_orders_product
// Assuming data is your array of objects
newData = data.map(item => {
// Extracting size from the name
const sizeMatch = item.name.match(/(Small|Medium|Large|Extra Large)$/);
const size = sizeMatch ? sizeMatch[1] : null;
// Extracting type from the name
const typeMatch = item.name.match(/(.+?) Pizza/);
const type = typeMatch ? typeMatch[1] : null;
// Adding size and type to the object
return {
...item,
size,
type
};
});
// Assuming data is your array of objects
newDataWithDate = newData.map(item => {
// Convert order_date to Date type
const orderDate = new Date(item.order_date);
// Adding "date" property to the object
return {
...item,
date: orderDate
};
});
selected_types = newDataWithDate.filter(d => type.includes(d.type))
function groupAndAggregate(data, variable) {
return data.reduce((result, item) => {
const key = item.day_of_week + "_" + item[variable];
if (!result[key]) {
result[key] = { day_of_week: item.day_of_week, [variable]: item[variable], totalRevenue: 0 };
}
result[key].totalRevenue += item.revenue;
return result;
}, {});
}
data_func = groupAndAggregate(newDataWithDate, group_2_plot)
resultbysize = Object.values(data_func)
resultbysize.sort((a, b) => {
// First, sort by day_of_week in alphabetical order
const dayComparison = a.day_of_week.localeCompare(b.day_of_week);
if (dayComparison !== 0) {
return dayComparison;
}
// If day_of_week is the same, sort by totalRevenue in descending order
return b.totalRevenue - a.totalRevenue;
});
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.
