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.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.