31:T99d,viewof chart = { const svg = d3 .create("svg") .attr("id", "map-denegations") .attr("width", mapWidth) .attr("height", mapHeight); // Pass value (the hovered province information) to the element const element = svg.node(); element.value = []; // Global layer const globalLayer = svg.append("g").attr("id", "map-denegations-container"); // Provinces and CCAA layer const regionsLayer = globalLayer .append("g") .attr("id", "map-denegations-container-regions"); const canaryLineLayer = globalLayer .append("g") .attr("id", "map-denegations-container-canary-line"); regionsLayer .selectAll("path") .data(spainProvinces.features) .join("path") .attr("class", "province") .attr("d", polygonPath) .attr("id", (d) => `path-${d.id}`) .attr("fill", (d) => colorScale(d.properties["Causa más popular"])) .style("stroke", "white") .style("stroke-width", "0.25px") .style("fill-opacity", 0.8) .style("cursor", "pointer"); regionsLayer .selectAll(".ccaa") .data(topojson.feature(spain, spain.objects.autonomous_regions).features) .enter() .append("path") .attr("class", "ccaa") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "1.5px") .attr("stroke-linejoin", "round") .attr("d", polygonPath); regionsLayer .selectAll(".province") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); canaryLineLayer .append("path") .attr("d", projection.getCompositionBorders()) .attr("fill", "none") .attr("stroke", "#c1c1c1"); function onMouseOver(event, d, i) { const myCountryId = d.id; // Highlight country d3.select(this).raise().style("stroke", "black").style("stroke-width", 1.5); // Update cell value!! element.value = myCountryId; element.dispatchEvent(new CustomEvent("input")); } function onMouseOut(event, d, i) { d3.select(this) .lower() .style("stroke", "white") .style("stroke-width", "0.25px"); } if (isMobile) { // Zoom behaviour // Refernece: https://observablehq.com/@d3/zoom const zoom = svg.call( d3 .zoom() .translateExtent([ [0, 0], [width, mapHeight] ]) .scaleExtent([1, 3]) .on("zoom", zoomed) ); function zoomed({ transform }) { globalLayer.attr("transform", transform); } } return svg.node(); }32:T4b0,styles = html` `33:Tf1d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/horizontal-bar-chart function BarChart( data, { x = (d) => d, // given d in data, returns the (quantitative) x-value y = (d, i) => i, // given d in data, returns the (ordinal) y-value title, // given d in data, returns the title text marginTop = 30, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 10, // the bottom margin, in pixels marginLeft = 30, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] xFormat, // a format specifier string for the x-axis xLabel, // a label for the x-axis yPadding = 0.1, // amount of y-range to reserve to separate bars yDomain, // an array of (ordinal) y-values yRange, // [top, bottom] color = "currentColor", // bar fill color titleColor = "white", // title fill color when atop bar titleAltColor = "currentColor" // title fill color when atop background } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the y-domain. if (xDomain === undefined) xDomain = [0, d3.max(X)]; if (yDomain === undefined) yDomain = Y; yDomain = new d3.InternSet(yDomain); // Omit any data not present in the y-domain. const I = d3.range(X.length).filter((i) => yDomain.has(Y[i])); // Compute the default height. if (height === undefined) height = Math.ceil((yDomain.size + yPadding) * 25) + marginTop + marginBottom; if (yRange === undefined) yRange = [marginTop, height - marginBottom]; colorScale.domain(); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = d3.scaleBand(yDomain, yRange).padding(yPadding); const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); // Compute titles. if (title === undefined) { const formatValue = xScale.tickFormat(100, xFormat); title = (i) => `${formatValue(X[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("id", "chart-denegations"); svg .append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", xScale(0)) .attr("y", (i) => yScale(Y[i])) .attr("width", (i) => xScale(X[i]) - xScale(0)) .attr("height", yScale.bandwidth() / 1.8) .attr("fill", (i) => colorScale.domain().indexOf(regionDenegations[i].Causa) > -1 ? colorScale(regionDenegations[i].Causa) : "#c1c1c1" ); svg .append("g") .attr("fill", titleColor) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(I) .join("text") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i]) + yScale.bandwidth() / 1.8) .attr("dy", "0.35em") .attr("dx", -4) .text(title) .call((text) => text .filter((i) => xScale(X[i]) - xScale(0) < 30) // short bars .attr("dx", +4) .attr("fill", titleAltColor) .attr("text-anchor", "start") ) .attr("transform", `translate(0,-${yScale.bandwidth() / 1.8 / 2})`); svg .append("g") .attr( "transform", `translate(${marginLeft + 10},-${yScale.bandwidth() / 1.8 + 5})` ) .call(yAxis) .attr("text-anchor", "start") .attr("font-size", 12); return svg.node(); }34:[] 2f:{"title":"#671 Mapa del porcentaje de causas de denegación del IMV en España por provincias","cells":[{"id":0,"value":"md`# #671 Mapa del porcentaje de causas de denegación del IMV en España por provincias\n(zoomeable en la versión responsive)\n\nCausas de denegación del **Ingreso Mínimo Vital**.\n\nErrores en la documentación y niveles de renta y patrimonio fueron los principales motivos en 2021. Aunque existen diferencias entre provincias.\n\nInsertado en el artículo [\"Documentación errónea o incompleta y niveles de renta, los principales motivos de denegación del Ingreso Mínimo Vital\"](https://civio.es/el-boe-nuestro-de-cada-dia/2022/02/07/documentacion-incompleta-y-niveles-de-renta-los-principales-motivos-de-denegacion-del-ingreso-minimo-vital/)\n\nRef:\n- https://observablehq.com/@civio/604-mapa-transparencia-eurodiputados-scemaps\n- https://observablehq.com/@martgnz/spain-map\n- https://observablehq.com/@d3/world-choropleth\n- https://observablehq.com/@civio/civio-wold-map-template-svg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"colorScale = d3.scaleOrdinal(\n [\n \"Ingresos, patrimonio o administrador de sociedad\",\n \"Discrepancias con la unidad de convivencia\",\n \"Documentación incompleta y/o duplicada\"\n ],\n [\"#2078ff\", \"#ffb111\", \"#d4524a\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"viewof lead = html`

La mayor causa de denegación en toda España es tener discrepancias con la unidad de convivencia declarada (30%), seguida de superar ingresos o patrimonio o ser administrador de una sociedad (27%) y de haber presentado documentación incompleta y/o duplicada (19%).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2221,"value":"viewof swatches = html`

${Swatches(\n colorScale\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"provinceDivResume = chart.length\n ? html`

${selectedRegionData.province}

\n${BarChart(regionDenegations, {\n x: (d) => d.Número,\n y: (d) => d.Causa,\n yDomain: d3.groupSort(\n regionDenegations,\n ([d]) => -d.Número,\n (d) => d.Causa\n ), // sort by descending frequency\n xFormat: \"%\",\n yLabel: \"Frequency →\",\n width: chartWidth,\n color: \"steelblue\",\n height: chartHeight,\n marginLeft: 0,\n marginTop: 10\n})}\n

`\n : html`\n

${\"Pasa por encima de cualquier provincia para explorar sus datos en detalle.\"}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"selectedRegionData = chart.length > 0\n ? spainProvinces.features.find((feature) => feature.id === chart).properties\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2460,"value":"regionDenegations = {\n if (chart.length > 0) {\n const arr = Object.keys(selectedRegionData)\n .map((key) => {\n return {\n Causa: key,\n Número: selectedRegionData[key] / 100\n };\n })\n .filter((d) => d.Causa.includes(\"%\"));\n arr.forEach((d) => (d.Causa = d.Causa.replace(\" (%)\", \"\")));\n return arr;\n } else {\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### Geographic data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2376,"value":"polygonPath = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"projection = composite\n .geoConicConformalSpain()\n .fitSize(\n [mapWidth, mapHeight],\n topojson.feature(spain, spain.objects.provinces)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2366,"value":"spain = await d3.json(\"https://data.civio.es/common/spain-municipalities.json\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1931,"value":"spainProvinces = setProvInfo(topojson.feature(spain, spain.objects.provinces))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2327,"value":"setProvInfo = (geoJSON) => {\n geoJSON.features.forEach((feature) => {\n feature.properties = denegations.find(\n (denegation) => denegation.id === feature.id\n );\n });\n return geoJSON;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`### Restrictions data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2949,"value":"await d3.csv(\n \"https://data.civio.es/elboenuestrodecadadia/denegaciones-imv/denegaciones-imv.csv?\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1329,"value":"denegations = await d3.csv(\n \"https://data.civio.es/elboenuestrodecadadia/denegaciones-imv/denegaciones-imv.csv?q=11\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"// By country\nfilterDataByCountry = function (myDataset, countryId) {\n return myDataset.filter((d) => d.codProvince == countryId);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"mobileViewport = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":2117,"value":"maxMapWidth = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":2866,"value":"maxChartWidth = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"mapWidth = +Math.min(width, maxMapWidth) - 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"scaleMapHeight = (mapWidth * 450) / maxMapWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"mapHeight = scaleMapHeight > 300 ? scaleMapHeight : 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":2709,"value":"chartWidth = Math.min(width, maxChartWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2567,"value":"chartHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"mediaQueryLimit = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { projectionInput } from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2931,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"composite = require(\"d3-composite-projections\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2928,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}