Exercise 2: Data questions, visual answers / Universitat de Girona

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

//Your data operations here

//Llegim les dades que hem agrupat pel grafic

data_plot1 = d3.csvParse(

await FileAttachment("buble.csv").text(),

d => {

return {

// Diem quines son les taules numeriques

preu: +d.preu,

ingressos: +d.ingressos,

quantitat: +d.quantitat,

pizza: d.pizza

};

}

);

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

data_plot2 = d3.csvParse(

await FileAttachment("divergence.csv").text(),

d => {

return {

Absolute: +d.Absolute, // Ho passem a nombre

Relative: parseFloat(d.Relative), // Ho pasem a Float

Store: d.Store

};

}

);

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

data_plot3 = d3.csvParse(

await FileAttachment("stackedArea@2.csv").text(),

d => {

return {

// Convierte Absolute y Relative a flotantes y valida

Sales: +d.Sales,

Month: d.Month,

Category: d.Category

};

}

);

//Your first plot here

viewof bubbleChart = {

// Escalar la mida de les bombolles

const quantitat_scaled = data_plot1.map(d => d.quantitat * 0.02);

// Rang X

const xMin = d3.min(data_plot1, d => d.preu) - 2;

const xMax = d3.max(data_plot1, d => d.preu) + 2;

return Plot.plot({

width: 800,

height: 500,

marginLeft: 70,

marginRight: 10,

marginTop: 50,

marginBottom: 50,

x: {

label: "Average Price (USD)",

grid: true,

tickFormat: d3.format(".2i"),

domain: [xMin, xMax],

},

y: {

label: "Total Revenue (USD)",

grid: true,

tickFormat: d3.format(".0s"),

domain: [0, 6000000],

ticks: [0, 1000000, 2000000, 3000000, 4000000, 5000000, 6000000],

},

color: {

type: "linear",

scheme: "viridis",

domain: [d3.min(data_plot1, d => d.quantitat), d3.max(data_plot1, d => d.quantitat)],

label: "Quantity of Pizzas Sold",

legend: true,

},

r: {

type: "sqrt",

domain: [0, Math.max(...quantitat_scaled) + 5],

range: [1, 50],

},

title: "Total Revenue vs Price by Pizza Type",

marks: [

Plot.dot(data_plot1, {

x: "preu",

y: "ingressos",

r: d => d.quantitat * 0.02,

fill: d => d.quantitat,

stroke: "white",

strokeWidth: 1.5,

fillOpacity: 0.9,

title: d => `

Pizza Type: ${d.pizza}

Price: ${d.preu.toFixed(2)}

Total Revenue: ${d3.format(",")(d.ingressos)} USD

Quantity Sold: ${d3.format(",")(d.quantitat)}

`

})

]

});

}

viewof slopeChart3 = {

const width = 800;

const height = 500;

const margin = { top: 50, right: 80, bottom: 50, left: 70 };

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

// css del tooltip (Pestanya amb l'informació quan passes el ratoli per sobre )

const tooltip = d3.select("body")

.append("div")

.attr("class", "tooltip")

.style("position", "absolute")

.style("background", "rgba(0, 0, 0, 0.7)")

.style("color", "#fff")

.style("padding", "8px")

.style("border-radius", "4px")

.style("pointer-events", "none")

.style("opacity", 0);

// Rang X posem una mica de marge als dos costats

const xMin = d3.min(data_plot1, d => d.preu - 2);

const xMax = d3.max(data_plot1, d => d.preu + 2);

// Lli passem aquest rang a d3

const xScale = d3.scaleLinear()

.domain([xMin, xMax])

.range([margin.left, width - margin.right]);

// Rang y esquerra

const yQMin = d3.min(data_plot1, d => d.quantitat);

const yQMax = d3.max(data_plot1, d => d.quantitat);

const yScaleQ = d3.scaleLinear()

.domain([yQMin, yQMax])

.range([height - margin.bottom, margin.top])

.nice(); // Ajusta automaticament els rangs, queda be en y , no tant en x

// Rang y dreta

const yIMin = d3.min(data_plot1, d => d.ingressos);

const yIMax = d3.max(data_plot1, d => d.ingressos);

const yScaleI = d3.scaleLinear()

.domain([yIMin, yIMax])

.range([height - margin.bottom, margin.top])

.nice();

// 7. Títol

svg.append("text")//d3 funciona com a un conjunt de contenidors, aqui afegim conteidor titol

.attr("x", width / 2)

.attr("y", 20)

.attr("text-anchor", "middle")

.attr("font-size", 20)

.attr("font-weight", "bold")

.text("Store Revenue Trends (2020–2022)");

// Afegim la llegenda

const legend = svg.append("g")

.attr("class", "legend")

.attr("transform", `translate(${width - margin.right - 100},${margin.top})`);

// css llegenda Sold

legend.append("rect")

.attr("x", 0)

.attr("y", 0)

.attr("width", 12)

.attr("height", 12)

.attr("fill", "steelblue");

// text llegenda Sold

legend.append("text")

.attr("x", 18)

.attr("y", 10)

.attr("font-size", 15)

.attr("font-weight", "bold")

.text("Sold");

legend.append("rect")

.attr("x", 0)

.attr("y", 20)

.attr("width", 12)

.attr("height", 12)

.attr("fill", "orange");

legend.append("text")

.attr("x", 18)

.attr("y", 30)

.attr("font-size", 15)

.attr("font-weight", "bold")

.text("Revenue");

svg.append("g") //Aqui afegim contenidor eix X

.attr("transform", `translate(0,${height - margin.bottom})`)// el posem a abaix

.call(d3.axisBottom(xScale))// cridem a l'eix

.append("text")

.attr("x", (width - margin.left - margin.right) / 2 + margin.left)

.attr("y", 40)

.attr("fill", "currentColor")

.attr("text-anchor", "middle")

.attr("font-size", 15)

.attr("font-weight", "bold")

.text("Price (USD)");

svg.append("g")// Mateix per l'eix y esquerra

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(yScaleQ))

.append("text")

.attr("x", -margin.left + 10)

.attr("y", margin.top - 20)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("font-size", 15)

.attr("font-weight", "bold")

.text("Pizza Sold");

svg.append("g")// Eix y dret

.attr("transform", `translate(${width - (margin.right)},0)`)

.call(d3.axisRight(yScaleI))

.append("text")

.attr("x", 40)

.attr("y", margin.top - 20)

.attr("fill", "currentColor")

.attr("text-anchor", "end")

.attr("font-size", 15)

.attr("font-weight", "bold")

.text("Revenue (USD)");

// Configuracio Tooltip

const addTooltipEvents = selection => selection

.on("mouseover", (event, d) => {

tooltip.transition().duration(200).style("opacity", 0.9);

tooltip.html(`<strong>${d.pizza}</strong><br/>Sold: ${d.quantitat}<br/>Revenue: $${d.ingressos}`)

.style("left", (event.pageX + 10) + "px")

.style("top", (event.pageY - 28) + "px");

})

.on("mousemove", event => {

tooltip.style("left", (event.pageX + 10) + "px")

.style("top", (event.pageY - 28) + "px");

})

.on("mouseout", () => {

tooltip.transition().duration(500).style("opacity", 0);

});

svg.selectAll("line.slope-line") //Aqui en el contenidor principal dibuixem les lineas

.data(data_plot1)

.join("line")

.attr("class", "slope-line")

.attr("x1", d => xScale(d.preu))//La llibreria svg per escriure una linea necesita dos coordenades, per lo tant necesites x1-y1 , x2-y2 , encara que en aquest cas x1 i x2 sigui igual

.attr("y1", d => yScaleQ(d.quantitat))

.attr("x2", d => xScale(d.preu))

.attr("y2", d => yScaleI(d.ingressos))

.attr("stroke", "gray")

.attr("stroke-width", 2)

.attr("opacity", 0.7)

.call(addTooltipEvents);

svg.selectAll("circle.quantity-point")//Dibuixem punts vendes

.data(data_plot1)

.join("circle")

.attr("class", "quantity-point")

.attr("cx", d => xScale(d.preu))

.attr("cy", d => yScaleQ(d.quantitat))

.attr("r", 5)

.attr("fill", "steelblue")

.call(addTooltipEvents);

svg.selectAll("circle.ingressos-point")//Dibuixem punts ingressos

.data(data_plot1)

.join("circle")

.attr("class", "ingressos-point")

.attr("cx", d => xScale(d.preu))

.attr("cy", d => yScaleI(d.ingressos))

.attr("r", 5)

.attr("fill", "orange")

.call(addTooltipEvents);

return svg.node();

}

//Your second plot here

// Pots posar el grafic per ensenyar les dades Absolute o Percentual

metric = "Absolute"

chart = {

// Definició local de width

const width = 800;

// 1. Ordenar les dades i crear la propietat 'value' segons la mètrica

const data = d3.sort(data_plot2, d => metric === "Absolute"

? +d.Absolute

: +d.Relative

).map(d => ({

...d,

value: metric === "Absolute"

? +d.Absolute

: +d.Relative

}));

// 2. Dimensions del gràfic

const barHeight = 25;

const marginTop = 50;

const marginRight = 60;

const marginBottom = 10;

const marginLeft = 60;

const height = Math.ceil((data.length + 0.1) * barHeight) + marginTop + marginBottom;

// 3. Escala X

const x = d3.scaleLinear()

.domain(d3.extent(data, d => d.value))

.rangeRound([marginLeft, width - marginRight]);

// 4. Escala Y

const y = d3.scaleBand()

.domain(data.map(d => d.Store))

.rangeRound([marginTop, height - marginBottom])

.padding(0.1);

// 5. Format

const format = d3.format(metric === "Absolute" ? "+,d" : "+.1%");

const tickFormat = metric === "Absolute"

? d3.formatPrefix("+.1", 1e6)

: d3.format("+.0%");

// 6. Crear SVG

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

// 7. Títol

svg.append("text")

.attr("x", width / 2)

.attr("y", 20)

.attr("text-anchor", "middle")

.attr("font-size", 14)

.attr("font-weight", "bold")

.text("Store Revenue Trends (2020–2022)");

// 8. Barres

svg.append("g")

.selectAll("rect")

.data(data)

.join("rect")

.attr("fill", d => d3.schemeRdBu[3][d.value > 0 ? 2 : 0])

.attr("x", d => x(Math.min(d.value, 0)))

.attr("y", d => y(d.Store))

.attr("width", d => Math.abs(x(d.value) - x(0)))

.attr("height", y.bandwidth());

// 9. Etiquetes de valor

svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.selectAll("text")

.data(data)

.join("text")

.attr("text-anchor", d => d.value < 0 ? "end" : "start")

.attr("x", d => x(d.value) + Math.sign(d.value) * 4)

.attr("y", d => y(d.Store) + y.bandwidth() / 2)

.attr("dy", "0.35em")

.text(d => format(d.value));

// 10. Eix superior (x)

svg.append("g")

.attr("transform", `translate(0,${marginTop})`)

.call(d3.axisTop(x).ticks(width / 80).tickFormat(tickFormat))

.call(g => g.selectAll(".tick line").clone()

.attr("y2", height - marginTop - marginBottom)

.attr("stroke-opacity", 0.1))

.call(g => g.select(".domain").remove());

// 11. Eix esquerre (y)

svg.append("g")

.attr("transform", `translate(${x(0)},0)`)

.call(d3.axisLeft(y).tickSize(0).tickPadding(6))

.call(g => g.selectAll(".tick text").filter((d, i) => data[i].value < 0)

.attr("text-anchor", "start")

.attr("x", 6));

return svg.node();

}

Plot.plot({

title: "Monthly Pizza Sales by Category in 2022", // Títol del gràfic

x: {

label: "Month", // Etiqueta de l'eix X

domain: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // Ordre dels mesos

},

y: {

label: "Sales", // Etiqueta de l'eix Y

tickFormat: "s", // Format per a una millor llegibilitat

},

color: {

legend: true, // Afegeix una llegenda de colors

label: "Category", // Etiqueta de la llegenda

},

marks: [

Plot.barY(data_plot3, {

x: "Month", // Meses en el eje X

y: "Sales", // Ventas en el eje Y

fill: "Category", // Colores según las categorías

}),

],

});

Plot.plot({

title: "Monthly Pizza Sales by Category in 2022",

x: {

label: "Month",

// Ordenamos los meses

domain: [

"Jan", "Feb", "Mar", "Apr", "May", "Jun",

"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"

]

},

y: {

label: "Orders",

tickFormat: "s", // Formato para miles (por ejemplo: 1k, 2k, etc.)

grid: true // Líneas guía en el eje Y

},

color: {

label: "Category",

legend: true

},

marks: [

Plot.barY(

// 1) Filtramos los datos a mostrar

daily_orders_pro.filter(d => {

// Comprobamos que el año sea 2022

const date = new Date(d.order_date);

return d.order_date && d.orders && d.category && date.getFullYear() === 2022;

}),

// 2) Agrupamos los datos por mes y sumamos las órdenes

Plot.groupX(

{ y: "sum" }, // Agrupar y sumar las órdenes (campo `orders`)

{

x: d => {

// Extraer el mes como abreviatura en inglés

const date = new Date(d.order_date);

return date.toLocaleString("en-US", { month: "short" });

},

y: d => +d.orders, // Convertimos `orders` a número

z: "category", // Para apilar cada categoría por separado

fill: "category" // Asignamos color según la categoría

}

)

]

});

One platform to build and deploy the best data apps