2a:null 2b:["$","title",null,{"children":"Evolución de la inflación en el Perú: análisis regional de los últimos 25 años | Victor Fuentes | Observable"}] 31:T412,chart = LineChart( settings.region_seleccionada == "Todas" ? inflacion.filter( (d) => (d.fecha >= settings.fecha_inicio) & (d.fecha <= settings.fecha_fin) ) : inflacion .filter( (d) => //(d.division == settings.region_seleccionada) & (d.fecha >= settings.fecha_inicio) & (d.fecha <= settings.fecha_fin) ) .filter(function (d, i) { return settings.region_seleccionada.indexOf(d.division) >= 0; }), { x: (d) => d.fecha, y: (d) => d.inflacion, z: (d) => d.division, title: (d) => d.division, subtitle: (d) => pe_locale.utcFormat("%b %y")(d.fecha) + ": " + d3.format(".2%")(d.inflacion), yLabel: "↑ Inflación (%)", width: 700, marginRight: 40, marginTop: 30, marginLeft: 40, height: 500, yFormat: ".0%", color: "#8e063b", strokeWidth: 0.75, strokeOpacity: 0.75, strokeLinecap: "round", strokeLinejoin: "round", curve: d3.curveMonotoneX } )32:T863,Plot.plot({ marks: [ Plot.cell(settings.region_seleccionada == "Todas" ? inflacion.filter( (d) => (d.fecha >= settings.fecha_inicio) & (d.fecha <= settings.fecha_fin) ).map((d) => ({ ...d, inflacion: d.inflacion * 100 })) : inflacion .filter( (d) => //(d.division == settings.region_seleccionada) & (d.fecha >= settings.fecha_inicio) & (d.fecha <= settings.fecha_fin) ) .filter(function (d, i) { return settings.region_seleccionada.indexOf(d.division) >= 0; }).map((d) => ({ ...d, inflacion: d.inflacion * 100 })), { x: d => d.division, y: d => d.fecha, fill: d=> d.inflacion, sort: { x: "x", reverse: false }, title: d=> pe_locale.utcFormat("%b-%Y")(d.fecha) + ': ' +d.inflacion.toFixed(2) + "%" }), Plot.axisX({anchor: "top",tickRotate: -90,tickSize: 5,labelOffset: 0,}), Plot.axisX({anchor: "bottom",tickRotate: -90,tickSize: 5,labelOffset: 0,}), ], y: { tickSize: d => { if ((d.getMonth()+1) % 12 === 0 ){ return 20 } else { return 0 } }, tickFormat: d => { if ((d.getMonth()+1) % 12 === 0) { return pe_locale.utcFormat("%Y")(d) } else { return undefined } }, line: false, tickPadding: 5, // labelAnchor: "top", labelOffset: 27.5, // nice: true, label: "" }, x: { domain:settings.region_seleccionada == "Todas"? undefined: settings.region_seleccionada, tickSize: 5, line:false, // labelAnchor:"right", label:"", tickRotate: -90, labelOffset: 0, tickAngle: -60 }, color: { scheme: "RdBu", type: "diverging", legend: true, reverse: true, pivot:0, symmetric: false, domain: [-5,15], // scheme: "reds", // type: "threshold", // legend: true, // reverse: false, // domain: [0, 3, 6, 9, 12], label: "Inflación anual (%)", tickFormat: (d) => d.toFixed(0) + "%" }, marginTop: 100, marginBottom: 100, height: 600 })33:T6e5,Plot.plot({ marks: [ Plot.barX( inflacion .filter((d) => formatTime(d.fecha) === mes_analisis) //.filter((d) => formatTime(d.fecha) === formatTime(slider.fecha)) .map((d) => ({ ...d, inflacion: d.inflacion * 100 })), { x: "inflacion", fill: "inflacion", y: "division", sort: { y: "x", reverse: true } } ), Plot.text( inflacion .filter((d) => formatTime(d.fecha) === mes_analisis) // .filter((d) => formatTime(d.fecha) === formatTime(slider.fecha)) .map((d) => ({ ...d, inflacion: d.inflacion * 100 })), { x: "inflacion", y: "division", sort: { y: "x", reverse: true }, text: (d) => d.inflacion.toFixed(1), dx: 12 } ), Plot.ruleX([3], { stroke: "darkgrey" }), Plot.textX([{ inflacion: 3 }], { x: "inflacion", dy: -10, text: ["Meta de inflación: 3%"], frameAnchor: "top", fill: "black", fontSize: 11, fontWeight: "bold" }) ], x: { // domain: [-5, 15], ticks: 5, tickSize: 5, tickFormat: (d) => d.toFixed(0) + "%", line: true, tickPadding: 5, labelAnchor: "right", labelOffset: 27.5, nice: true, label: "Inflación anual (%) ⟶" }, y: { tickPadding: 5, labelAnchor: "top", labelOffset: 27.5, nice: true, label: "" }, color: { scheme: "RdBu", type: "diverging", legend: true, reverse: true, pivot:0, symmetric: false, domain:[-5,15], label: "Inflación anual (%)", tickFormat: (d) => d.toFixed(0) + "%" }, // title: { // tickFormat: (d) => d.toFixed(0) + "%" // }, marginBottom: 30, marginLeft: 75, height: 600 })34:T877,animated_chart = addAnimation( addTooltips( Plot.plot({ title: "Inflación continúa acercándose al rango meta del BCRP", subtitle: "Inflación anual según regiones (%)", caption: "Fuente: INEI. Elaboración: IPE / @vfuentesc.", width: 600, height: 500, marginLeft: 100, marks: [ Plot.cell( inflacion.filter((d) => d.fecha >= new Date("2020-01-01")), { x: "fecha", y: "division", fill: "inflacion", fillOpacity: 0, inset: -0.4, title: (d) => d3.format("0.2%")(d.inflacion), sort: { y: null } } ), Plot.ruleX([new Date("2020-12-01")], { dx: 4, stroke: "#5f6062", strokeDasharray: 5 }), Plot.ruleX([new Date("2021-12-01")], { dx: 4, stroke: "#5f6062", strokeDasharray: 5 }), Plot.ruleX([new Date("2022-12-01")], { dx: 4, stroke: "#5f6062", strokeDasharray: 5 }), Plot.axisX({ anchor: "top", ticks: "year", fontSize: 11, tickSize: 33, tickPadding: -15, tickFormat: " %Y", textAnchor: "start", dy: 3, dx: -6 //textAnchor: "start" }), Plot.axisX({ anchor: "top", ticks: "month", fontSize: 6, tickSize: 0, tickPadding: 0, tickFormat: "%b", tickSpacing: 15, dx: 0, tickRotate: -90 // dy: 30 }) ], color: { scheme: "RdBu", type: "diverging", legend: true, reverse: true, pivot: 0, symmetric: false, domain: [-0.05, 0.15], tickFormat: ".0%", label: "Inflación anual (%)" }, x: { // axis: "top", // ticks: 5, // tickFormat: "%Y", label: null }, y: { label: null } }) ), { type: "rect", delay: 10, endValue: 1, replay: replay, attribute: "fillOpacity" } )35:T1893,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text subtitle, // given d in data, returns the subtitle text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply" // blend mode of lines } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) //yDomain = [0, d3.max(Y, (d) => (typeof d === "string" ? +d : d))]; yDomain = d3.extent(Y); if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0); // .tickFormat(pe_locale.utcFormat("%Y ")); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles and subtitles const T = title === undefined ? Z : title === null ? null : d3.map(data, title); const W = subtitle === undefined ? Z : subtitle === null ? null : d3.map(data, subtitle); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call((g) => g.select(".domain").remove()); //Remove xAxisline svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("stroke-opacity", (d) => (d === 0 ? null : 0.1)) .attr("x2", width - marginLeft - marginRight) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); const path = svg .append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("d", ([, I]) => line(I)); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 4); dot .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8) .attr("dy", "-1.2em"); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .style("stroke", ([z]) => (Z[i] === z ? null : "#ddd")) .style("stroke-width", ([z]) => Z[i] === z ? strokeWidth + 1.0 : strokeWidth+0.5) .style("stroke-opacity", ([z]) => (Z[i] === z ? 1 : strokeOpacity+0.75)) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (W) dot .select("text") .text(T[i]) .append("tspan") .text(W[i]) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", -8) .attr("x", 0) .attr("dy", "0em"); svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path .style("mix-blend-mode", null) .style("stroke", "#ddd") .style("stroke-width", strokeWidth); dot.attr("display", null); } function pointerleft() { path .style("mix-blend-mode", mixBlendMode) .style("stroke", null) .style("stroke-width", strokeWidth); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }36:[] 2e:{"id":"9ef241e04ae6a8d8","slug":"evolucion-inflacion-peru-regiones-25-anos","title":"Evolución de la inflación en el Perú: análisis regional de los últimos 25 años","thumbnail":"70ca4c40ef05ee1e18867e92c3b579718df675a8f03bf98c1b11bdcab9cc8c3c","access_level":"public","create_time":"$D2022-10-05T09:39:33.188Z","update_time":"$D2025-02-26T06:28:04.830Z","view_time":null,"first_public_time":"$D2022-10-05T11:12:09.699Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"29a4dfa992066803","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/1d1eef43546c42d5f4083ce7815440acf431e2e8a9a8eaf7113fcde29e34826e","tier":"starter_2024"},"version":2594,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e69cc332aa690cb","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/ea82c90a64af21d1a51a98787faf2a737de8ac4d0a996468c8025a9adb671a2f","tier":null}],"members":[{"type":"individual","id":"7e69cc332aa690cb","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/ea82c90a64af21d1a51a98787faf2a737de8ac4d0a996468c8025a9adb671a2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"1a8b97917f514412","slug":"inflacion","title":"Inflación","owner":{"id":"29a4dfa992066803","login":"vfuentesc","name":"Victor Fuentes"}},"type":"notebook","body":{"title":"Evolución de la inflación en el Perú: análisis regional de los últimos 25 años","cells":[{"id":1,"value":"# Evolución de la inflación en el Perú: análisis regional de los últimos 25 años\n\nAnálisis de la evolución de la inflación en el Perú según regiones para el período 1997-2023. Información provista por el [INEI](https://www.inei.gob.pe) y actualizada el primer día de cada mes.","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"---\n## Inflación en el Perú según regiones, ${pe_locale.utcFormat(\"%Y\")(settings.fecha_inicio)}-${pe_locale.utcFormat(\"%Y\")(settings.fecha_fin)}\n_(en %)_","pinned":false,"hidden":false,"mode":"md"},{"id":779,"value":"viewof settings = {\n let minFecha = d3.min([...new Set(inflacion.map((d) => d.fecha))]);\n let maxFecha = d3.max([...new Set(inflacion.map((d) => d.fecha))]);\n let regiones = [...new Set(inflacion.map((d) => d.division))];\n return Inputs.form(\n {\n region_seleccionada: Inputs.select(ql(regiones), {\n label: \"Región\",\n multiple: 5,\n value: regiones\n }),\n fecha_inicio: Inputs.date({ label: \"Inicio\", value: minFecha }),\n fecha_fin: Inputs.date({ label: \"Fin\", value: maxFecha })\n },\n { template }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"

Fuente: INEI.

","pinned":false,"hidden":false,"mode":"html"},{"id":2101,"value":"---\n## Perú: Evolución de la inflación regional, ${pe_locale.utcFormat(\"%Y\")(settings.fecha_inicio)}-${pe_locale.utcFormat(\"%Y\")(settings.fecha_fin)}\n_(en %)_","pinned":false,"hidden":false,"mode":"md"},{"id":1946,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"

Fuente: INEI.

","pinned":false,"hidden":false,"mode":"html"},{"id":1886,"value":"---\n## Perú: Ránking de inflación regional, ${pe_locale.utcFormat(\"%B %Y\")(toDate(mes_analisis))}\n_(en %)_","pinned":false,"hidden":false,"mode":"md"},{"id":1714,"value":"viewof mes_analisis = Player(df_meses, {\n delay: 300,\n loop: false,\n initial:df_meses.size-1,\n autoplay: false,\n show: { play: true, stop: true }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"

Fuente: INEI.

","pinned":false,"hidden":false,"mode":"html"},{"id":2526,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2523,"value":"viewof replay = Inputs.button(\"Reiniciar\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"---\n## Perú: Ránking de inflación regional, ${pe_locale.utcFormat(\"%B %Y\")(toDate(mes_analisis))}\n_(en %)_","pinned":false,"hidden":false,"mode":"md"},{"id":2310,"value":"key = Legend(Mapa.scales.color, {title: \"Inflación anual (%)\", width: 250, tickFormat: \"%\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2237,"value":"Mapa = Choropleth(inflacion.filter((d) => formatTime(d.fecha) === mes_analisis),\n {\n id: (d) => d.division,\n value: (d) => d.inflacion,\n scale: d3.scaleDiverging, // type of color scale\n range: t => d3.interpolateRdBu(1 - t), // output of color scale\n domain: [-0.05, 0, 0.15],\n width: width * 2,\n height: height,\n title: (f, d) => `${f.properties.geo_nombre}: ${(d.inflacion*100).toFixed(2)}%`,\n features: mapa,\n borders: regionmesh,\n projection: projection,\n featureId: (d) => d.properties.geo_nombre,\n strokeWidth: 0.5\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"

Fuente: INEI.

","pinned":false,"hidden":false,"mode":"html"},{"id":1915,"value":"toDate = (dateStr) => {\n const [day, month, year] = dateStr.split(\"-\")\n return new Date(year, month - 1, day)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1435,"value":"formatTime = d3.utcFormat(\"%d-%m-%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"pe_ES = ({\n \"decimal\": \".\",\n \"thousands\": \",\",\n \"grouping\": [3],\n \"currency\": [\"S/\", \"\"],\n \"dateTime\": \"%a %b %e %X %Y\",\n \"date\": \"%d/%m/%Y\",\n \"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Domingo\", \"Lunes\", \"Martes\", \"Miércoles\", \"Jueves\", \"Viernes\", \"Sábado\"],\n \"shortDays\": [\"Dom\", \"Lun\", \"Mar\", \"Mi\", \"Jue\", \"Vie\", \"Sab\"],\n \"months\": [\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"],\n \"shortMonths\": [\"Ene\", \"Feb\", \"Mar\", \"Abr\", \"May\", \"Jun\", \"Jul\", \"Ago\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"]\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"pe_locale = d3.timeFormatLocale(pe_ES);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2088,"value":"df_regiones = Array.from(\n new Set(inflacion.filter((d) => d.division != \"Perú\").map((d) => d.division))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"df_meses = new Set(inflacion.map((d) => formatTime(d.fecha)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"inflacion = d3.csv(\n \"https://raw.githubusercontent.com/vfuentesc/IPE_DataViz/main/Inflacion/output_inflacion_regiones.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2209,"value":"mapa_bruto = d3.json(\n \"https://raw.githubusercontent.com/vfuentesc/IPE_DataViz/main/Mapas/map_100_regiones_calmlp.json\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"mapa = topojson.feature(mapa_bruto, mapa_bruto.objects.map_100_regiones_calmlp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2221,"value":"regionmesh = topojson.mesh(mapa_bruto, mapa_bruto.objects.map_100_regiones_calmlp, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"projection = d3.geoMercator().fitExtent(\n [\n [margin.left, margin.top],\n [width - margin.right, height - margin.bottom]\n ],\n mapa\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"width = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":2226,"value":"height = width * 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"value":"margin = ({ left: 20, right: 20, top: 20, bottom: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"template = (inputs) =>\n htl.html`

${Object.values(inputs)}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"import {style as faStyle} from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1708,"value":"import { Player } from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2211,"value":"import {Choropleth} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2312,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2505,"value":"import {addAnimation} from \"@mkfreeman/plot-animation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2521,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"