Public
Edited
Jan 6
Plot.plot({
width: width,
height: 420,
marginRight: 120,
marks: [
Plot.lineY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
z: "name",
interval: d3.utcWeek,
tip: true
})),
]
})
pizza
Type Table, then Shift-Enter. Ctrl-space for more options.
// Per cada pizza mirem quins guanys ha tingut
groupedRevenue = d3.rollups(
pizza,
v => d3.sum(v, d => d.orders), // Sumar el revenue para cada grupo
d => d.name // Agrupar por name
);
// Trobar el millor i pitjor producte en guanys
bestSelling = groupedRevenue.reduce((max, p) => (p[1] > max[1] ? p : max), groupedRevenue[0])[0]
Plot.plot({
title: "Pizza with the Best Seller 2020–2022", // Títol del gràfic
width: width,
height: 500, // Aumentem l'altura per deixar espai a la llegenda
marginRight: 120,
color: {
legend: true, // Si a tindre llegenda de colors
label: "Performance", // Etiqueta de la llegenda
domain: ["Best Seller", "Others"], // Categoríes de colors
range: ["blue", "yellow"], // Blau per el millor venedor , groc per la resta, aquests colors considero que descatem molt
},
marks: [
Plot.lineY(
//filtrem tots els resultats menys la linea que volem destacar
pizza.filter(d => d.name !== bestSelling),
Plot.binX(
{ y: "sum" },
{
x: "order_date",
y: "orders",
z: "name",
// Aqui asignem el domini de Others , d'aquesta manera tindra el seu corresponen color
stroke: () => "Others",
strokeWidth: 1,
interval: d3.utcWeek,
tip: true,
}
)
),
//Ara dibuixem la Linea de best Seller (semblant a Ds container of container)
Plot.lineY(
// Agafem unicament la linea que volem destacar
pizza.filter(d => d.name === bestSelling),
Plot.binX(
{ y: "sum" },
{
x: "order_date",
y: "orders",
z: "name",
// Lo mateix que en el primer LineY pero per Best Seller
stroke: () => "Best Seller",
strokeWidth: 5,
interval: d3.utcWeek,
tip: true,
}
)
)
]
});
Plot.plot({
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
},
color: {
range:["blue"]
},
marks: [
Plot.tickX(
pizza,
Plot.binX(
{
fill: "sum",
},
{
x: "order_date",
interval: d3.utcWeek
}
)
),
Plot.frame({ stroke: "#aaa", strokeWidth: 0.5 })
]
})
Plot.plot({
title: "Sale trends 2020–2022", // Títol del gràfic
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name",
x: "size"
},
color: {
type: "linear", // canvi a lineal per veure diferents vendes
scheme: "viridis", // Un tema que destaqui les diferencies entre moltes i poques
legend: true
},
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: ""
},
marks: [
Plot.areaY(pizza, Plot.binX({y: 'sum'}, {
x: "order_date",
y: "orders",
interval: d3.utcWeek,
tip: true
})),
Plot.ruleY([0])
],
y: {
tickFormat: d => ""
}
})
Plot.plot({
title: "Sale Trends", // Títol del gràfic
width: 720,
height: 300,
marginLeft: 90,
facet: {
data: pizza,
y: "pizza_name", // Facetando por el nombre de la pizza
x: "size",
marginRight: 90,
label: ""
},
color: {
legend: true,
type: "categorical",
domain: ["Classic", "Specialty","Vegetarian"],
range: ["blue", "violet","green"],
},
y: {
label: "Category",
},
x: {
label: "Order Date" // Añadimos una etiqueta al eje X
},
marks: [
Plot.areaY(pizza, Plot.binX({y: "sum"}, {
x: "order_date",
y: "orders",
fill: "category", // Utiliza la columna de categoría para asignar colores
interval: d3.utcWeek,
tip: true
})),
Plot.ruleY([0])
]
});
Plot.plot({
title: "Sale Trends for Category and Day of Week", // Títol del gràfic
width: 720,
height: 300,
facet: {
data: pizza,
y: "pizza_name",
x: "size",
marginRight: 90,
label: ""
},
color: {
domain: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
scheme: "tableau10",
legend: true
},
marks: [
Plot.areaY(
pizza,
Plot.stackY(
Plot.binX(
{ y: "sum" },
{
x: "order_date",
y: "orders",
interval: d3.utcWeek,
z: "day_of_week", // Apilem per dia de la setmana
fill: "day_of_week"
}
)
)
),
Plot.ruleY([0])
],
y: {
tickFormat: () => ""
}
});
pizza
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
