// Specify the dimensions of the chart.

const width = 928;

const height = 600;

const format = d3.format(",.0f");

// Create a SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

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

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

// Constructs and configures a Sankey generator.

const sankey = d3.sankey()

.nodeId(d => d.name)

.nodeAlign(d3[nodeAlign]) // d3.sankeyLeft, etc.

.nodeWidth(15)

.nodePadding(10)

.extent([[1, 5], [width - 1, height - 5]]);

// Applies it to the data. We make a copy of the nodes and links objects

// so as to avoid mutating the original.

const {nodes, links} = sankey({

nodes: data.nodes.map(d => Object.assign({}, d)),

links: data.links.map(d => Object.assign({}, d))

});

// Defines a color scale.

const color = d3.scaleOrdinal(d3.schemeCategory10);

// Creates the rects that represent the nodes.

const rect = svg.append("g")

.attr("stroke", "#000")

.selectAll()

.data(nodes)

.join("rect")

.attr("x", d => d.x0)

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

.attr("height", d => d.y1 - d.y0)

.attr("width", d => d.x1 - d.x0)

.attr("fill", d => color(d.category));

// Adds a title on the nodes.

rect.append("title")

.text(d => `${d.name}\n${format(d.value)} TWh`);

// Creates the paths that represent the links.

const link = svg.append("g")

.attr("fill", "none")

.attr("stroke-opacity", 0.5)

.selectAll()

.data(links)

.join("g")

.style("mix-blend-mode", "multiply");

// Creates a gradient, if necessary, for the source-target color option.

if (linkColor === "source-target") {

const gradient = link.append("linearGradient")

.attr("id", d => (d.uid = DOM.uid("link")).id)

.attr("gradientUnits", "userSpaceOnUse")

.attr("x1", d => d.source.x1)

.attr("x2", d => d.target.x0);

gradient.append("stop")

.attr("offset", "0%")

.attr("stop-color", d => color(d.source.category));

gradient.append("stop")

.attr("offset", "100%")

.attr("stop-color", d => color(d.target.category));

}

link.append("path")

.attr("d", d3.sankeyLinkHorizontal())

.attr("stroke", linkColor === "source-target" ? (d) => d.uid

: linkColor === "source" ? (d) => color(d.source.category)

: linkColor === "target" ? (d) => color(d.target.category)

: linkColor)

.attr("stroke-width", d => Math.max(1, d.width));

link.append("title")

.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} TWh`);

// Adds labels on the nodes.

svg.append("g")

.selectAll()

.data(nodes)

.join("text")

.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)

.attr("y", d => (d.y1 + d.y0) / 2)

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

.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")

.text(d => d.name);

return svg.node();

}

const links = await FileAttachment("energy.csv").csv({typed: true});

const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, "")}));

return {nodes, links};

d3 = require("d3@7", "d3-sankey@0.12")

// --------------------------------------------------

// TEMPORARY HARDCODED DATA (for testing)

// --------------------------------------------------

const tempData = [

{ clase: "A", qualificaci_energia: "X", counts: 10 },

{ clase: "A", qualificaci_energia: "Y", counts: 5 },

{ clase: "B", qualificaci_energia: "X", counts: 7 },

{ clase: "B", qualificaci_energia: "Z", counts: 3 },

];

// Use tempData for now, switch back to data2 later

const parsedData = tempData; // data2;

// ------------------------------------------------------------

// 1. ROBUST GROUPING

// ------------------------------------------------------------

const linksClaseCalif = d3.rollups(

parsedData,

v => d3.sum(v, d => d.counts),

d => d.clase,

d => d.qualificaci_energia

);

console.log("linksClaseCalif (after rollups):", linksClaseCalif);

// ------------------------------------------------------------

// 2. NODE CREATION WITH UNIQUE NAME HANDLING

// ------------------------------------------------------------

const nodes = [];

const nameToIndex = new Map();

function getUniqueNodeName(baseName) {

let name = baseName;

let counter = 0;

while (nameToIndex.has(name)) {

counter++;

name = `${baseName}_${counter}`;

}

return name;

}

// Create a map to store the original name to unique name mapping

const originalToUniqueName = new Map();

for (const [clase, calificacionesMap] of linksClaseCalif) {

const uniqueClaseName = getUniqueNodeName(clase);

// Store the mapping

originalToUniqueName.set(clase, uniqueClaseName);

nameToIndex.set(uniqueClaseName, nodes.length);

nodes.push({ name: uniqueClaseName, category: "clase" });

for (const [calif, total] of calificacionesMap) {

const uniqueCalifName = getUniqueNodeName(calif);

//Store the mapping

originalToUniqueName.set(calif, uniqueCalifName);

nameToIndex.set(uniqueCalifName, nodes.length);

nodes.push({ name: uniqueCalifName, category: "qualificaci_energia" });

}

}

console.log("nodes (before Sankey):", nodes);

console.log("nameToIndex (before Sankey):", nameToIndex);

console.log("originalToUniqueName (before Sankey):", originalToUniqueName);

// ------------------------------------------------------------

// 3. LINK CREATION

// ------------------------------------------------------------

const sankeyLinks = [];

for (const [clase, calificacionesMap] of linksClaseCalif) {

// Use the mapping to get the unique name

const claseIndex = nameToIndex.get(originalToUniqueName.get(clase));

for (const [calif, total] of calificacionesMap) {

// Use the mapping to get the unique name

const califIndex = nameToIndex.get(originalToUniqueName.get(calif));

sankeyLinks.push({

source: claseIndex,

target: califIndex,

value: total

});

}

}

console.log("sankeyLinks (before Sankey):", sankeyLinks);

// ------------------------------------------------------------

// 3.5 VALUE CHECK AND FILTER

// ------------------------------------------------------------

let filteredSankeyLinks = sankeyLinks; //Initialize

const zeroValueLinks = sankeyLinks.filter(link => link.value <= 0);

if(zeroValueLinks.length > 0){

console.warn("Warning: Links with value <= 0 found:", zeroValueLinks);

filteredSankeyLinks = sankeyLinks.filter(link => link.value > 0); //Only reasign if necessary

console.log("sankeyLinks (After filter, before Sankey):", filteredSankeyLinks);

}

// ------------------------------------------------------------

// 4. SANKEY SETUP AND EXECUTION

// ------------------------------------------------------------

const width = 928;

const height = 600;

const format = d3.format(",.0f");

const nodeAlign = "sankeyLeft";

const linkColor = "source-target";

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

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

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

const sankey = d3.sankey()

.nodeId(d => d.name)

.nodeAlign(d3[nodeAlign])

.nodeWidth(15)

.nodePadding(10)

.extent([[1, 5], [width - 1, height - 5]])

//DEBUG

.nodeSort((a, b) => {

console.log("Comparing nodes:", a.name, b.name);

return a.name.localeCompare(b.name); // Example sort

})

.linkSort((a, b) => {

console.log("Comparing links (source, target, value):", a.source.name, a.target.name, a.value, "vs", b.source.name, b.target.name, b.value);

return a.value - b.value; // Sort by link value

});

const sankeyData = {

nodes: nodes.map(d => ({ ...d })),

links: filteredSankeyLinks.map(d => ({ ...d })) // Use filtered links

};

const { nodes: sankeyNodes, links: sankeyLinksOut } = sankey(sankeyData);

console.log("sankeyNodes (after Sankey):", sankeyNodes);

console.log("sankeyLinksOut (after Sankey):", sankeyLinksOut);

// Check for Invalid Indices AFTER Sankey

for (const link of sankeyLinksOut) {

if (link.source < 0 || link.source >= sankeyNodes.length ||

link.target < 0 || link.target >= sankeyNodes.length ||

typeof link.source !== 'number' || typeof link.target !== 'number') {

console.error("INVALID LINK INDEX FOUND:", link, "Nodes:", sankeyNodes); // CRITICAL ERROR

}

}

// ------------------------------------------------------------

// 5. DRAWING (no changes here)

// ------------------------------------------------------------

const color = d3.scaleOrdinal(d3.schemeCategory10);

const rect = svg.append("g")

.attr("stroke", "#000")

.selectAll("rect")

.data(sankeyNodes)

.join("rect")

.attr("x", d => d.x0)

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

.attr("height", d => d.y1 - d.y0)

.attr("width", d => d.x1 - d.x0)

.attr("fill", d => color(d.category))

.append("title")

.text(d => `${d.name}\n${format(d.value)} total`);

const link = svg.append("g")

.attr("fill", "none")

.attr("stroke-opacity", 0.5)

.selectAll("g")

.data(sankeyLinksOut)

.join("g")

.style("mix-blend-mode", "multiply");

if (linkColor === "source-target") {

link.append("linearGradient")

.attr("id", d => (d.uid = DOM.uid("link")).id)

.attr("gradientUnits", "userSpaceOnUse")

.attr("x1", d => d.source.x1)

.attr("x2", d => d.target.x0)

.selectAll("stop")

.data(d => [

{ offset: "0%", color: color(d.source.category) },

{ offset: "100%", color: color(d.target.category) }

])

.join("stop")

.attr("offset", d => d.offset)

.attr("stop-color", d => d.color);

}

link.append("path")

.attr("d", d3.sankeyLinkHorizontal())

.attr("stroke", d => linkColor === "source-target" ? d.uid.id : linkColor === 'source'? color(d.source.category) : linkColor === "target" ? color(d.target.category) : linkColor)

.attr("stroke-width", d => Math.max(1, d.width))

.append("title")

.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} total`);

svg.append("g")

.selectAll("text")

.data(sankeyNodes)

.join("text")

.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)

.attr("y", d => (d.y1 + d.y0) / 2)

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

.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")

.text(d => d.name);

//FINAL CHECK

if (svg.node() === null || svg.node() === undefined) {

console.error("SVG node is null or undefined!");

}

return svg.node();

}

// ---------------------------------------------------------------------------

// 1) Ten en cuenta que 'data2' ya es un array de objetos con las siguientes

// propiedades en cada fila:

// - data2[i].clase

// - data2[i].rehabilitacio_energetica

// - data2[i].qualificaci_energia

// - data2[i].counts

// ---------------------------------------------------------------------------

// Simplemente, renombramos 'data2' a 'parsedData' para mayor claridad.

const parsedData = data2;

// 2) Extraemos valores únicos de cada "columna" para crear nuestros nodos.

const clases = Array.from(new Set(parsedData.map(d => d.clase)));

const rehabilitaciones = Array.from(new Set(parsedData.map(d => d.rehabilitacio_energetica)));

const calificaciones = Array.from(new Set(parsedData.map(d => d.qualificaci_energia)));

// 3) Creamos el array de nodos. Cada valor único se convierte en un nodo.

// La propiedad "category" nos ayuda a asignar un color distinto por columna.

const nodes = [];

// Nodos para "clase"

for (const c of clases) {

nodes.push({ name: c, category: "clase" });

}

// Nodos para "rehabilitacio_energetica"

for (const r of rehabilitaciones) {

nodes.push({ name: r, category: "rehabilitacio_energetica" });

}

// Nodos para "qualificaci_energia"

for (const q of calificaciones) {

nodes.push({ name: q, category: "qualificaci_energia" });

}

// Creamos un map para ubicar la posición (índice) de cada nombre en 'nodes'.

const nameToIndex = new Map(nodes.map((d, i) => [d.name, i]));

// 4) Construimos los enlaces en dos pasos:

// (A) clase -> rehabilitacio_energetica

// (B) rehabilitacio_energetica -> qualificaci_energia

// agrupando y sumando 'counts' para cada par de valores.

// (A) Suma por [clase, rehabilitacio_energetica]

const linksClaseRehab = d3.rollups(

parsedData,

v => d3.sum(v, d => d.counts),

d => d.clase,

d => d.rehabilitacio_energetica

);

// (B) Suma por [rehabilitacio_energetica, qualificaci_energia]

const linksRehabCalif = d3.rollups(

parsedData,

v => d3.sum(v, d => d.counts),

d => d.rehabilitacio_energetica,

d => d.qualificaci_energia

);

// Convertimos las agrupaciones en un array de enlaces para Sankey.

const sankeyLinks = [];

// (A) De 'clase' a 'rehabilitacio_energetica'

for (const [clase, arrRehab] of linksClaseRehab) {

for (const [rehab, total] of arrRehab) {

sankeyLinks.push({

source: nameToIndex.get(clase),

target: nameToIndex.get(rehab),

value: total

});

}

}

// (B) De 'rehabilitacio_energetica' a 'qualificaci_energia'

for (const [rehab, arrCalif] of linksRehabCalif) {

for (const [calif, total] of arrCalif) {

sankeyLinks.push({

source: nameToIndex.get(rehab),

target: nameToIndex.get(calif),

value: total

});

}

}

// 5) Parámetros básicos del gráfico Sankey.

const width = 928;

const height = 600;

const format = d3.format(",.0f");

// Alineación de nodos (d3.sankeyLeft, sankeyRight, etc.) y color de links.

const nodeAlign = "sankeyLeft";

const linkColor = "source-target";

// Creamos el contenedor SVG principal.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

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

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

// Configuramos el layout Sankey.

const sankey = d3.sankey()

.nodeId(d => d.name)

.nodeAlign(d3[nodeAlign])

.nodeWidth(15)

.nodePadding(10)

.extent([[1, 5], [width - 1, height - 5]]);

// Aplicamos el sankey a nuestros nodos y links.

const {nodes: sankeyNodes, links: sankeyLinksOut} = sankey({

nodes: nodes.map(d => Object.assign({}, d)),

links: sankeyLinks.map(d => Object.assign({}, d))

});

// Definimos una escala de colores para asignar según la "category" de cada nodo.

const color = d3.scaleOrdinal(d3.schemeCategory10);

// ---------------------------------------------------------------------------

// 6) DIBUJAMOS LOS NODOS (rectángulos).

// ---------------------------------------------------------------------------

const rect = svg.append("g")

.attr("stroke", "#000")

.selectAll("rect")

.data(sankeyNodes)

.join("rect")

.attr("x", d => d.x0)

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

.attr("height", d => d.y1 - d.y0)

.attr("width", d => d.x1 - d.x0)

.attr("fill", d => color(d.category));

// Tooltip (title) para cada nodo.

rect.append("title")

.text(d => `${d.name}\n${format(d.value)} (counts totales)`);

// ---------------------------------------------------------------------------

// 7) DIBUJAMOS LOS LINKS (paths).

// ---------------------------------------------------------------------------

const link = svg.append("g")

.attr("fill", "none")

.attr("stroke-opacity", 0.5)

.selectAll("g")

.data(sankeyLinksOut)

.join("g")

.style("mix-blend-mode", "multiply");

// Si "linkColor" es "source-target", generamos un degradado desde

// el color del nodo de origen al color del nodo de destino.

if (linkColor === "source-target") {

link.append("linearGradient")

.attr("id", d => (d.uid = DOM.uid("link")).id)

.attr("gradientUnits", "userSpaceOnUse")

.attr("x1", d => d.source.x1)

.attr("x2", d => d.target.x0)

.selectAll("stop")

.data(d => [

{offset: "0%", color: color(d.source.category)},

{offset: "100%", color: color(d.target.category)}

])

.join("stop")

.attr("offset", d => d.offset)

.attr("stop-color", d => d.color);

}

// Path del link.

link.append("path")

.attr("d", d3.sankeyLinkHorizontal())

.attr("stroke", linkColor === "source-target"

? (d) => d.uid

: linkColor === "source"

? (d) => color(d.source.category)

: linkColor === "target"

? (d) => color(d.target.category)

: linkColor)

.attr("stroke-width", d => Math.max(1, d.width));

// Tooltip de cada link.

link.append("title")

.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} (counts)`);

// ---------------------------------------------------------------------------

// 8) AÑADIMOS TEXTO DE ETIQUETA A LOS NODOS.

// ---------------------------------------------------------------------------

svg.append("g")

.selectAll("text")

.data(sankeyNodes)

.join("text")

.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)

.attr("y", d => (d.y1 + d.y0) / 2)

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

.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")

.text(d => d.name);

// 9) Retornamos el SVG para que Observable lo muestre.

return svg.node();

}