2a:null 2b:["$","title",null,{"children":"Caso de Estudio - MOP - V4 | Augusto Revillod | Observable"}] 30:Tfa1e,// ============================================================= // INVERSIÓN MOP 2011-2020 // // Bubble Chart animado + gráfico de barras vinculado // // PERSPECTIVA VISUAL: // // Cada burbuja = combinación Región × Servicio // Texto interior = Servicio // Color = Región // X = Inversión regional // Y = Participación del servicio dentro del total regional anual // Tamaño = Inversión nacional del servicio // // Gráfico de barras: // X = Año // Y = Inversión regional // Color = Región // Serie = combinación Región × Servicio seleccionada // // Solo Pausa / Play controla el movimiento automático. // ============================================================= // ------------------------------------------------------------- // 1. CONFIGURACIÓN // ------------------------------------------------------------- const appWidth = 900; const bubbleHeight = 640; const barHeight = 520; const bubbleMargin = { top: 70, right: 50, bottom: 85, left: 95 }; const barMargin = { top: 50, right: 260, bottom: 75, left: 95 }; // ------------------------------------------------------------- // 2. VALIDACIÓN INICIAL // ------------------------------------------------------------- if (!Array.isArray(data) || data.length === 0) { throw new Error( "No se pudo cargar Dataset-MOP.csv o el archivo está vacío." ); } // ------------------------------------------------------------- // 3. NORMALIZACIÓN DE COLUMNAS // // Admite: // AÑO / ANO // INVERSIÓN NACIONAL / INVERSION_NACIONAL // INVERSIÓN REGIONAL / INVERSION_REGIONAL // ------------------------------------------------------------- function normalizeColumnName(name) { return String(name) .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .trim() .toUpperCase() .replace(/\s+/g, "_"); } const rawData = data.map(function(row) { const normalized = {}; Object.entries(row).forEach(function([key, value]) { normalized[normalizeColumnName(key)] = value; }); return normalized; }); // ------------------------------------------------------------- // 4. PREPARACIÓN DE DATOS // ------------------------------------------------------------- const appData = rawData .map(function(d) { return { year: Number(d.ANO), region: d.REGION == null ? "" : String(d.REGION).trim(), service: d.SERVICIO == null ? "" : String(d.SERVICIO).trim(), nationalInvestment: Number(d.INVERSION_NACIONAL), regionalInvestment: Number(d.INVERSION_REGIONAL) }; }) .filter(function(d) { return ( Number.isFinite(d.year) && d.region !== "" && d.service !== "" && Number.isFinite(d.nationalInvestment) && Number.isFinite(d.regionalInvestment) ); }); if (appData.length === 0) { throw new Error( "No fue posible interpretar las columnas. " + "Comprueba AÑO, REGION, SERVICIO, " + "INVERSION_NACIONAL e INVERSION_REGIONAL." ); } // ------------------------------------------------------------- // 5. AÑOS, REGIONES Y SERVICIOS // ------------------------------------------------------------- const appYears = Array.from( new Set( appData.map(function(d) { return d.year; }) ) ).sort(function(a, b) { return a - b; }); const appRegions = Array.from( new Set( appData.map(function(d) { return d.region; }) ) ).sort(d3.ascending); const appServices = Array.from( new Set( appData.map(function(d) { return d.service; }) ) ).sort(d3.ascending); const appFirstYear = appYears[0]; const appLastYear = appYears[appYears.length - 1]; // ------------------------------------------------------------- // 6. ABREVIATURAS DE SERVICIO // // Se muestran dentro de las burbujas para evitar textos largos. // El tooltip conserva el nombre completo. // ------------------------------------------------------------- const appServiceShortName = new Map([ ["Aeropuertos", "AER"], ["Agua Potable Rural", "APR"], ["Arquitectura", "ARQ"], ["Concesiones", "CON"], ["D. G. de Aguas", "DGA"], ["D.G.O.P.", "DGOP"], ["I. N. de Hidráulica", "INH"], ["Obras Hidráulicas", "OH"], ["Obras Portuarias", "OP"], ["Planeamiento", "PLA"], ["Subsecretaría", "SUB"], ["Vialidad", "VIA"] ]); function appServiceLabel(service) { return ( appServiceShortName.get(service) || String(service) .slice(0, 4) .toUpperCase() ); } // ------------------------------------------------------------- // 7. IDENTIFICADOR REGIÓN × SERVICIO // ------------------------------------------------------------- function appCombinationId(d) { return ( d.region + "||" + d.service ); } function appSplitCombinationId(id) { const separatorIndex = String(id).indexOf("||"); return { region: String(id).slice( 0, separatorIndex ), service: String(id).slice( separatorIndex + 2 ) }; } function appCombinationLabel(id) { const parts = appSplitCombinationId(id); return ( parts.service + " · " + parts.region ); } // Selección acumulativa local const selected = new Set(); // ------------------------------------------------------------- // 8. HISTORIA POR REGIÓN × SERVICIO // ------------------------------------------------------------- const appHistoryByCombination = d3.group( appData, appCombinationId ); appHistoryByCombination.forEach( function(records) { records.sort(function(a, b) { return d3.ascending( a.year, b.year ); }); } ); const appCombinations = Array.from( appHistoryByCombination.keys() ).sort(function(a, b) { return d3.ascending( appCombinationLabel(a), appCombinationLabel(b) ); }); // ------------------------------------------------------------- // 9. TOTAL REGIONAL ANUAL // // Para cada combinación Año × Región: // // total regional anual = suma de todos los servicios. // // Después: // // participación = inversión región-servicio / total regional. // ------------------------------------------------------------- const appRegionalTotals = d3.rollup( appData, function(records) { return d3.sum( records, function(d) { return d.regionalInvestment; } ); }, function(d) { return d.year; }, function(d) { return d.region; } ); appData.forEach(function(d) { const yearMap = appRegionalTotals.get(d.year); const regionalTotal = yearMap ? yearMap.get(d.region) : 0; d.regionalTotal = regionalTotal || 0; d.serviceShareInRegion = regionalTotal > 0 ? ( d.regionalInvestment / regionalTotal ) * 100 : 0; }); // ------------------------------------------------------------- // 10. VALIDACIÓN DE INVERSIÓN NACIONAL // // Debe existir un único valor de inversión nacional para cada: // // Año × Servicio. // // El valor nacional no se suma entre regiones. // ------------------------------------------------------------- const appNationalValidation = d3.rollup( appData, function(records) { return new Set( records.map(function(d) { return d.nationalInvestment; }) ).size; }, function(d) { return d.year; }, function(d) { return d.service; } ); const appNationalInconsistencies = []; appNationalValidation.forEach( function(serviceMap, year) { serviceMap.forEach( function(uniqueValues, service) { if (uniqueValues > 1) { appNationalInconsistencies.push({ year: year, service: service, uniqueValues: uniqueValues }); } } ); } ); if (appNationalInconsistencies.length > 0) { console.warn( "Existen combinaciones Año × Servicio con más de " + "un valor de inversión nacional:", appNationalInconsistencies ); } // ------------------------------------------------------------- // 11. COLOR POR REGIÓN // ------------------------------------------------------------- const appRegionPalette = [ "#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F", "#EDC948", "#B07AA1", "#FF9DA7", "#9C755F", "#79706E", "#2F4B7C", "#D45087", "#1B9E77", "#D95F02", "#7570B3", "#66A61E", "#A6761D" ]; const appColor = d3.scaleOrdinal() .domain(appRegions) .range(appRegionPalette); // ------------------------------------------------------------- // 12. TRAZOS POR SERVICIO // // En las barras, el relleno representa la región. // El borde representa el servicio. // ------------------------------------------------------------- const appServiceStrokePalette = [ "#111827", "#374151", "#6B7280", "#92400E", "#7C2D12", "#064E3B", "#1E3A8A", "#581C87", "#831843", "#3F3F46", "#0F172A", "#713F12" ]; const appServiceStroke = d3.scaleOrdinal() .domain(appServices) .range(appServiceStrokePalette); // ------------------------------------------------------------- // 13. ESCALAS DEL BUBBLE CHART // // scaleSqrt admite los valores iguales a cero. // ------------------------------------------------------------- const appX = d3.scaleSqrt() .domain([ 0, d3.max( appData, function(d) { return d.regionalInvestment; } ) ]) .range([ bubbleMargin.left, appWidth - bubbleMargin.right ]) .nice(); const maximumShare = d3.max( appData, function(d) { return d.serviceShareInRegion; } ) || 100; const appY = d3.scaleLinear() .domain([ 0, Math.min( 100, Math.ceil(maximumShare / 10) * 10 ) ]) .range([ bubbleHeight - bubbleMargin.bottom, bubbleMargin.top ]) .nice(); const appRadius = d3.scaleSqrt() .domain([ 0, d3.max( appData, function(d) { return d.nationalInvestment; } ) ]) .range([2, 31]); // ------------------------------------------------------------- // 14. CONTENEDOR GENERAL // ------------------------------------------------------------- const appContainer = html`

Inversión MOP: servicios distribuidos entre regiones

X: inversión regional · Y: participación del servicio en la región · Tamaño: inversión nacional del servicio · Texto: servicio · Color: región

Ninguna combinación seleccionada.

El texto de cada burbuja identifica el servicio y el color identifica la región. Haz clic sobre una burbuja para seleccionarla o desmarcarla.

Trayectoria histórica de las combinaciones seleccionadas

Selecciona burbujas o utiliza los selectores.

Detalle de las combinaciones seleccionadas

Cada combinación seleccionada genera una tarjeta.

Lectura analítica:

Selecciona una o más combinaciones, o utiliza Buscar mayor caída.

Nota metodológica: cada burbuja representa una combinación Región × Servicio. La inversión nacional controla el tamaño, pero no se suma entre regiones. Los montos son nominales del año correspondiente. “No Regionalizable” se conserva como categoría administrativa.

`; // ------------------------------------------------------------- // 15. CONTROLES // ------------------------------------------------------------- const appControls = d3.select(appContainer) .select("#app-controls"); function appStyleButton(selection) { return selection .style("height", "32px") .style("padding", "5px 11px") .style("border", "1px solid #aaa") .style("border-radius", "4px") .style("background", "white") .style("cursor", "pointer") .style("font", "13px Arial,sans-serif"); } function appStyleSelect(selection) { return selection .style("height", "32px") .style("padding", "5px 8px") .style("border", "1px solid #aaa") .style("border-radius", "4px") .style("background", "white") .style("font", "13px Arial,sans-serif"); } let appYearIndex = 0; let appRunning = true; const appPauseButton = appStyleButton( appControls.append("button") ) .text("Pausa"); const appRestartButton = appStyleButton( appControls.append("button") ) .text( "Volver a " + appFirstYear ); const appFinalYearButton = appStyleButton( appControls.append("button") ) .text( "Ir a " + appLastYear ); const appClearButton = appStyleButton( appControls.append("button") ) .text("Limpiar selección"); const appAnomalyButton = appStyleButton( appControls.append("button") ) .text("Buscar mayor caída") .style("background", "#fff3cd") .style("border-color", "#d6b656"); // ------------------------------------------------------------- // 16. SELECTOR PRINCIPAL DE REGIÓN // ------------------------------------------------------------- const appRegionSelect = appStyleSelect( appControls.append("select") ) .style("min-width", "260px"); appRegionSelect .append("option") .attr("value", "") .text("Todas las regiones"); appRegionSelect .selectAll( "option.app-region-option" ) .data(appRegions) .join("option") .attr( "class", "app-region-option" ) .attr("value", function(region) { return region; }) .text(function(region) { return region; }); // ------------------------------------------------------------- // 17. SELECTOR SECUNDARIO DE SERVICIO // ------------------------------------------------------------- const appServiceSelect = appStyleSelect( appControls.append("select") ) .style("min-width", "220px"); function appPopulateServices(region) { const availableServices = region === "" ? appServices : appServices.filter( function(service) { return appHistoryByCombination.has( region + "||" + service ); } ); appServiceSelect .selectAll("option") .remove(); appServiceSelect .append("option") .attr("value", "") .text( region === "" ? "Acciones y servicios" : "Servicios de la región" ); appServiceSelect .append("option") .attr("value", "__ALL__") .text( region === "" ? "✓ Seleccionar todos los servicios" : "✓ Seleccionar todos en la región" ); appServiceSelect .append("option") .attr("value", "__NONE__") .text("✕ Desmarcar todo"); appServiceSelect .append("option") .attr("disabled", true) .text("────────────────────"); appServiceSelect .selectAll( "option.app-service-option" ) .data(availableServices) .join("option") .attr( "class", "app-service-option" ) .attr( "value", function(service) { return service; } ) .text(function(service) { if (region === "") { return service; } const id = region + "||" + service; return selected.has(id) ? "✓ " + service : service; }); appServiceSelect .property("value", ""); } appPopulateServices(""); // ------------------------------------------------------------- // 18. BUBBLE CHART // ------------------------------------------------------------- const appBubbleSvg = d3.select(appContainer) .select("#app-bubble-chart") .append("svg") .attr("width", appWidth) .attr("height", bubbleHeight) .attr( "viewBox", "0 0 " + appWidth + " " + bubbleHeight ) .style("max-width", "100%") .style("height", "auto") .style("background", "white"); const appBackground = appBubbleSvg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", appWidth) .attr("height", bubbleHeight) .attr("fill", "white"); // Retícula const appBubbleGrid = appBubbleSvg.append("g") .attr( "transform", "translate(" + bubbleMargin.left + ",0)" ) .call( d3.axisLeft(appY) .ticks(8) .tickSize( -( appWidth - bubbleMargin.left - bubbleMargin.right ) ) .tickFormat("") ); appBubbleGrid .selectAll("line") .attr("stroke", "#e8e8e8") .attr("pointer-events", "none"); appBubbleGrid .select(".domain") .remove(); // Ejes appBubbleSvg.append("g") .attr( "transform", "translate(0," + ( bubbleHeight - bubbleMargin.bottom ) + ")" ) .call( d3.axisBottom(appX) .ticks(8) .tickFormat(function(value) { return d3.format("~s")(value); }) ) .style("pointer-events", "none"); appBubbleSvg.append("g") .attr( "transform", "translate(" + bubbleMargin.left + ",0)" ) .call( d3.axisLeft(appY) .ticks(8) .tickFormat(function(value) { return value + "%"; }) ) .style("pointer-events", "none"); // Títulos de ejes appBubbleSvg.append("text") .attr("x", appWidth / 2) .attr("y", bubbleHeight - 20) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", 600) .attr("pointer-events", "none") .text( "Inversión regional " + "(miles de pesos nominales)" ); appBubbleSvg.append("text") .attr("transform", "rotate(-90)") .attr("x", -bubbleHeight / 2) .attr("y", 23) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", 600) .attr("pointer-events", "none") .text( "Participación del servicio " + "dentro del total regional" ); const appBubbles = appBubbleSvg.append("g") .attr("class", "app-bubbles"); const appBubbleLabels = appBubbleSvg.append("g") .attr( "class", "app-bubble-labels" ) .attr("pointer-events", "none"); const appYearLabel = appBubbleSvg.append("text") .attr( "x", appWidth - bubbleMargin.right ) .attr("y", 120) .attr("text-anchor", "end") .attr("font-size", 76) .attr("font-weight", 600) .attr("fill", "#d5d5d5") .attr("pointer-events", "none"); // ------------------------------------------------------------- // 19. LEYENDA DE REGIONES // ------------------------------------------------------------- const appLegend = appBubbleSvg.append("g") .attr( "transform", "translate(" + (bubbleMargin.left + 15) + "," + bubbleMargin.top + ")" ) .attr("pointer-events", "none"); appRegions.forEach( function(region, index) { const column = Math.floor(index / 6); const rowIndex = index % 6; const row = appLegend.append("g") .attr( "transform", "translate(" + column * 255 + "," + rowIndex * 18 + ")" ); row.append("circle") .attr("r", 5) .attr( "fill", appColor(region) ); row.append("text") .attr("x", 10) .attr("y", 4) .attr("font-size", 9) .text( region.length > 32 ? region.slice(0, 29) + "…" : region ); } ); appLegend.raise(); // ------------------------------------------------------------- // 20. TOOLTIP // ------------------------------------------------------------- const appTooltip = d3.select(appContainer) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("background", "white") .style("border", "1px solid #aaa") .style("border-radius", "6px") .style( "box-shadow", "0 2px 8px rgba(0,0,0,0.18)" ) .style("padding", "9px 11px") .style("font", "12px Arial,sans-serif") .style("line-height", "1.45") .style("max-width", "340px") .style("z-index", 10); function appFormatMoney(value) { return Number(value).toLocaleString( "es-CL", { maximumFractionDigits: 2 } ); } function appShowTooltip(event, d) { const position = d3.pointer( event, appContainer ); appTooltip .style("opacity", 1) .html( "

" + d.service + "

" + "

" + d.region + "

" + "

Año: " + d.year + "

" + "

Inversión regional: $" + appFormatMoney(d.regionalInvestment) + " mil

" + "

Total regional anual: $" + appFormatMoney(d.regionalTotal) + " mil

" + "

Participación del servicio: " + d.serviceShareInRegion.toFixed(1) + "%

" + "

Inversión nacional del servicio: $" + appFormatMoney(d.nationalInvestment) + " mil

" ) .style( "left", position[0] + 14 + "px" ) .style( "top", position[1] - 25 + "px" ); } function appHideTooltip() { appTooltip.style("opacity", 0); } // ------------------------------------------------------------- // 21. ANÁLISIS DE TRAYECTORIAS // ------------------------------------------------------------- function appAnalyseCombination(id) { const records = appHistoryByCombination.get(id); if (!records || records.length === 0) { return null; } const changes = []; for ( let index = 1; index < records.length; index += 1 ) { const previous = records[index - 1]; const current = records[index]; changes.push({ fromYear: previous.year, toYear: current.year, absoluteChange: current.regionalInvestment - previous.regionalInvestment, percentageChange: previous.regionalInvestment !== 0 ? ( ( current.regionalInvestment - previous.regionalInvestment ) / previous.regionalInvestment ) * 100 : null }); } let largestDrop = changes.length > 0 ? changes[0] : null; changes.forEach(function(change) { if ( largestDrop === null || change.absoluteChange < largestDrop.absoluteChange ) { largestDrop = change; } }); const negativePeriods = changes.filter(function(change) { return change.absoluteChange < 0; }); let directionChanges = 0; for ( let index = 1; index < changes.length; index += 1 ) { const previousSign = Math.sign( changes[index - 1] .absoluteChange ); const currentSign = Math.sign( changes[index] .absoluteChange ); if ( previousSign !== 0 && currentSign !== 0 && previousSign !== currentSign ) { directionChanges += 1; } } const first = records[0]; const last = records[records.length - 1]; return { id: id, region: first.region, service: first.service, records: records, accumulatedInvestment: d3.sum( records, function(d) { return d.regionalInvestment; } ), averageInvestment: d3.mean( records, function(d) { return d.regionalInvestment; } ), initialInvestment: first.regionalInvestment, finalInvestment: last.regionalInvestment, totalChange: last.regionalInvestment - first.regionalInvestment, negativePeriods: negativePeriods, directionChanges: directionChanges, largestDrop: largestDrop, maximumRecord: records.reduce( function(maximum, current) { return ( current.regionalInvestment > maximum.regionalInvestment ) ? current : maximum; }, records[0] ) }; } const appTrajectoryAnalysis = appCombinations .map(appAnalyseCombination) .filter(function(result) { return result !== null; }); // ------------------------------------------------------------- // 22. GRÁFICO DE BARRAS // ------------------------------------------------------------- const appBarSvg = d3.select(appContainer) .select("#app-bar-chart") .append("svg") .attr("width", appWidth) .attr("height", barHeight) .attr( "viewBox", "0 0 " + appWidth + " " + barHeight ) .style("max-width", "100%") .style("height", "auto") .style("background", "white"); const appBarXAxis = appBarSvg.append("g") .attr( "transform", "translate(0," + ( barHeight - barMargin.bottom ) + ")" ); const appBarYAxis = appBarSvg.append("g") .attr( "transform", "translate(" + barMargin.left + ",0)" ); const appBarGrid = appBarSvg.append("g") .attr( "transform", "translate(" + barMargin.left + ",0)" ); const appBarSeries = appBarSvg.append("g") .attr("class", "app-bar-series"); const appBarLegend = appBarSvg.append("g") .attr("class", "app-bar-legend"); appBarSvg.append("text") .attr( "x", ( barMargin.left + appWidth - barMargin.right ) / 2 ) .attr("y", barHeight - 19) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", 600) .text("Año"); appBarSvg.append("text") .attr("transform", "rotate(-90)") .attr("x", -barHeight / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", 600) .text( "Inversión regional " + "(miles de pesos nominales)" ); const appCurrentYearBarLine = appBarSvg.append("line") .attr("y1", barMargin.top) .attr( "y2", barHeight - barMargin.bottom ) .attr("stroke", "#555") .attr("stroke-width", 1.5) .attr( "stroke-dasharray", "5,4" ) .attr("pointer-events", "none") .attr("opacity", 0); const appCurrentYearBarText = appBarSvg.append("text") .attr("y", barMargin.top - 13) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 700) .attr("fill", "#555") .attr("opacity", 0); let appCurrentBarXScale = null; // ------------------------------------------------------------- // 23. ACTUALIZACIÓN DE LA GUÍA DE AÑO // ------------------------------------------------------------- function appUpdateYearGuide( year, optionalScale ) { if (optionalScale) { appCurrentBarXScale = optionalScale; } if (!appCurrentBarXScale) { appCurrentYearBarLine .attr("opacity", 0); appCurrentYearBarText .attr("opacity", 0); return; } const bandX = appCurrentBarXScale(year); if (bandX == null) { appCurrentYearBarLine .attr("opacity", 0); appCurrentYearBarText .attr("opacity", 0); return; } const guideX = bandX + appCurrentBarXScale.bandwidth() / 2; appCurrentYearBarLine .attr("x1", guideX) .attr("x2", guideX) .attr("opacity", 1); appCurrentYearBarText .attr("x", guideX) .attr("opacity", 1) .text(year); } // ------------------------------------------------------------- // 24. ACTUALIZACIÓN DEL GRÁFICO DE BARRAS // ------------------------------------------------------------- function appUpdateBarChart() { const selectedIds = Array.from(selected); const instruction = d3.select(appContainer) .select( "#app-bar-instruction" ); if (selectedIds.length === 0) { appBarSeries .selectAll("*") .remove(); appBarLegend .selectAll("*") .remove(); appBarXAxis .selectAll("*") .remove(); appBarYAxis .selectAll("*") .remove(); appBarGrid .selectAll("*") .remove(); appCurrentBarXScale = null; appUpdateYearGuide( appYears[appYearIndex] ); instruction.text( "Selecciona burbujas o utiliza los selectores." ); return; } const maxVisibleSeries = 12; const visibleIds = selectedIds.slice( 0, maxVisibleSeries ); if ( selectedIds.length > maxVisibleSeries ) { instruction.text( selectedIds.length + " combinaciones seleccionadas. " + "El gráfico muestra las primeras " + maxVisibleSeries + "; las tarjetas conservan la selección completa." ); } else { instruction.text( selectedIds.length === 1 ? ( "Trayectoria anual de " + appCombinationLabel( selectedIds[0] ) + "." ) : ( "Comparación de " + selectedIds.length + " combinaciones Región × Servicio." ) ); } const seriesData = visibleIds.map(function(id) { const records = appHistoryByCombination.get(id); const parts = appSplitCombinationId(id); return { id: id, region: parts.region, service: parts.service, records: records }; }); const xYear = d3.scaleBand() .domain(appYears) .range([ barMargin.left, appWidth - barMargin.right ]) .paddingInner(0.18) .paddingOuter(0.06); const xCombination = d3.scaleBand() .domain(visibleIds) .range([ 0, xYear.bandwidth() ]) .padding( visibleIds.length > 8 ? 0.03 : 0.09 ); const maxSelectedInvestment = d3.max( seriesData, function(series) { return d3.max( series.records, function(d) { return d.regionalInvestment; } ); } ) || 1; const yInvestment = d3.scaleLinear() .domain([ 0, maxSelectedInvestment ]) .nice() .range([ barHeight - barMargin.bottom, barMargin.top ]); appBarXAxis.call( d3.axisBottom(xYear) .tickFormat(d3.format("d")) ); appBarYAxis.call( d3.axisLeft(yInvestment) .ticks(7) .tickFormat(function(value) { return d3.format("~s")(value); }) ); appBarGrid.call( d3.axisLeft(yInvestment) .ticks(7) .tickSize( -( appWidth - barMargin.left - barMargin.right ) ) .tickFormat("") ); appBarGrid .selectAll("line") .attr("stroke", "#e8e8e8"); appBarGrid .select(".domain") .remove(); const flatData = []; seriesData.forEach(function(series) { series.records.forEach( function(record) { flatData.push({ id: series.id, region: series.region, service: series.service, year: record.year, regionalInvestment: record.regionalInvestment }); } ); }); const bars = appBarSeries .selectAll("rect") .data( flatData, function(d) { return ( d.id + "||" + d.year ); } ) .join( function(enter) { return enter .append("rect") .attr( "x", function(d) { return ( xYear(d.year) + xCombination(d.id) ); } ) .attr( "y", yInvestment(0) ) .attr( "width", xCombination.bandwidth() ) .attr("height", 0) .attr( "fill", function(d) { return appColor( d.region ); } ) .attr( "stroke", function(d) { return appServiceStroke( d.service ); } ) .attr("stroke-width", 1.3) .style("cursor", "pointer"); }, function(updateSelection) { return updateSelection; }, function(exit) { return exit .transition() .duration(200) .attr("height", 0) .attr( "y", yInvestment(0) ) .remove(); } ); bars .on( "mouseover", function(event, d) { const position = d3.pointer( event, appContainer ); appTooltip .style("opacity", 1) .html( "

" + d.service + "

" + "

" + d.region + "

" + "

Año: " + d.year + "

" + "

Inversión regional: $" + appFormatMoney( d.regionalInvestment ) + " mil

" ) .style( "left", position[0] + 14 + "px" ) .style( "top", position[1] - 25 + "px" ); } ) .on( "mouseleave", appHideTooltip ) .on( "click", function(event, d) { event.stopPropagation(); selected.delete(d.id); appPopulateServices( appRegionSelect .property("value") ); appRefreshLinkedViews(); } ) .transition() .duration(500) .attr( "x", function(d) { return ( xYear(d.year) + xCombination(d.id) ); } ) .attr( "y", function(d) { return yInvestment( d.regionalInvestment ); } ) .attr( "width", xCombination.bandwidth() ) .attr( "height", function(d) { return ( yInvestment(0) - yInvestment( d.regionalInvestment ) ); } ) .attr( "fill", function(d) { return appColor( d.region ); } ) .attr( "stroke", function(d) { return appServiceStroke( d.service ); } ); // Leyenda lateral const legendRows = appBarLegend .selectAll( "g.app-bar-legend-row" ) .data( seriesData, function(d) { return d.id; } ) .join("g") .attr( "class", "app-bar-legend-row" ) .attr( "transform", function(d, index) { return ( "translate(" + ( appWidth - barMargin.right + 20 ) + "," + ( barMargin.top + index * 29 ) + ")" ); } ); legendRows .selectAll("*") .remove(); legendRows.append("rect") .attr("x", 0) .attr("y", -8) .attr("width", 11) .attr("height", 11) .attr( "fill", function(d) { return appColor( d.region ); } ) .attr( "stroke", function(d) { return appServiceStroke( d.service ); } ) .attr("stroke-width", 1.5); legendRows.append("text") .attr("x", 17) .attr("y", 1) .attr("font-size", 9) .attr("font-weight", 700) .text(function(d) { return d.service; }); legendRows.append("text") .attr("x", 17) .attr("y", 12) .attr("font-size", 7.5) .attr("fill", "#64748b") .text(function(d) { return d.region.length > 28 ? d.region.slice(0, 25) + "…" : d.region; }); appUpdateYearGuide( appYears[appYearIndex], xYear ); } // ------------------------------------------------------------- // 25. TARJETAS // ------------------------------------------------------------- function appTrajectoryType(result) { if ( result.negativePeriods.length >= 2 && result.directionChanges >= 3 ) { return ( "Trayectoria con alta variabilidad " + "y varios cambios de dirección" ); } if ( result.negativePeriods.length > 0 ) { return ( "Trayectoria con al menos " + "una caída interanual" ); } return ( "Trayectoria sin caídas " + "interanuales registradas" ); } function appUpdateDetailCards() { const selectedIds = Array.from(selected); const detailsContainer = d3.select(appContainer) .select( "#app-detail-cards" ); const instruction = d3.select(appContainer) .select( "#app-details-instruction" ); if (selectedIds.length === 0) { detailsContainer .selectAll("*") .remove(); instruction.text( "Cada combinación seleccionada genera una tarjeta." ); return; } instruction.text( selectedIds.length === 1 ? "1 combinación seleccionada." : ( selectedIds.length + " combinaciones seleccionadas." ) ); const detailsData = selectedIds .map(appAnalyseCombination) .filter(function(d) { return d !== null; }); const cards = detailsContainer .selectAll( "article.app-combination-card" ) .data( detailsData, function(d) { return d.id; } ) .join( function(enter) { const card = enter.append("article") .attr( "class", "app-combination-card" ) .style( "background", "white" ) .style( "border", "1px solid #d9dfe5" ) .style( "border-radius", "7px" ) .style( "padding", "13px 14px" ) .style( "box-shadow", "0 1px 4px rgba(0,0,0,0.08)" ); const header = card.append("div") .style( "display", "flex" ) .style( "justify-content", "space-between" ) .style( "align-items", "start" ) .style("gap", "8px") .style( "margin-bottom", "8px" ); header.append("div") .attr( "class", "app-card-title" ); header.append("button") .attr( "class", "app-card-remove" ) .attr( "aria-label", "Desmarcar combinación" ) .text("×") .style( "border", "none" ) .style( "background", "transparent" ) .style( "font-size", "22px" ) .style( "line-height", "18px" ) .style( "cursor", "pointer" ) .style( "color", "#64748b" ); card.append("div") .attr( "class", "app-card-body" ) .style( "font-size", "13px" ) .style( "line-height", "1.55" ); return card; }, function(updateSelection) { return updateSelection; }, function(exit) { return exit.remove(); } ); cards.style( "border-left", function(d) { return ( "6px solid " + appColor(d.region) ); } ); cards.select( ".app-card-title" ) .html(function(d) { return ( "

" + d.service + "

" + "

" + d.region + "

" ); }); cards.select( ".app-card-body" ) .html(function(d) { const largestDrop = d.largestDrop; return ( "

" + appTrajectoryType(d) + "

" + "

Acumulado: $" + appFormatMoney( d.accumulatedInvestment ) + " mil

" + "

Promedio anual: $" + appFormatMoney( d.averageInvestment ) + " mil

" + "

Valor inicial: $" + appFormatMoney( d.initialInvestment ) + " mil

" + "

Valor final: $" + appFormatMoney( d.finalInvestment ) + " mil

" + "

Cambio total: $" + appFormatMoney( d.totalChange ) + " mil

" + "

Periodos con caída: " + d.negativePeriods.length + "

" + "

Cambios de dirección: " + d.directionChanges + "

" + "

Máximo: $" + appFormatMoney( d.maximumRecord .regionalInvestment ) + " mil (" + d.maximumRecord.year + ")

" + ( largestDrop !== null ? ( "

" + "Mayor variación negativa: " + largestDrop.fromYear + "–" + largestDrop.toYear + ", $" + appFormatMoney( largestDrop.absoluteChange ) + " mil" + ( largestDrop.percentageChange !== null ? ( " (" + largestDrop .percentageChange .toFixed(1) + "%)" ) : ( " · porcentaje no calculable " + "por base inicial cero" ) ) + "

" ) : "" ) ); }); cards.select( ".app-card-remove" ) .on( "click", function(event, d) { event.stopPropagation(); selected.delete(d.id); appPopulateServices( appRegionSelect .property("value") ); appRefreshLinkedViews(); } ); } // ------------------------------------------------------------- // 26. RESPUESTA ANALÍTICA // ------------------------------------------------------------- function appUpdateAnswer() { const selectedIds = Array.from(selected); const answer = d3.select(appContainer) .select("#app-answer"); if (selectedIds.length === 0) { answer.html( "Selecciona una o más combinaciones, " + "o utiliza Buscar mayor caída." ); return; } const analyses = selectedIds .map(appAnalyseCombination) .filter(function(d) { return ( d !== null && d.largestDrop !== null ); }); if (analyses.length === 0) { answer.text( "No existen suficientes observaciones " + "para comparar las trayectorias." ); return; } let anomaly = analyses[0]; analyses.forEach(function(result) { if ( result.largestDrop .absoluteChange < anomaly.largestDrop .absoluteChange ) { anomaly = result; } }); if ( anomaly.largestDrop .absoluteChange < 0 ) { answer.html( "Entre las combinaciones seleccionadas, " + "" + anomaly.service + " · " + anomaly.region + " " + "presenta la mayor caída interanual. " + "Entre " + anomaly.largestDrop.fromYear + " y " + anomaly.largestDrop.toYear + ", la inversión regional varía en " + "$" + appFormatMoney( anomaly.largestDrop .absoluteChange ) + " mil. " + "El resultado describe un cambio registrado, " + "pero no demuestra su causa." ); } else { answer.text( "Las combinaciones seleccionadas no presentan " + "caídas interanuales entre observaciones consecutivas." ); } } // ------------------------------------------------------------- // 27. ESTILO DE SELECCIÓN // ------------------------------------------------------------- function appUpdateBubbleSelection() { appBubbles .selectAll("circle") .attr( "opacity", function(d) { if (selected.size === 0) { return d.regionalInvestment === 0 ? 0.14 : 0.8; } return selected.has( appCombinationId(d) ) ? 0.96 : 0.05; } ) .attr( "stroke", function(d) { return selected.has( appCombinationId(d) ) ? "#111" : "white"; } ) .attr( "stroke-width", function(d) { return selected.has( appCombinationId(d) ) ? 2.6 : 1; } ); appBubbleLabels .selectAll("text") .attr( "opacity", function(d) { const bubbleRadius = appRadius( d.nationalInvestment ); if (bubbleRadius < 14) { return 0; } if (selected.size === 0) { return 0.92; } return selected.has( appCombinationId(d) ) ? 1 : 0.03; } ); const selectedIds = Array.from(selected); let statusText; if (selectedIds.length === 0) { statusText = "Ninguna combinación seleccionada."; } else if ( selectedIds.length === appCombinations.length ) { statusText = "Todas las combinaciones están seleccionadas (" + selectedIds.length + ")."; } else { statusText = selectedIds.length + " combinaciones seleccionadas: " + selectedIds .slice(0, 4) .map(appCombinationLabel) .join("; "); if (selectedIds.length > 4) { statusText += "; y " + ( selectedIds.length - 4 ) + " más."; } } d3.select(appContainer) .select( "#app-selection-status" ) .text(statusText); } // ------------------------------------------------------------- // 28. ACTUALIZACIÓN COORDINADA // ------------------------------------------------------------- function appRefreshLinkedViews() { appUpdateBubbleSelection(); appUpdateBarChart(); appUpdateDetailCards(); appUpdateAnswer(); } // ------------------------------------------------------------- // 29. CLIC SOBRE BURBUJA // ------------------------------------------------------------- function appBubbleClick(event, d) { event.stopPropagation(); const id = appCombinationId(d); if (selected.has(id)) { selected.delete(id); } else { selected.add(id); } appRefreshLinkedViews(); } // ------------------------------------------------------------- // 30. SELECCIÓN DEL CUADRO VISIBLE // ------------------------------------------------------------- function appSelectVisibleFrame() { const currentYear = appYears[appYearIndex]; const regionFilter = appRegionSelect .property("value"); const frame = appData.filter(function(d) { return ( d.year === currentYear && ( regionFilter === "" || d.region === regionFilter ) ); }); selected.clear(); frame.forEach(function(d) { selected.add( appCombinationId(d) ); }); appPopulateServices( regionFilter ); appRefreshLinkedViews(); } appBackground.on( "click", appSelectVisibleFrame ); // ------------------------------------------------------------- // 31. ACTUALIZACIÓN ANUAL DEL BUBBLE CHART // ------------------------------------------------------------- function appUpdateFrame(year) { const regionFilter = appRegionSelect .property("value"); const frame = appData.filter(function(d) { return ( d.year === year && ( regionFilter === "" || d.region === regionFilter ) ); }); appYearLabel.text(year); const circles = appBubbles .selectAll("circle") .data( frame, appCombinationId ) .join( function(enter) { return enter .append("circle") .attr( "cx", function(d) { return appX( d.regionalInvestment ); } ) .attr( "cy", function(d) { return appY( d.serviceShareInRegion ); } ) .attr("r", 0) .attr( "fill", function(d) { return appColor( d.region ); } ) .attr("stroke", "white") .style( "cursor", "pointer" ); }, function(updateSelection) { return updateSelection; }, function(exit) { return exit .transition() .duration(200) .attr("r", 0) .remove(); } ); circles .on( "mouseover", appShowTooltip ) .on( "mousemove", appShowTooltip ) .on( "mouseleave", appHideTooltip ) .on( "click", appBubbleClick ); circles .transition() .duration(600) .attr( "cx", function(d) { return appX( d.regionalInvestment ); } ) .attr( "cy", function(d) { return appY( d.serviceShareInRegion ); } ) .attr( "r", function(d) { if ( d.regionalInvestment === 0 && d.nationalInvestment === 0 ) { return 2; } return appRadius( d.nationalInvestment ); } ) .attr( "fill", function(d) { return appColor( d.region ); } ) .attr( "opacity", function(d) { if (selected.size === 0) { return d.regionalInvestment === 0 ? 0.14 : 0.8; } return selected.has( appCombinationId(d) ) ? 0.96 : 0.05; } ) .attr( "stroke", function(d) { return selected.has( appCombinationId(d) ) ? "#111" : "white"; } ) .attr( "stroke-width", function(d) { return selected.has( appCombinationId(d) ) ? 2.6 : 1; } ); // Etiquetas internas de servicio const labels = appBubbleLabels .selectAll("text") .data( frame, appCombinationId ) .join( function(enter) { return enter .append("text") .attr( "text-anchor", "middle" ) .attr( "dominant-baseline", "central" ) .attr("font-weight", 700) .attr("fill", "white") .attr( "paint-order", "stroke" ) .attr( "stroke", "rgba(0,0,0,0.55)" ) .attr("stroke-width", 2.2) .attr( "stroke-linejoin", "round" ) .attr("opacity", 0); }, function(updateSelection) { return updateSelection; }, function(exit) { return exit.remove(); } ); labels .text(function(d) { return appServiceLabel( d.service ); }) .transition() .duration(600) .attr( "x", function(d) { return appX( d.regionalInvestment ); } ) .attr( "y", function(d) { return appY( d.serviceShareInRegion ); } ) .attr( "font-size", function(d) { const bubbleRadius = appRadius( d.nationalInvestment ); if (bubbleRadius >= 24) { return 10; } if (bubbleRadius >= 18) { return 8.5; } if (bubbleRadius >= 14) { return 7; } return 0; } ) .attr( "opacity", function(d) { const bubbleRadius = appRadius( d.nationalInvestment ); if (bubbleRadius < 14) { return 0; } if (selected.size === 0) { return 0.92; } return selected.has( appCombinationId(d) ) ? 1 : 0.03; } ); appUpdateYearGuide(year); } // ------------------------------------------------------------- // 32. PAUSA / PLAY // ------------------------------------------------------------- appPauseButton.on( "click", function() { appRunning = !appRunning; appPauseButton.text( appRunning ? "Pausa" : "Play" ); } ); // ------------------------------------------------------------- // 33. PRIMER Y ÚLTIMO AÑO // ------------------------------------------------------------- appRestartButton.on( "click", function() { appYearIndex = 0; appUpdateFrame( appYears[appYearIndex] ); } ); appFinalYearButton.on( "click", function() { appYearIndex = appYears.length - 1; appUpdateFrame( appYears[appYearIndex] ); } ); // ------------------------------------------------------------- // 34. CAMBIO DE REGIÓN // ------------------------------------------------------------- appRegionSelect.on( "change", function(event) { const region = event.target.value; selected.clear(); if (region !== "") { appServices.forEach( function(service) { const id = region + "||" + service; if ( appHistoryByCombination .has(id) ) { selected.add(id); } } ); } appPopulateServices(region); appUpdateFrame( appYears[appYearIndex] ); appRefreshLinkedViews(); } ); // ------------------------------------------------------------- // 35. CAMBIO DE SERVICIO // ------------------------------------------------------------- appServiceSelect.on( "change", function(event) { const value = event.target.value; const region = appRegionSelect .property("value"); if (value === "") { return; } if (value === "__ALL__") { selected.clear(); if (region === "") { appCombinations.forEach( function(id) { selected.add(id); } ); } else { appServices.forEach( function(service) { const id = region + "||" + service; if ( appHistoryByCombination .has(id) ) { selected.add(id); } } ); } appPopulateServices(region); appRefreshLinkedViews(); return; } if (value === "__NONE__") { selected.clear(); appPopulateServices(region); appRefreshLinkedViews(); return; } if (region === "") { const serviceIds = appCombinations.filter( function(id) { return ( appSplitCombinationId(id) .service === value ); } ); const allSelected = serviceIds.every( function(id) { return selected.has(id); } ); serviceIds.forEach( function(id) { if (allSelected) { selected.delete(id); } else { selected.add(id); } } ); } else { const id = region + "||" + value; if (selected.has(id)) { selected.delete(id); } else { selected.add(id); } } appPopulateServices(region); appRefreshLinkedViews(); } ); // ------------------------------------------------------------- // 36. LIMPIAR // ------------------------------------------------------------- appClearButton.on( "click", function() { selected.clear(); appRegionSelect .property("value", ""); appPopulateServices(""); appUpdateFrame( appYears[appYearIndex] ); appRefreshLinkedViews(); } ); // ------------------------------------------------------------- // 37. BUSCAR MAYOR CAÍDA // ------------------------------------------------------------- appAnomalyButton.on( "click", function() { const region = appRegionSelect .property("value"); const candidates = appTrajectoryAnalysis.filter( function(result) { return ( result.largestDrop !== null && ( region === "" || result.region === region ) ); } ); if (candidates.length === 0) { return; } let anomaly = candidates[0]; candidates.forEach( function(candidate) { if ( candidate.largestDrop .absoluteChange < anomaly.largestDrop .absoluteChange ) { anomaly = candidate; } } ); selected.clear(); selected.add( anomaly.id ); appRegionSelect .property( "value", anomaly.region ); appPopulateServices( anomaly.region ); const targetIndex = appYears.indexOf( anomaly.largestDrop .toYear ); if (targetIndex >= 0) { appYearIndex = targetIndex; } appUpdateFrame( appYears[appYearIndex] ); appRefreshLinkedViews(); } ); // ------------------------------------------------------------- // 38. INICIO // ------------------------------------------------------------- appUpdateFrame( appYears[appYearIndex] ); appRefreshLinkedViews(); // ------------------------------------------------------------- // 39. TIMER // ------------------------------------------------------------- const appTimer = d3.interval( function() { if (!appRunning) { return; } appYearIndex = ( appYearIndex + 1 ) % appYears.length; appUpdateFrame( appYears[appYearIndex] ); }, 1200 ); invalidation.then( function() { appTimer.stop(); } ); // ------------------------------------------------------------- // 40. MOSTRAR RESULTADO // ------------------------------------------------------------- display(appContainer);31:[{"id":"29f87b54445faff02a046c682f7a457a520aa13e64f3a997e2c639a316d5cc0aad77a8b97e40a2554b0f37b52d5ade756cea8784a56a1b4ab943e8cae9e33dc4","href":"https://static.observableusercontent.com/files/29f87b54445faff02a046c682f7a457a520aa13e64f3a997e2c639a316d5cc0aad77a8b97e40a2554b0f37b52d5ade756cea8784a56a1b4ab943e8cae9e33dc4","name":"Dataset-MOP.csv","type":"text/csv","lastModified":1790782632257,"size":108367}] 2e:{"id":"46ed2476204f8c0b","slug":"caso-de-estudio-mop-v4","title":"Caso de Estudio - MOP - V4","thumbnail":"43fba818886811503af90b76906a760d071001adf81d9955ea8c512c85f1bda7","access_level":"public","create_time":"$D2026-09-30T19:38:00.780Z","update_time":"$D2026-09-30T19:39:41.020Z","view_time":null,"first_public_time":"$D2026-09-30T19:54:03.057Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2cf22e2ea421a384","login":"augusto-revillod","name":"Augusto Revillod","avatar_url":"https://avatars-next.observableusercontent.com/410453cb1a7c1d1090b6980c46c2198603e03f8bda9b433b98523121e5a4dfb9","tier":"free_2026"},"version":11,"publish_version":11,"role":null,"authored":false,"authors":[{"type":"individual","id":"759a96c25724a973","login":"augusto-revillod","name":"Augusto Revillod","avatar_url":"https://avatars-next.observableusercontent.com/410453cb1a7c1d1090b6980c46c2198603e03f8bda9b433b98523121e5a4dfb9","tier":null}],"members":[{"type":"team","id":"2cf22e2ea421a384","login":"augusto-revillod","name":"Augusto Revillod","avatar_url":"https://avatars-next.observableusercontent.com/410453cb1a7c1d1090b6980c46c2198603e03f8bda9b433b98523121e5a4dfb9","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Caso de Estudio - MOP - V4","cells":[{"id":1,"value":"# Caso de Estudio - MOP - V4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = FileAttachment(\"Dataset-MOP.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"mutable selected = new Set()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2"}} 2f:"$2e:body"