{ ////////////////////////////////////////////////////////////// // 0. Utilidades ////////////////////////////////////////////////////////////// const fmtS = d3.format("~s"); const fmtPct = d3.format(".1f"); const fmtM = (v) => `${d3.format(",.2f")(v / 1e6)} M€`; ////////////////////////////////////////////////////////////// // 1. Configuración de fuentes y tabla anual consolidada ////////////////////////////////////////////////////////////// const fuentes = [ { key: "Inun", label: "Inundaciones", data: inun_todos, color: ["#60A5FA", "#1A3A6B"] }, { key: "TCA", label: "TCA", data: tcas_todos, color: ["#5EEAD4", "#0F766E"] }, { key: "Erupción", label: "Erupción (La Palma)", data: erupcion_bienes, color: ["#FEF08A", "#CA8A04"] }, { key: "Terremoto", label: "Terremotos", data: terremoto_bienes, color: ["#FDBA74", "#C2410C"] }, { key: "Humanas", label: "Humanas", data: terr_bienes, color: ["#D1D5DB", "#4B5563"] } ]; const keys = fuentes.map(f => f.key); const meta = new Map(fuentes.map(f => [f.key, f])); const years = d3.range(1990, 2026); const annualData = years.map(year => { const row = { year }; fuentes.forEach(f => { row[f.key] = d3.sum(f.data.filter(d => +d["AÑO"] === year), d => d["Indemnizaciones"] || 0); }); row.total = keys.reduce((acc, k) => acc + row[k], 0); return row; }); ////////////////////////////////////////////////////////////// // 2. Estado interactivo ////////////////////////////////////////////////////////////// let mode = "stacked"; // stacked | grouped | normalized let hidden = new Set(); // causas ocultas let range = [years[0], years[years.length - 1]]; // rango de años activo ////////////////////////////////////////////////////////////// // 3. Layout general ////////////////////////////////////////////////////////////// const totalW = 1180; const leftW = 800; const rightW = totalW - leftW - 28; const root = d3.create("div") .style("position", "relative") .style("width", `${totalW}px`) .style("font-family", "'Inter', system-ui, sans-serif") .style("color", "#E5E7EB") .style("background", "radial-gradient(circle at 15% 0%, #111827 0%, #030712 70%)") .style("border-radius", "18px") .style("padding", "22px 26px") .style("box-shadow", "0 20px 50px -20px rgba(0,0,0,.6)"); root.append("h2") .style("margin", "0 0 2px 0") .style("font-size", "18px") .style("font-weight", "600") .text("Indemnizaciones por causa — análisis multidimensional (1990–2025)"); root.append("div") .style("margin", "0 0 16px 0") .style("font-size", "12.5px") .style("color", "#9CA3AF") .text("Filtra el periodo arrastrando el minigráfico inferior, cambia de vista y aísla causas desde la leyenda o el ranking."); const bodyRow = root.append("div") .style("display", "flex") .style("gap", "24px") .style("align-items", "flex-start"); const left = bodyRow.append("div").style("width", `${leftW}px`); const right = bodyRow.append("div").style("width", `${rightW}px`); ////////////////////////////////////////////////////////////// // 4. Controles de modo + reset ////////////////////////////////////////////////////////////// const modes = [ { id: "stacked", label: "Apilado" }, { id: "grouped", label: "Agrupado" }, { id: "normalized", label: "% Normalizado" } ]; const controls = left.append("div") .style("display", "flex") .style("gap", "8px") .style("margin-bottom", "10px"); const modeButtons = controls.selectAll("button.mode") .data(modes) .join("button") .attr("class", "mode") .text(d => d.label) .style("cursor", "pointer") .style("border", "1px solid #374151") .style("background", d => d.id === mode ? "#2563EB" : "transparent") .style("color", d => d.id === mode ? "#fff" : "#D1D5DB") .style("padding", "6px 14px") .style("border-radius", "999px") .style("font-size", "12px") .style("font-weight", "500") .style("transition", "all .2s ease") .on("click", (event, d) => { mode = d.id; modeButtons .style("background", m => m.id === mode ? "#2563EB" : "transparent") .style("color", m => m.id === mode ? "#fff" : "#D1D5DB"); render(); }); const resetBtn = controls.append("button") .text("Restablecer filtros") .style("cursor", "pointer") .style("border", "1px solid #374151") .style("background", "transparent") .style("color", "#9CA3AF") .style("padding", "6px 14px") .style("border-radius", "999px") .style("font-size", "12px") .style("margin-left", "auto") .on("click", () => { hidden = new Set(); range = [years[0], years[years.length - 1]]; gBrush.call(brush.move, [xContext(range[0]), xContext(range[1]) + xContext.bandwidth()]); render(); }); ////////////////////////////////////////////////////////////// // 5. SVG principal + defs ////////////////////////////////////////////////////////////// const marginTop = 30, marginRight = 20, marginBottom = 90, marginLeft = 64; const contextHeight = 44, contextGap = 26; const chartTotalHeight = 430; const height = chartTotalHeight - contextHeight - contextGap; const plotW = leftW - marginLeft - marginRight; const plotH = height - marginTop - marginBottom; const svg = left.append("svg") .attr("viewBox", `0 0 ${leftW} ${chartTotalHeight}`) .attr("width", leftW) .attr("height", chartTotalHeight) .style("display", "block") .style("overflow", "visible"); const defs = svg.append("defs"); keys.forEach(k => { const c = meta.get(k).color; const grad = defs.append("linearGradient") .attr("id", `bar-grad-${k}`) .attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1"); grad.append("stop").attr("offset", "0%").attr("stop-color", c[0]); grad.append("stop").attr("offset", "100%").attr("stop-color", c[1]); }); const glow = defs.append("filter").attr("id", "bar-glow2") .attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%"); glow.append("feGaussianBlur").attr("stdDeviation", "4").attr("result", "blur"); const gm = glow.append("feMerge"); gm.append("feMergeNode").attr("in", "blur"); gm.append("feMergeNode").attr("in", "SourceGraphic"); const gMain = svg.append("g").attr("transform", `translate(${marginLeft},${marginTop})`); const gBars = gMain.append("g"); const gLine = gMain.append("g"); const gTotals = gMain.append("g"); const gAxisX = gMain.append("g").attr("transform", `translate(0,${plotH})`); const gAxisY = gMain.append("g"); const x = d3.scaleBand().paddingInner(0.3).paddingOuter(0.15); const xSub = d3.scaleBand().padding(0.12); const y = d3.scaleLinear(); ////////////////////////////////////////////////////////////// // 6. Tooltip ////////////////////////////////////////////////////////////// const tooltip = root.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("background", "rgba(17,24,39,.95)") .style("border", "1px solid #374151") .style("border-radius", "10px") .style("padding", "8px 12px") .style("font-size", "12px") .style("box-shadow", "0 10px 25px rgba(0,0,0,.5)") .style("transition", "opacity .15s ease") .style("z-index", 10); function showTooltip(event, row, key) { const [mx, my] = d3.pointer(event, root.node()); const visKeys = keys.filter(k => !hidden.has(k)); const total = visKeys.reduce((s, k) => s + row[k], 0); tooltip .style("opacity", 1) .style("left", `${mx + 16}px`) .style("top", `${my - 10}px`) .html(`

${row.year}

${visKeys.map(k => `

${meta.get(k).label}: ${fmtM(row[k])}

`).join("")}

Total: ${fmtM(total)}

`); } function moveTooltip(event) { const [mx, my] = d3.pointer(event, root.node()); tooltip.style("left", `${mx + 16}px`).style("top", `${my - 10}px`); } function hideTooltip() { tooltip.style("opacity", 0); } ////////////////////////////////////////////////////////////// // 7. Leyenda interactiva ////////////////////////////////////////////////////////////// const legend = left.append("div") .style("display", "flex") .style("gap", "16px") .style("flex-wrap", "wrap") .style("margin-top", "8px"); function toggleHidden(k) { if (hidden.has(k)) hidden.delete(k); else hidden.add(k); render(); } ////////////////////////////////////////////////////////////// // 8. Minigráfico de contexto (brush de años) ////////////////////////////////////////////////////////////// const gContext = svg.append("g") .attr("transform", `translate(${marginLeft},${height + contextGap})`); const xContext = d3.scaleBand().domain(years).range([0, plotW]).padding(0.1); const yContext = d3.scaleLinear() .domain([0, d3.max(annualData, d => d.total)]) .range([contextHeight, 0]); const ctxStack = d3.stack().keys(keys)(annualData); gContext.selectAll("g.ctx-layer") .data(ctxStack) .join("g") .attr("fill", d => `url(#bar-grad-${d.key})`) .attr("opacity", 0.55) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => xContext(d.data.year)) .attr("y", d => yContext(d[1])) .attr("height", d => yContext(d[0]) - yContext(d[1])) .attr("width", xContext.bandwidth()); gContext.append("g") .attr("transform", `translate(0,${contextHeight})`) .call(d3.axisBottom(xContext).tickValues(years.filter(yr => yr % 5 === 0)).tickSize(0)) .call(g => g.select(".domain").attr("stroke", "#374151")) .selectAll("text").attr("fill", "#6B7280").style("font-size", "10px"); const brush = d3.brushX() .extent([[0, 0], [plotW, contextHeight]]) .on("brush end", brushed); const gBrush = gContext.append("g").call(brush); function brushed(event) { if (!event.selection) return; const [x0, x1] = event.selection; const sel = years.filter(yr => { const bx = xContext(yr) + xContext.bandwidth() / 2; return bx >= x0 && bx <= x1; }); if (sel.length < 2) return; range = [d3.min(sel), d3.max(sel)]; render(); } ////////////////////////////////////////////////////////////// // 9. Panel derecho: KPIs + ranking ////////////////////////////////////////////////////////////// right.append("div") .style("font-size", "12px").style("color", "#9CA3AF").style("margin-bottom", "8px") .text("Resumen del periodo seleccionado"); const kpiGrid = right.append("div") .style("display", "grid") .style("grid-template-columns", "1fr 1fr") .style("gap", "10px") .style("margin-bottom", "18px"); function kpiCard(titleText) { const card = kpiGrid.append("div") .style("background", "rgba(255,255,255,.04)") .style("border", "1px solid #1F2937") .style("border-radius", "12px") .style("padding", "10px 12px"); card.append("div") .style("font-size", "10.5px").style("color", "#9CA3AF").style("margin-bottom", "4px") .text(titleText); return card.append("div") .style("font-size", "16px").style("font-weight", "700").style("color", "#F9FAFB"); } const kpiTotal = kpiCard("Total acumulado"); const kpiTop = kpiCard("Causa principal"); const kpiPeak = kpiCard("Año pico"); const kpiAvg = kpiCard("Media anual"); right.append("div") .style("font-size", "12px").style("color", "#9CA3AF").style("margin", "4px 0 8px") .text("Ranking por causa (periodo activo)"); const rankingBox = right.append("div"); ////////////////////////////////////////////////////////////// // 10. Render principal ////////////////////////////////////////////////////////////// function styleAxisY(g) { g.select(".domain").remove(); g.selectAll(".tick line").attr("stroke", "#1F2937").attr("stroke-dasharray", "2,3"); g.selectAll(".tick text").attr("fill", "#9CA3AF").style("font-size", "11px"); } function render() { const visKeys = keys.filter(k => !hidden.has(k)); const [r0, r1] = range; const view = annualData.filter(d => d.year >= r0 && d.year <= r1).map(d => { const row = { year: d.year }; keys.forEach(k => row[k] = visKeys.includes(k) ? d[k] : 0); row.totalVisible = visKeys.reduce((s, k) => s + row[k], 0); return row; }); //// Leyenda //// const legendItems = legend.selectAll("div.item") .data(fuentes, f => f.key) .join("div") .attr("class", "item") .style("display", "flex").style("align-items", "center").style("gap", "6px") .style("cursor", "pointer").style("font-size", "12.5px").style("user-select", "none") .style("opacity", f => hidden.has(f.key) ? 0.35 : 1) .on("click", (event, f) => toggleHidden(f.key)); legendItems.html(""); legendItems.append("span") .style("width", "10px").style("height", "10px").style("border-radius", "3px") .style("display", "inline-block") .style("background", f => `linear-gradient(180deg, ${f.color[0]}, ${f.color[1]})`); legendItems.append("span").text(f => f.label); //// Escalas //// x.domain(view.map(d => d.year)).range([0, plotW]); xSub.domain(visKeys).range([0, x.bandwidth()]); let series, yMax; if (mode === "normalized") { const norm = view.map(d => { const t = d.totalVisible || 1; const row = { year: d.year }; visKeys.forEach(k => row[k] = d[k] / t); keys.forEach(k => { if (!(k in row)) row[k] = 0; }); return row; }); series = d3.stack().keys(visKeys)(norm); y.domain([0, 1]).range([plotH, 0]); gAxisY.transition().duration(600).call(d3.axisLeft(y).ticks(5, "%").tickSize(-plotW)).call(styleAxisY); } else if (mode === "grouped") { yMax = d3.max(view, d => d3.max(visKeys, k => d[k])) || 1; y.domain([0, yMax * 1.15]).range([plotH, 0]); gAxisY.transition().duration(600).call(d3.axisLeft(y).ticks(6, "~s").tickSize(-plotW)).call(styleAxisY); } else { series = d3.stack().keys(visKeys)(view); yMax = d3.max(view, d => d.totalVisible) || 1; y.domain([0, yMax * 1.15]).range([plotH, 0]); gAxisY.transition().duration(600).call(d3.axisLeft(y).ticks(6, "~s").tickSize(-plotW)).call(styleAxisY); } gAxisX.transition().duration(600) .call(d3.axisBottom(x).tickValues(view.map(d => d.year).filter(yy => yy % 2 === 0)).tickSize(0)) .call(g => g.select(".domain").attr("stroke", "#374151")) .selectAll("text").attr("fill", "#9CA3AF").style("font-size", "10.5px") .attr("transform", "rotate(-45)").style("text-anchor", "end"); //// Barras //// if (mode === "grouped") { const flat = visKeys.flatMap(k => view.map(d => ({ year: d.year, key: k, value: d[k], raw: d }))); gBars.selectAll("rect") .data(flat, d => `${d.year}-${d.key}`) .join( enter => enter.append("rect") .attr("x", d => x(d.year) + xSub(d.key)) .attr("y", plotH).attr("height", 0).attr("width", xSub.bandwidth()) .attr("rx", 3).attr("fill", d => `url(#bar-grad-${d.key})`) .call(e => e.transition().duration(700).ease(d3.easeCubicOut) .attr("y", d => y(d.value)).attr("height", d => plotH - y(d.value))), update => update.call(u => u.transition().duration(700).ease(d3.easeCubicInOut) .attr("x", d => x(d.year) + xSub(d.key)).attr("width", xSub.bandwidth()) .attr("y", d => y(d.value)).attr("height", d => plotH - y(d.value))), exit => exit.transition().duration(400).attr("height", 0).attr("y", plotH).remove() ) .on("mousemove", function (event, d) { d3.select(this).attr("filter", "url(#bar-glow2)"); showTooltip(event, d.raw, d.key); }) .on("mouseleave", function () { d3.select(this).attr("filter", null); hideTooltip(); }); gLine.selectAll("*").remove(); gTotals.selectAll("*").remove(); } else { const flat = series.flatMap(s => s.map(d => ({ key: s.key, year: d.data.year, y0: d[0], y1: d[1], raw: d.data }))); gBars.selectAll("rect") .data(flat, d => `${d.year}-${d.key}`) .join( enter => enter.append("rect") .attr("x", d => x(d.year)).attr("y", plotH).attr("height", 0).attr("width", x.bandwidth()) .attr("rx", 3).attr("fill", d => `url(#bar-grad-${d.key})`) .call(e => e.transition().duration(700).ease(d3.easeCubicOut) .attr("y", d => y(d.y1)).attr("height", d => Math.max(0, y(d.y0) - y(d.y1)))), update => update.call(u => u.transition().duration(700).ease(d3.easeCubicInOut) .attr("x", d => x(d.year)).attr("width", x.bandwidth()) .attr("y", d => y(d.y1)).attr("height", d => Math.max(0, y(d.y0) - y(d.y1)))), exit => exit.transition().duration(400).attr("height", 0).attr("y", plotH).remove() ) .on("mousemove", function (event, d) { d3.select(this).attr("filter", "url(#bar-glow2)"); showTooltip(event, d.raw, d.key); }) .on("mouseleave", function () { d3.select(this).attr("filter", null); hideTooltip(); }); // Línea de tendencia del total visible const lineGen = d3.line() .x(d => x(d.year) + x.bandwidth() / 2) .y(d => y(d.totalVisible)) .curve(d3.curveMonotoneX); gLine.selectAll("path.trend") .data([view]) .join( enter => enter.append("path").attr("class", "trend") .attr("fill", "none").attr("stroke", "#F9FAFB").attr("stroke-width", 1.5) .attr("stroke-dasharray", "4,3").attr("opacity", 0.85) .attr("d", lineGen), update => update.transition().duration(700).attr("d", lineGen) ); // Etiquetas de total gTotals.selectAll("text") .data(view.filter(d => d.totalVisible > 0), d => d.year) .join( enter => enter.append("text") .attr("x", d => x(d.year) + x.bandwidth() / 2) .attr("y", d => y(d.totalVisible) - 8) .attr("text-anchor", "middle") .style("font-size", "9px").style("fill", "#9CA3AF").style("opacity", 0) .text(d => fmtS(d.totalVisible)) .call(e => e.transition().duration(700).style("opacity", 1)), update => update.call(u => u.transition().duration(700) .attr("x", d => x(d.year) + x.bandwidth() / 2) .attr("y", d => y(d.totalVisible) - 8) .text(d => fmtS(d.totalVisible))), exit => exit.transition().duration(300).style("opacity", 0).remove() ); } root.on("pointermove.tooltip", (event) => { if (tooltip.style("opacity") !== "0") moveTooltip(event); }); //////////////////////// KPIs //////////////////////// const totalAcum = d3.sum(view, d => d.totalVisible); const sumsByKey = visKeys.map(k => ({ key: k, value: d3.sum(view, d => d[k]) })) .sort((a, b) => d3.descending(a.value, b.value)); const top = sumsByKey[0]; const peakRow = view.reduce((best, d) => (!best || d.totalVisible > best.totalVisible) ? d : best, null); const avgAnual = view.length ? totalAcum / view.length : 0; kpiTotal.text(fmtM(totalAcum)); kpiTop.text(top ? meta.get(top.key).label : "—"); kpiPeak.text(peakRow ? `${peakRow.year}` : "—"); kpiAvg.text(fmtM(avgAnual)); //////////////////////// Ranking //////////////////////// const maxVal = d3.max(sumsByKey, d => d.value) || 1; const rankItems = rankingBox.selectAll("div.rank").data(sumsByKey, d => d.key); const rankEnter = rankItems.enter().append("div").attr("class", "rank") .style("margin-bottom", "8px") .style("cursor", "pointer") .on("click", (event, d) => toggleHidden(d.key)); rankEnter.append("div") .attr("class", "rank-label") .style("display", "flex").style("justify-content", "space-between") .style("font-size", "11.5px").style("color", "#D1D5DB").style("margin-bottom", "3px"); rankEnter.append("div") .style("background", "#1F2937").style("border-radius", "6px").style("height", "8px").style("overflow", "hidden") .append("div").attr("class", "rank-bar") .style("height", "100%").style("border-radius", "6px").style("width", "0%"); const rankMerge = rankEnter.merge(rankItems); rankMerge.select(".rank-label").html(d => { const pct = totalAcum ? (d.value / totalAcum * 100) : 0; return `${meta.get(d.key).label}${fmtM(d.value)} · ${fmtPct(pct)}%`; }); rankMerge.select(".rank-bar") .style("background", d => `linear-gradient(90deg, ${meta.get(d.key).color[0]}, ${meta.get(d.key).color[1]})`) .transition().duration(700) .style("width", d => `${(d.value / maxVal * 100)}%`); rankItems.exit().remove(); // Reordena visualmente el ranking según el orden de sumsByKey rankingBox.selectAll("div.rank").data(sumsByKey, d => d.key).order(); } // La selección inicial del brush se aplica aquí, al final, y no justo tras // crearlo: `brush.move` dispara "brush end" de forma síncrona, y ese evento // llama a render(). Si se hiciera antes, render() se ejecutaría cuando las // tarjetas KPI y el panel de ranking (declarados más abajo) todavía no // existen, provocando un ReferenceError por acceso a un const no inicializado. gBrush.call(brush.move, [xContext(range[0]), xContext(range[1]) + xContext.bandwidth()]); render(); return root.node(); }