3e:null 3f:["$","title",null,{"children":"Gráfico dos líneas alcaldes y buscador | ec-coberturas | Observable"}] 45:Tb96,style = html``46:T289a,// 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 tipo = () => 1, ajuste_ipc = () => 1, año_ipc = ([año_ipc]) => año_ipc, title, // given d in data, returns the title 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 = 100, // bottom margin, in pixels marginLeft = 50, // left margin, in pixels width = 640, // outer width, in pixels height = 800, // outer height, in pixels xType = d3.scaleLinear, // 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 tDomain, // colores tipo //color = "#A7C5D8", // stroke color of line, as a constant or a function of *z* colors = ["#31739B", "#F58191", "#bbb"], strokeLinecap = "round", // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 2, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const _tipo = d3.map(data, tipo); const _ajuste_ipc = d3.map(data, ajuste_ipc); const _año_ipc = d3.map(data, año_ipc); 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))]; 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])); if (tDomain === undefined) tDomain = _tipo; tDomain = new d3.InternSet(tDomain); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 150) .tickSizeOuter(0) .tickFormat(d3.format(".0f")); const yAxis = d3 .axisLeft(yScale) .ticks(height / 60, yFormat) .tickFormat(function (d) { return formatNumberES(d, 0); }); const color = d3.scaleOrdinal(tDomain, colors); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator sueldo const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); // Construct a line generator IPC const line2 = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(_ajuste_ipc[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") .style("overflow", "visible") .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); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call( voronoi ? () => {} : (g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); //**** line y circulos _ajuste_ipc ****// const path2 = svg .append("g") .attr("fill", "none") .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", 0.4) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", "#F58191") .attr("d", ([, I]) => line2(I)); svg .append("g") .selectAll("circle") .data(I) .join("circle") .attr("cx", (i) => xScale(X[i])) .attr("cy", (i) => yScale(_ajuste_ipc[i])) .attr("stroke", "white") .attr("fill", "#F58191") .attr("r", (i) => (_ajuste_ipc[i] == null ? 0 : 3)); ///**** line y circulos sueldos ****// const path = svg .append("g") .attr("fill", "none") .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("stroke", "#B7B5A8") .attr("d", ([, I]) => line(I)); svg .append("g") .selectAll("circle") .data(I) .join("circle") .attr("cx", (i) => xScale(X[i])) .attr("cy", (i) => yScale(Y[i])) .attr("stroke", "white") .attr("fill", "grey") .attr("r", (i) => (Y[i] == null ? 0 : 3)); /*****************************************/ /***** ROLLOVER SUELDO e IPC (dot2) ****/ /*****************************************/ const dot = svg.append("g"); dot.append("circle").attr("r", 2.5).attr("display", "none"); const dot2 = svg.append("g"); dot2.append("circle").attr("r", 2.5).attr("display", "none"); 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 : "#efefef")) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); dot2.attr( "transform", `translate(${xScale(X[i])},${yScale(_ajuste_ipc[i])})` ); const text = dot.selectAll("text"); if (T) dot .select("text") .attr("font-weight", 400) .text("En " + X[i] + " el sueldo") .append("tspan") .attr("dy", 17) .attr("x", 0) .attr("font-weight", 400) .text("del alcalde de") .append("tspan") .attr("dy", 17) .attr("x", 0) .attr("font-weight", 700) .text(T[i]) .append("tspan") .append("tspan") .attr("dy", 17) .attr("x", 0) .attr("font-weight", 400) .text("fue de ") .append("tspan") .attr("font-weight", 700) .text(formatNumberES(Y[i]) + "€") .append("tspan") .attr("dy", 17) .attr("x", 0) .attr("font-weight", 400) .text( "(Dedicación: " + (_tipo[i] == null ? "sin info" : _tipo[i]) + ")" ) .append("tspan") .attr("dy", 17) .attr("x", 0) .text("–––––––––") .append("tspan") .attr("dy", 17) .attr("x", 0) .text("La proyección del sueldo") .append("tspan") .attr("dy", 17) .attr("x", 0) .text("para este año") .append("tspan") .attr("dy", 17) .attr("x", 0) .text( "respecto al de " + (_año_ipc[i] == null ? "sin info" : _año_ipc[i]) ) .append("tspan") .attr("dy", 17) .attr("x", 0) .attr("font-weight", 700) .attr("fill", "#F58191") .text( "sería de: " + (_ajuste_ipc[i] == null ? "sin info" : formatNumberES(_ajuste_ipc[i]) + "€") ); const path2 = dot .selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); dot .append("text") .attr("class", "tooltip") .attr("text-anchor", "end") .attr("y", -8); // tooltip positioning const { x, y, width: w, height: h } = text.node().getBBox(); if (X[i] < 2014) { text.attr("transform", `translate(${-w / 2 + w / 1.3},${y})`); } else if (X[i] > 2019) { text.attr("transform", `translate(${-w / 2 - w / 1.3},${y - 30})`); } else { text.attr("transform", `translate(${-w / 2},${15 - y})`); } // tooltip container path if (X[i] < 2014) { path2.attr( "d", `M ${x + 20},${y - h / 2 + 50} L ${x + w + 60},${y - h / 2 + 50} L ${ x + w + 60 },${y + h} L ${x + 20},${y + h} L ${x + 20},${y - h / 2 + 50}` ); } else if (X[i] > 2019) { path2.attr( "d", `M ${x - 30},${y - h / 2 + 20} L ${x - w - 60},${y - h / 2 + 20} L ${ x - w - 60 },${y + h - 30} L ${x - 30},${y + h - 30} L ${x - 30},${y - h / 2 + 20}` ); } else { path2.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); } } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", true); } function pointerleft() { path.style("mix-blend-mode", mixBlendMode).style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }47:[{"id":"41abbb1d5b6df09c8419f998dd471d92eb82e991e27cc49191b8d0d705c66a87fa568d4f01529a68e4f37c93eadf8374e44133a0e9d6e1d3b73ee2820f194347","href":"https://static.observableusercontent.com/files/41abbb1d5b6df09c8419f998dd471d92eb82e991e27cc49191b8d0d705c66a87fa568d4f01529a68e4f37c93eadf8374e44133a0e9d6e1d3b73ee2820f194347","name":"FINAL_ISPA-vs-inflacion@2.csv","type":"text/csv","lastModified":1672745942135.275,"size":6081818},{"id":"53e10c9e800fb237312516e7243d138d4abe71fa4dab355ce0e4252ab26650b06b7609f28a019f6682062e743b17edb3258b4301b76e512ae826764c4fd855c2","href":"https://static.observableusercontent.com/files/53e10c9e800fb237312516e7243d138d4abe71fa4dab355ce0e4252ab26650b06b7609f28a019f6682062e743b17edb3258b4301b76e512ae826764c4fd855c2","name":"lupa.svg","type":"image/svg+xml","lastModified":1672748667523.546,"size":443},{"id":"3b57267f60ce53377b6fa309e887175fe5345f724eec05ebb69cd68e8715d797fea9f20b62fa511ce95a757439980abca0c40ceab9a538fe09b5d6a46c823e5c","href":"https://static.observableusercontent.com/files/3b57267f60ce53377b6fa309e887175fe5345f724eec05ebb69cd68e8715d797fea9f20b62fa511ce95a757439980abca0c40ceab9a538fe09b5d6a46c823e5c","name":"ispa-inflacion-sort@2.csv","type":"text/csv","lastModified":1672770542399.587,"size":6221302}] 43:{"id":"0d242ed554e95ff7","slug":null,"title":"Gráfico dos líneas alcaldes y buscador","thumbnail":"ff5e34a92b442215ac855358f03d3426fd00c8c561df3d8b81320eb8b926d846","access_level":"public","create_time":"$D2022-12-09T10:01:57.580Z","update_time":"$D2023-09-27T15:50:29.722Z","view_time":null,"first_public_time":"$D2022-12-09T10:01:57.580Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","bio":"","following":false},"version":1372,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"role":"editor"},{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Gráfico dos líneas alcaldes y buscador","cells":[{"id":1,"value":"# Gráfico dos líneas alcaldes y buscador\n\nObservable reference: This [line chart](/@d3/line-chart) shows the unemployment rate of various U.S. metro divisions from 2000 through 2013. On hover, the closest data point to the pointer and its associated series is highlighted.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"$45","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"style","database":"$undefined"},{"id":505,"value":"unemployment = FileAttachment(\"ispa-inflacion-sort@2.csv\").csv({\n typed: true\n})\n\n//FileAttachment(\"FINAL_ISPA-vs-inflación - FINAL_ISPA-vs-inflación (2).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"data = Object.assign(\n unemployment,\n ({\n ayuntamiento: ayuntamiento,\n año: year,\n total_percibido: total_percibido,\n ajuste_ipc_b21: ajuste_ipc_b21,\n regimen_dedicacion: regimen_dedicacion,\n filtro_1: filtro_1\n }) => ({\n ayuntamiento,\n regimen_dedicacion,\n year: +year,\n total_percibido: +total_percibido,\n ajuste_ipc_b21: +ajuste_ipc_b21,\n filtro_1: +filtro_1\n }),\n {}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"dataLuis = data.map((d) =>\n Object.fromEntries(\n Object.keys(d).map((key) => [key, d[key] === \"null\" ? \"\" : d[key]])\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"selected_country = selected_country2[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"municipalites = [...new Set(data.map((item) => item.ayuntamiento))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"municipalites_order2 = municipalites.sort((a, b) => a.length - b.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"selectionMin = selected_country2.slice(0, 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"selected_country2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"viewof selected_country2 = Inputs.search(data, {\n placeholder: \"Escriba su población\",\n datalist: municipalites_order2,\n locale: \"es\",\n query: \"Madrid\",\n //format: ??, format - a function to show the number of results.\n //format: (result) => `Resultados: ${result / 9}`,\n format: (result) => \"\",\n columns: [\"ayuntamiento\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"

Total percibido Proyección ajustada al IPC

Fuente: Ministerio de Hacienda y Función Pública | El Confidencial

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"fuente","database":"$undefined"},{"id":479,"value":"This chart emits *input* events and exposes a value (the focused data); you can listen for these events (*e.g.*, `chart.addEventListener(\"input\", …)`) to support interaction such as coordinated views. On Observable, you can even define a reactive value by declaring the chart as a [view](/@observablehq/introduction-to-views) or using Generators.input as below; any cell that references *focus* will now run automatically when the user hovers the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"focus = Generators.input(chart) // or say viewof focus = LineChart(…)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"/*\n * Funcion para devolver un numero formateado con separadores de miles\n * y decimales en formato español\n * @param {int|float|string} n - numero valido en formato entero, float o string\n * @param {int} d - numero de decimales\n */\nformatNumberES = (n, d = 1) => {\n n = new Intl.NumberFormat(\"es-ES\").format(parseFloat(n).toFixed(d));\n if (d > 0) {\n // Obtenemos la cantidad de decimales que tiene el numero\n const decimals = n.indexOf(\",\") > -1 ? n.length - 1 - n.indexOf(\",\") : 0;\n\n // añadimos los ceros necesios al numero\n n = decimals == 0 ? n + \",\" + \"0\".repeat(d) : n + \"0\".repeat(d - decimals);\n }\n return n;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"formatNumberES(10000.35)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"import { submit } from \"@mbostock/more-deliberate-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"lupa = FileAttachment(\"lupa.svg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"FileAttachment(\"lupa.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"