31:T47c,# Remaking Spain's Quality of Life Index by INE The **[MQLI (IMCV in Spanish)](https://ine.es/experimental/imcv/experimental_ind_multi_calidad_vida.htm)** is an [experimental indicator](https://ine.es/experimental/experimental.htm) developed by [Spain's National Institute for Statistics (INE)](https://ine.es/) built from 60 specific indicators grouped in nine dimensions, offering a broad perspective of the quality of life in Spain. As with our other remakes of public open data apps, the goal of this effort is to celebrate open data—it's exciting enough that the data exists, but when paired with a visualization to help us understand and explore it, it's all the more exciting! As usual, we've respected the original design while enhancing clarity and usability. And just like with our initiative **[Catalunya en Dades](https://catalunya-en-dades.fndvit.org/)**, we're using [Observable, a free, open-source static site generator](https://github.com/observablehq/framework) for data apps instead of commercial software products like _Tableau_ (the tool use by INE in this case) or _Power BI_ (the tool used by the Catalan administration).32:Tdfc,pointChart = () => { return Plot.plot({ width: width - width / 8, height: 800, marginLeft: 0, y: { label: "", tickSize: 0, tickFormat: (d) => "" }, x: { domain: [80, 120], ticks: [90, 100, 110], grid: true, axis: "both", label: "Avg." }, color: { type: "diverging", domain: [5, -5], range: slopeColors }, marks: [ Plot.ruleY( customAmpi.map((d) => d.ccaa), { strokeWidth: 0.2, strokeDasharray: "3,6" } ), Plot.barX(customAmpi, { x1: 80, x2: "val", y: "ccaa", r: 3, fill: "#c7c1bf", fillOpacity: 0.3, insetTop: 6, insetBottom: 6 }), Plot.barX(customAmpi, { x1: "val", x2: (d) => { const original = originalAmpi.find( (o) => o.ccaa === d.ccaa && o.dim === "index" && o.year === view.year ); return original.val; }, y: "ccaa", insetTop: 12, insetBottom: 12, fill: (d) => { const original = originalAmpi.find( (o) => o.ccaa === d.ccaa && o.dim === "index" && o.year === view.year ); return (original.val - d.val) * 2; }, fillOpacity: 0.3 }), ...(clickedSlider != "None" ? [ Plot.ruleY( customAmpi.map((d) => d.ccaa), { x1: (d) => dimensionDiffs[d][clickedSlider].avg, x2: (d) => dimensionDiffs[d][clickedSlider].dimVal, stroke: (d) => dimensionDiffs[d][clickedSlider].avg - dimensionDiffs[d][clickedSlider].dimVal, strokeWidth: 2 } ) ] : []), Plot.dotX( originalAmpi.filter((d) => d.year === view.year), { x: "val", y: "ccaa", r: 3, fill: "#797974", fillOpacity: 0.6, stroke: "#ffffff" } ), Plot.dotX( originalAmpi.filter((d) => d.dim === "index" && d.year === view.year), { x: "val", y: "ccaa", fill: "#ffffff", stroke: "#797974", strokeWidth: 2, strokeOpacity: 0.6, r: 5 } ), Plot.dotX(customAmpi, { x: "val", y: "ccaa", stroke: "#382f46", fill: (d) => { const original = originalAmpi.find( (o) => o.ccaa === d.ccaa && o.dim === "index" && o.year === view.year ); return (original.val - d.val) * 2; }, sort: { y: "x", reverse: true }, tip: { format: { y: true, x: true, fill: (d) => -(d / 2).toFixed(1) } }, r: 6 }), ...(clickedSlider != "None" ? [ Plot.dotX( customAmpi.map((d) => d.ccaa), { x: (d) => dimensionDiffs[d][clickedSlider].dimVal, y: Plot.identity, r: 4, fill: (d) => dimensionDiffs[d][clickedSlider].avg - dimensionDiffs[d][clickedSlider].dimVal, strokeOpacity: 1 } ) ] : []), Plot.text(customAmpi, { x: 80, y: "ccaa", text: "ccaa", textAnchor: "start", dx: 4, fontSize: 13 }) ] }); }33:T1c10,calcInsights = (year) => { const data = originalAmpi.filter((d) => d.year === year); const previousYearData = originalAmpi.filter( (d) => d.year === year - 1 && d.dim === "index" ); const totalCurrentYear = data.find( (d) => d.ccaa === "Total" && d.dim === "index" ); const totalPreviousYear = previousYearData.find( (d) => d.ccaa === "Total" && d.dim === "index" ); const change = totalCurrentYear && totalPreviousYear ? totalCurrentYear.val - totalPreviousYear.val : ""; let direction = change > 0 ? "ascendió" : "descendió"; let magnitude = Math.abs(change) < 0.1 ? "ligeramente" : Math.abs(change) > 0.6 ? "significativamente" : ""; const top = data .filter((d) => d.dim === "index" && d.ccaa !== "Total") .sort((a, b) => b.val - a.val) .slice(0, 3); const bottom = data .filter((d) => d.dim === "index" && d.ccaa !== "Total") .sort((a, b) => a.val - b.val) .slice(0, 3); // Fix for floating-point issues by rounding the change calculation const changes = data .filter((d) => d.dim === "index" && d.ccaa !== "Total") .map((d) => { const previous = previousYearData.find((prev) => prev.ccaa === d.ccaa); const change = previous ? (d.val - previous.val).toFixed(2) : 0; // Rounding to 2 decimal places return { ccaa: d.ccaa, change: parseFloat(change) }; // Parse back to number }); const posChange = changes .filter((d) => d.change > 0) .sort((a, b) => b.change - a.change) .slice(0, 2); const negChange = changes .filter((d) => d.change < 0) .sort((a, b) => a.change - b.change) .slice(0, 2); const lastYearTop = previousYearData .filter((d) => d.dim === "index" && d.ccaa !== "Total") .sort((a, b) => b.val - a.val) .slice(0, 3); const lastYearBottom = previousYearData .filter((d) => d.dim === "index" && d.ccaa !== "Total") .sort((a, b) => a.val - b.val) .slice(0, 3); const joinedTop = top.filter( (d) => !lastYearTop.some((p) => p.ccaa === d.ccaa) ); const droppedFromTop = lastYearTop.filter( (d) => !top.some((t) => t.ccaa === d.ccaa) ); const stayedAtTop = top.filter((d) => lastYearTop.some((p) => p.ccaa === d.ccaa) ); const joinedBottom = bottom.filter( (d) => !lastYearBottom.some((p) => p.ccaa === d.ccaa) ); const stayedAtBottom = bottom.filter((d) => lastYearBottom.some((p) => p.ccaa === d.ccaa) ); const formatList = (list) => { if (list.length === 1) { return list[0]; } if (list.length === 2) { return `${list[0]} y ${list[1]}`; } return `${list.slice(0, -1).join(", ")} y ${list[list.length - 1]}`; }; const addComments = (regions) => { return regions.map((region) => { const pos = posChange.find((r) => r.ccaa === region.ccaa); const neg = negChange.find((r) => r.ccaa === region.ccaa); if (pos) { return `${ ccaaNameDict[region.ccaa] }, una de las que más mejora,`; } if (neg) { return `${ ccaaNameDict[region.ccaa] }, una de las que más empeora,`; } return ccaaNameDict[region.ccaa]; }); }; const phraseStayed = (regions) => { if (!regions || regions.length === 0) return ""; // Handle empty case // Add comments to regions that improved or declined const regionsWithComments = addComments(regions, posChange, negChange); // Format the list with proper Spanish conjunctions const formattedRegions = formatList(regionsWithComments); // Return the final phrase for regions that stayed at the top return `${formattedRegions}`; }; const phraseJoined = (regions) => { if (!regions || regions.length === 0) return ""; // If no regions joined, return an empty string // Add comments to regions that improved or declined const regionsWithComments = addComments(regions, posChange, negChange); // Format the list with proper Spanish conjunctions const formattedRegions = formatList(regionsWithComments); // Return the final phrase for regions that joined the top return ` junto con ${formattedRegions}`; }; const phraseDropped = (regions) => { if (!regions || regions.length === 0) return ""; // If no regions joined, return an empty string // Add comments to regions that improved or declined const regionsWithComments = addComments(regions, posChange, negChange); // Format the list with proper Spanish conjunctions const formattedRegions = formatList(regionsWithComments); // Return the final phrase for regions that joined the top return `, en detrimento de ${formattedRegions}`; }; // Helper to determine if a region is already mentioned in another list const isAlreadyMentioned = (region) => { const allRegions = [ ...stayedAtTop, ...joinedTop, ...droppedFromTop, ...stayedAtBottom, ...joinedBottom ]; return allRegions.some((r) => r.ccaa === region.ccaa); }; // Function to create the sentence for positive changes const phrasePosChange = (posChange) => { // Filter out regions already mentioned const remainingPosChange = posChange.filter( (region) => !isAlreadyMentioned(region) ); // If no remaining regions, return an empty string if (remainingPosChange.length === 0) return ""; // Format the remaining regions const formattedRegions = formatList( remainingPosChange.map((r) => ccaaNameDict[r.ccaa]) ); // Singular or plural sentence construction if (remainingPosChange.length === 1) { return `${formattedRegions} es de las que más mejoran`; } else { return `${formattedRegions} son de las que más mejoran`; } }; // Function to create the sentence for negative changes const phraseNegChange = (negChange) => { // Filter out regions already mentioned const remainingNegChange = negChange.filter( (region) => !isAlreadyMentioned(region) ); // If no remaining regions, return an empty string if (remainingNegChange.length === 0) return ""; // Format the remaining regions const formattedRegions = formatList( remainingNegChange.map((r) => ccaaNameDict[r.ccaa]) ); // Singular or plural sentence construction if (remainingNegChange.length === 1) { return `, ${formattedRegions} es de las que más caen.`; } else { return `, ${formattedRegions} son de las que más caen.`; } }; let text = cleanUpString( `En ${year}, la calidad de vida en España ${direction} ${magnitude} respecto a ${ year - 1 }. ${phraseStayed(stayedAtTop)} continúan a la cabeza${phraseJoined( joinedTop )}${phraseDropped(droppedFromTop)}. ${phraseStayed( stayedAtBottom )} cierran la tabla${phraseJoined(joinedBottom)}. ${phrasePosChange( posChange )}${phraseNegChange(negChange)}` ); return { top, bottom, posChange, negChange, stayedAtTop, joinedTop, droppedFromTop, stayedAtBottom, joinedBottom, text }; }34:T44f,tilemap = (coords, __width) => { // Use d3.max to find the maximum x and y const maxX = d3.max(coords, (c) => c.x) + 1; const maxY = d3.max(coords, (c) => c.y) + 1; const _width = __width; // Calculate the size of each cell based on the total width const cellWidth = _width / maxX; return html`

${coords.map( (coord) => html`

${flowerChart( originalAmpi.filter( (d) => d.year === view.year && d.ccaa === ccaaIdDict[coord.id] ), "ccaa", "val", { range: dimList, domain: dimColors }, cellWidth / 2 )}

` )}

`; }35:T7be,flowerChart = (data, x, y, color, r) => { // Calculate the total number of segments (dimensions) const numSegments = data.length; // Define color scale const colorScale = d3.scaleOrdinal(color.range, color.domain); // Define padding between slices in radians (e.g., 0.02 radians) const slicePadding = 12; // Create a scale for the angular positioning (dimensions) const xScale = d3 .scaleBand() .domain(data.map((d) => d[x])) // Map each 'dim' for angular placement .range([0, 2 * Math.PI]) // Full circle range .align(0); // Align segments correctly // Create a scale for the radial positioning (values) const yScale = d3 .scaleLinear() .domain(d3.extent(originalAmpi.map((d) => d[y]))) // Adjust to your data's value range .range([r / 3, r]); // Map to radius // Define the arc const arc = d3 .arc() .innerRadius(r / 30) .outerRadius((d) => yScale(d[y])) // Radial length based on value .startAngle( (d, i) => ((i - 0.5) / numSegments) * 2 * Math.PI + slicePadding / d[y] ) // Angle start .endAngle( (d, i) => ((i - 0.5 + 1) / numSegments) * 2 * Math.PI - slicePadding / d[y] ) // Angle end .cornerRadius(r); // Create the svg const svg = d3 .create("svg") .attr("width", r * 2) .attr("height", r * 2); // Create a group to center the chart const container = svg .append("g") .attr("class", "container") .attr("transform", `translate(${r},${r})`); // Create the petals as path elements container .selectAll("path") .data(data) .join("path") .attr("d", arc) .attr("fill", (d) => colorScale(d.dim)); // Change color if desired container .selectAll("text") .data(data.filter((d) => d.dim === "dim1")) .join("text") .attr("dy", r - 6) .attr("text-anchor", "middle") .text((d) => d.ccaa) .attr("text-rendering", "optimizeLegibility") .attr("class", "label"); return svg.node(); }36:T6b0,filterLegend = (domain, range) => { const value = new Map(domain.map((d) => [d, false])); // Randomly select one region by default const randomIndex = Math.floor(Math.random() * domain.length); value.set(domain[randomIndex], true); const _set = () => set( node, [...value].filter((d) => d[1]).map((d) => d[0]) ); // Maximum allowed checkboxes const maxSelected = 20; const oninput = (e) => { const checkedCount = [...value.values()].filter((v) => v).length; if (e.target.checked && checkedCount >= maxSelected) { e.target.checked = false; // Prevent more than max selection return; } value.set(e.target.id, e.target.checked); updateDisabledState(); // Update the disabled state when checked/unchecked _set(); }; const updateDisabledState = () => { const checkedCount = [...value.values()].filter((v) => v).length; node.querySelectorAll("input[type='checkbox']").forEach((checkbox) => { if (!checkbox.checked && checkedCount >= maxSelected) { checkbox.disabled = true; // Disable unchecked checkboxes } else { checkbox.disabled = false; // Enable them when less than max is selected } }); }; const node = htl.html`

${domain.map( (d, i) => htl.html`

${d}

` )}

`; // Initial setting of the disabled state updateDisabledState(); _set(); return node; }37:T4e0,function calculateBorders(mosaic) { const rows = mosaic.length; const cols = mosaic[0].length; const borders = {}; // Helper function to check if a position is within bounds const isInBounds = (row, col) => row >= 0 && row < rows && col >= 0 && col < cols; // Possible directions for neighbors (top, bottom, left, right, and 4 diagonals) const directions = [ [-1, 0], // Top [1, 0], // Bottom [0, -1], // Left [0, 1], // Right [-1, -1], // Top-left [-1, 1], // Top-right [1, -1], // Bottom-left [1, 1] // Bottom-right ]; // Loop through the mosaic to calculate borders for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const cell = mosaic[row][col]; // Skip empty cells if (!cell) continue; borders[cell] = []; // Check all possible neighbors for (const [dRow, dCol] of directions) { const neighborRow = row + dRow; const neighborCol = col + dCol; if (isInBounds(neighborRow, neighborCol)) { const neighborCell = mosaic[neighborRow][neighborCol]; if (neighborCell) { borders[cell].push(neighborCell); } } } } } return borders; }38:T633,function compareBorders(expected, actual) { const missingNeighbors = {}; const wrongNeighbors = {}; const checkedPairs = new Set(); // To track already compared pairs // Helper function to find differences between two arrays const arrayDifference = (arr1, arr2) => arr1.filter((x) => !arr2.includes(x)); // Helper function to create unique pairs to avoid double counting const createPair = (cell1, cell2) => [cell1, cell2].sort().join("-"); // Iterate over the expected dictionary for (const cell in expected) { if (expected.hasOwnProperty(cell)) { const expectedNeighbors = expected[cell]; const actualNeighbors = actual[cell] || []; // Find missing neighbors (in expected but not in actual) const missing = arrayDifference(expectedNeighbors, actualNeighbors); missing.forEach((neighbor) => { const pair = createPair(cell, neighbor); if (!checkedPairs.has(pair)) { missingNeighbors[cell] = missingNeighbors[cell] || []; missingNeighbors[cell].push(neighbor); checkedPairs.add(pair); } }); // Find wrong neighbors (in actual but not in expected) const wrong = arrayDifference(actualNeighbors, expectedNeighbors); wrong.forEach((neighbor) => { const pair = createPair(cell, neighbor); if (!checkedPairs.has(pair)) { wrongNeighbors[cell] = wrongNeighbors[cell] || []; wrongNeighbors[cell].push(neighbor); checkedPairs.add(pair); } }); } } return { missingNeighbors, wrongNeighbors }; }39:[{"id":"e33ac7d1220218a048ee51b5a02e70406eb7a71adde5fcf1345d4303529913764a450058cf88e015c751b3a8ee2cc86b079f496463e3c46422f1b1243183960e","href":"https://static.observableusercontent.com/files/e33ac7d1220218a048ee51b5a02e70406eb7a71adde5fcf1345d4303529913764a450058cf88e015c751b3a8ee2cc86b079f496463e3c46422f1b1243183960e","name":"Screenshot 2024-09-14 at 10.22.22.png","type":"image/png","lastModified":1726302159432.188,"size":2344157},{"id":"611a8ac4a75e68fa5e2253986793ba9b3bb0eb71a0ff1d4d21d5a2b71b9931213847cd3d7b833b5f8dda2e7520b8bf708d96c98e71192cc7bc25d7af2c9cc4ee","href":"https://static.observableusercontent.com/files/611a8ac4a75e68fa5e2253986793ba9b3bb0eb71a0ff1d4d21d5a2b71b9931213847cd3d7b833b5f8dda2e7520b8bf708d96c98e71192cc7bc25d7af2c9cc4ee","name":"imcv@1.json","type":"application/json","lastModified":1729672899090.433,"size":198520},{"id":"ad778c6b7d971bbe5ae6cf9c5bc48a5960371cd318de7f062fb13070bb870143fb13ca4b31494299ec20586dfd99ce8b4292119bb087901b585f856f33d4d08b","href":"https://static.observableusercontent.com/files/ad778c6b7d971bbe5ae6cf9c5bc48a5960371cd318de7f062fb13070bb870143fb13ca4b31494299ec20586dfd99ce8b4292119bb087901b585f856f33d4d08b","name":"imcv-detail.json","type":"application/json","lastModified":1729192499633.72,"size":75693},{"id":"19054c39f3a70191c130b39d9be1e90a933bb7516b70a60028e266a7d4e00ab8857b3efedfeafa55fe140481c3373294a6c0b19e57d487bd8bdfa6a814ce990e","href":"https://static.observableusercontent.com/files/19054c39f3a70191c130b39d9be1e90a933bb7516b70a60028e266a7d4e00ab8857b3efedfeafa55fe140481c3373294a6c0b19e57d487bd8bdfa6a814ce990e","name":"Screenshot 2024-10-11 at 16.28.30.png","type":"image/png","lastModified":1728656918401.084,"size":36135},{"id":"d1289aa1da3ea0601a41afa2eda8bee4b12c337be194a7def2f95a4ec20885f8834b148b29f1b42d9efad3f5ce83bda297c00900fbffac818bfdc15565820788","href":"https://static.observableusercontent.com/files/d1289aa1da3ea0601a41afa2eda8bee4b12c337be194a7def2f95a4ec20885f8834b148b29f1b42d9efad3f5ce83bda297c00900fbffac818bfdc15565820788","name":"structure@1.png","type":"image/png","lastModified":1726420549399.525,"size":990746}] 2f:{"title":"Remaking Spain's Quality of Life Index by INE","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":365,"value":"screenshotINE = FileAttachment(\"Screenshot 2024-09-14 at 10.22.22.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"---\n## We _looove_ flower charts\nThe main visualization device is a collection of **multicolored flowers**, one for each Spanish region. On every flower, each petal represents one of the nine dimensions of the index, with its length —and thickness— representing the value of that dimension for the region.\n\nIt's based on the 2013 visualization of the [OECD Better Life Index](https://www.oecdbetterlifeindex.org/), by [Moritz Stefaner in collaboration with Raureif and Dominikus Baur](https://truth-and-beauty.net/projects/oecd-better-life-index). (I guess the concept itself for the index is inspired by the OECD index.)\n\nWe're _not_ redesigning the flower; we just cleaned it up, keeping the colors and shape. Since we're using D3 instead of Tableau—what INE used in the original dashboard—we have finer control over the aesthetics of the figures.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"viewof view = Inputs.form({\n year: Inputs.range(d3.extent(originalAmpi.map((d) => d.year)), {\n label: \"Year\",\n step: 1,\n value: 2022\n }),\n ccaa: Inputs.select(ccaaList, { label: \"Region\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"flowerChart(\n originalAmpi.filter((d) => d.year === view.year && d.ccaa === view.ccaa),\n \"ccaa\",\n \"val\",\n { range: dimList, domain: dimColors },\n width / 12\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"---\n## We also _looove_ tile grid maps\nWe've proposed a slightly different overview, with the top arranged geographically instead of sorted by values like in the original dashboard. We're doing that because we've brought in the second dashboard —in which you can manipulate the weight of each dimension— to the bottom and you can already play with the sorting there.","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"tilemap(spainTileCoords, 840 || width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"Tile grid maps are a fascinating visual device and an [obsession of ours](https://github.com/fndvit/barfi).\n\nFor this map, we created multiple iterations of the mosaic manually and programmatically, and checked the tiles' neighbors against the real geographic neighbors. The grid above was the most accurate —i.e. the one with the most correct expected neighbors. It's missing four expected borders: Castile and León with Galicia, Aragón, and Navarre, and Castilla-La Mancha with Extremadura; and it has 10 fantasy borders.","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"---\n## The trends\nThe line charts in the bottom half of the dashboard are filtered by a menu that functions as a legend. The charts show the trends for every dimension composing the index, and you can compare that trend across as many or as few regions as you like.\n\nWe tweaked [Toph Tucker's interactive plot legend](https://observablehq.com/@tophtucker/interactive-plot-legend) to cap the number of regions you can select to a handful to avoid the **[multicolored knitted sweater effect](https://www.westknits.com/products/rain-or-shine-sweater)**.)\n\nThere's a compromise here, one that we'd love to address in the future. We have two options: either a 20-color categorical scale (which is madness) or a 6-color scale —our limit of active lines, which will mean a region, like Galicia, can be brown, blue, or violet, depending on which order it was selected. Because consistency was more critical, **we chose madness**.","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"viewof ccaa = filterLegend(\n ccaaList.filter((d) => d !== \"Total\"),\n cat.filter((d) => d !== \"#797974\")\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"Plot.plot({\n width,\n height: 150,\n color: {\n domain: ccaaList,\n range: cat\n },\n fx: { label: null },\n marks: [\n Plot.lineY(\n originalAmpi.filter((d) => ccaa.includes(d.ccaa)),\n {\n fx: \"dim\",\n stroke: \"ccaa\",\n x: \"year\",\n y: \"val\",\n tip: true\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"Another option would be a `Select` input and a separate `Plot.legend` that only shows the selected regions, but we think the option above is more user-friendly.","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"viewof ccaaSelect = Inputs.select(ccaaList, { multiple: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"cat = [\n \"#61b0ff\", // Light Blue\n \"#3b5fc0\", // Medium Blue\n \"#01819e\", // Dark Cyan\n \"#8cc8b9\", // Teal\n \"#69cf77\", // Light Green\n \"#5ca34b\", // Green\n \"#ffd754\", // Yellow\n \"#b88c2e\", // Dark Gold\n \"#ff9c38\", // Orange\n \"#ed393f\", // Red\n \"#912734\", // Dark Red\n \"#bf016f\", // Magenta\n \"#f794b9\", // Pink\n \"#af2fba\", // Dark Magenta\n \"#a160af\", // Purple\n \"#5f249e\", // Dark Purple\n \"#382f46\", // Dark Grey-Blue\n \"#605152\", // Grey-Brown\n \"#797974\", // Medium Grey\n \"#c7c1bf\" // Light Grey\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"Plot.plot({\n width,\n x: { type: \"band\", domain: \"ABCDEFGHIJKLMNOPQRST\" },\n color: {\n domain: \"ABCDEFGHIJKLMNOPQRST\",\n range: cat\n },\n marks: [\n Plot.cell(\"ABCDEFGHIJKLMNOPQRST\", {\n x: Plot.identity,\n fill: Plot.identity,\n stroke: (d, i) =>\n chroma.contrast(cat[i], \"#f0f0f0\") < 1.5\n ? chroma(cat[i]).darken(1.75).hex()\n : chroma(cat[i]).darken(1.2).hex()\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"---\n## Make your own Quality of Life Index\nINE also created a second dashboard, which we brought to the bottom of our data app instead of keeping it separate. In it, you can change the weight of the different dimensions of the index, giving more or less importance to the different aspects.\n\nInteracting with the different sliders, modifies the index and the order of the regions.\n\nThe original visualization is a bar chart with the bars reacting to the changes in weights, and red dots as visual memory of the unmodified index.","pinned":false,"hidden":false,"mode":"md"},{"id":410,"value":"Plot.plot({\n marginLeft: 4,\n width,\n x: {\n domain: d3.extent(\n originalAmpi.filter((d) => d.year === view.year),\n (d) => d.val\n ),\n axis: null\n },\n marks: [\n Plot.barX(customAmpi, {\n x: \"val\",\n y: \"ccaa\",\n fill: (d) => (d.ccaa === \"Total\" ? \"#447598\" : \"#a0ccce\"),\n sort: { y: \"x\", reverse: true },\n tip: true\n }),\n Plot.dotX(\n originalAmpi.filter((d) => d.dim === \"index\" && d.year === view.year),\n {\n x: \"val\",\n y: \"ccaa\",\n fill: \"#9f273c\",\n sort: { y: \"x\", reverse: true },\n r: 5\n }\n ),\n Plot.axisY({\n label: \"\",\n fill: (d) => (d === \"Total\" ? \"white\" : \"black\"),\n textAnchor: \"start\",\n tickSize: 0,\n dx: 14\n }),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"This is the only visual that we're redesigning. Instead of the original bar charts, we're using a richer visual device.\n\nTK TK A viz that shows each dimension, the custom weighted average, and the original average. Still wondering if I should do ticks or dots or some other mark ... ","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"viewof weights = Inputs.form(\n d3.range(0, 9).map((d) => {\n const slider = Inputs.range([1, 10], {\n label: dimDict[dimList[d]],\n step: 1,\n value: 1\n });\n\n slider.addEventListener(\"mousedown\", (event) => {\n mutable clickedSlider = dimList[d];\n });\n\n slider.addEventListener(\"mouseup\", (event) => {\n mutable clickedSlider = \"None\";\n });\n\n return slider;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"Since this is a complex chart to interpret, we'd need a nice key explaining all its elements.","pinned":false,"hidden":false,"mode":"md"},{"id":1657,"value":"screenshot20241011At162830 = FileAttachment(\n \"Screenshot 2024-10-11 at 16.28.30.png\"\n).image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"legend = html`

\n ${Plot.legend({\n color: {\n type: \"diverging\",\n domain: [-5, 5],\n range: slopeColors\n },\n width: 300,\n ticks: 0\n })}\n

\n -\n

\n +\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"htl.html`\n

\n ${legend}\n ${screenshot20241011At162830}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"combinedChart = html`\n

${slopeChart()}

${pointChart()}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"---\n## The structure\n","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"structure = FileAttachment(\"structure@1.png\").image({\n width: 720 || width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"---\n## Sparkbars\n\nIf we implement the region pages we can try to visualize each subdimension in a small chart.","pinned":false,"hidden":false,"mode":"md"},{"id":1950,"value":"viewof page = Inputs.form({\n ccaa: Inputs.select(ccaaList, { label: \"Select a region\" }),\n dim: Inputs.select(dimList, {\n label: \"Select a dimension\",\n format: (d) => dimDict[d]\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"Plot.plot({\n width: 240,\n x: { ticks: \"\", label: null },\n y: { ticks: \"\", label: null },\n marks: [\n Plot.barY(\n imcvDetail.filter((d) => d.dim === page.dim),\n {\n x: \"ccaa\",\n y: \"value\",\n fy: \"subdim\",\n tip: true,\n sort: { x: \"y\" },\n r: 3,\n fill: (d) => (d.ccaa === page.ccaa ? \"#000\" : \"#ded4d6\")\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"---\n## Future work\nSome things we'd like to play with or improve:\n\n- Make petal shapes based on above/below average _a la_ [Film Flowers (by Shirley Wu)](https://shirleywu.studio/filmflowers/) to highlight the difference between flowers.\n- Test alternative trend visualizations.\n- Add region pages with rank charts by dimension, similar to the [OECD index](https://www.oecdbetterlifeindex.org/countries/poland/).","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"---\n### Data, libraries and functions","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"slopeChart = () => {\n return Plot.plot({\n width: width / 8,\n height: 800,\n marginLeft: 0,\n marginRight: 10,\n marginBottom: 40,\n marginTop: 40,\n x: {\n axis: null,\n domain: [\"initial\", \"final\"],\n type: \"ordinal\",\n inset: 6,\n label: null\n },\n y: { axis: null, inset: 20, reverse: true },\n marks: [\n Plot.line(slopePositions, {\n x: \"stage\",\n y: \"position\",\n z: \"ccaa\",\n stroke: \"#c7c1bf\",\n strokeWidth: (d) => {\n return Math.abs(getCCAADiff(d.ccaa) / 2) + 2;\n },\n strokeOpacity: 0.5\n }),\n Plot.dot(slopePositions, {\n x: \"stage\",\n y: \"position\",\n z: \"ccaa\",\n r: 4,\n fill: \"#c7c1bf\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"slopeColors = [\n \"#ed393f\",\n \"#f67066\",\n \"#fa9b8f\",\n \"#f8c4bb\",\n \"#efece8\",\n \"#c8c6df\",\n \"#9fa2d5\",\n \"#7380cb\",\n \"#3b5fc0\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"dimensionDiffs = {\n const result = {};\n for (const [key, entries] of Object.entries(groupedByYearAndRegion)) {\n const ccaaValues = {};\n entries.forEach((obj) => {\n const avg = customAmpi.find((p) => p.ccaa == key).val;\n const dimVal = obj.val;\n ccaaValues[obj.dim] = {\n avg: avg,\n dimVal: dimVal,\n diff: avg - dimVal\n };\n });\n result[key] = ccaaValues;\n }\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1109,"value":"function ruleYColorScale(ccaa, avg, dimVal) {\n if (clickedSlider != \"None\") {\n let maxDiff = 0;\n for (const [key, value] of Object.entries(dimensionDiffs)) {\n if (Math.abs(value[clickedSlider].diff) > maxDiff) {\n maxDiff = Math.abs(value[clickedSlider].diff);\n }\n }\n\n return d3\n .scaleDiverging()\n .domain([avg - 5, avg, avg + 5])\n .interpolator(d3.interpolateRgbBasis(slopeColors))(dimVal);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"slopeColorScheme = d3.scaleDiverging(\n [-5, 0, 5],\n d3.interpolateRgbBasis(slopeColors)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"slopePositions = {\n const finalPositionsSorted = customAmpi.sort((a, b) => b.val - a.val);\n\n const result = initialScores\n .sort((a, b) => b.val - a.val)\n .reduce((acc, cur, i) => {\n const itemA = {\n ccaa: cur.ccaa,\n stage: \"initial\",\n position: i + 1\n };\n const itemB = {\n ccaa: cur.ccaa,\n stage: \"final\",\n position: finalPositionsSorted.findIndex((i) => i.ccaa === cur.ccaa) + 1\n };\n return acc.concat([itemA, itemB]);\n }, []);\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"function getCCAADiff(ccaa) {\n const ini = slopePositions.find(\n (p) => p.ccaa == ccaa && p.stage == \"initial\"\n );\n const end = slopePositions.find((p) => p.ccaa == ccaa && p.stage == \"final\");\n\n return ini.position - end.position;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"mutable clickedSlider = \"None\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"initialScores = Object.keys(groupedByYearAndRegion).map((region) => {\n const regionData = groupedByYearAndRegion[region];\n const sum = regionData.reduce((total, curr) => total + curr.val, 0);\n return { ccaa: region, val: sum };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1694,"value":"insights = {\n const extent = d3.extent(originalAmpi.map((d) => d.year));\n const years = d3.range(extent[0], extent[1] + 1);\n const calc = years.reduce((acc, year) => {\n acc[year] = calcInsights(year).text; // Add year as key, text as value\n return acc;\n }, {}); // Initial value is an empty object\n\n return calc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"calcInsights(2023).text","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"ccaaNameDict = ({\n \"Total\": \"Total\",\n \"Andalucía\":\"Andalucía\",\n \"Aragón\": \"Aragón\",\n \"Asturias, Principado de\": \"Asturias\",\n \"Balears, Illes\": \"Baleares\",\n \"Canarias\": \"Canarias\",\n \"Cantabria\": \"Cantabria\",\n \"Castilla y León\": \"Castilla y León\",\n \"Castilla - La Mancha\": \"Castilla-La Mancha\",\n \"Cataluña\": \"Cataluña\",\n \"Comunitat Valenciana\": \"Comunitat Valenciana\",\n \"Extremadura\": \"Extremadura\", \n \"Galicia\": \"Galicia\",\n \"Madrid, Comunidad de\": \"Madrid\",\n \"Murcia, Región de\": \"Murcia\", \n \"Navarra, Comunidad Foral de\": \"Navarra\",\n \"País Vasco\": \"País Vasco\",\n \"Rioja, La\": \"La Rioja\",\n \"Ceuta\": \"Ceuta\",\n \"Melilla\": \"Melilla\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"cleanUpString = (text) => {\n // Replace any occurrence of '. ,' with a period\n let cleanedText = text.replace(/\\. ,/g, \".\");\n\n // Replace any occurrence of ',,' with a single comma\n cleanedText = cleanedText.replace(/,,/g, \",\");\n\n cleanedText = cleanedText.replace(/,. /g, \". \");\n\n // Replace any occurrence of '. .' with a single period\n cleanedText = cleanedText.replace(/\\. \\./g, \".\");\n\n // Replace any occurrence of ', .' with a period\n cleanedText = cleanedText.replace(/, \\./g, \".\");\n\n // Trim any extra spaces around punctuation marks\n cleanedText = cleanedText.replace(/\\s+([.,])/g, \"$1\");\n\n return cleanedText;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"// ampi = FileAttachment(\"ampi.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"originalAmpi.find((d) => d.dim === \"dim2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"viewof table = Inputs.table(\n originalAmpi.map((d) => ({\n fecha: d.year.toFixed(0),\n ccaa: ccaaNameDict[d.ccaa],\n dim: dimDict[d.dim],\n value: d.val\n }))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1940,"value":"originalAmpi.find(\n (d) =>\n d.year === 2022 &&\n d.dim === \"index\" &&\n d.ccaa === \"Navarra, Comunidad Foral de\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"// originalAmpi = avgDim(ampi)","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"avgDim = (data) => {\n // Group data by year and ccaa (region)\n const groupedData = data.reduce((acc, { year, ccaa, dim, val }) => {\n const key = `${year}-${ccaa}`;\n if (!acc[key]) {\n acc[key] = { year, ccaa, values: [] };\n }\n acc[key].values.push(val);\n return acc;\n }, {});\n\n // Calculate the index for each year and region and add it to the data\n const indexData = Object.values(groupedData).map(({ year, ccaa, values }) => {\n const average = values.reduce((sum, val) => sum + val, 0) / values.length;\n return { year, ccaa, dim: \"index\", val: Math.round(average * 100) / 100 }; // Round to 2 decimals\n });\n\n // Return the updated data with the calculated index values added\n return [...data, ...indexData];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"customAmpi = {\n const custom = Object.keys(groupedByYearAndRegion).map((region) => {\n const regionData = groupedByYearAndRegion[region];\n\n const { weightedSum, totalMultiplier } = regionData.reduce(\n (totals, curr) => {\n const dimIndex = parseInt(curr.dim.replace(\"dim\", \"\")) - 1;\n const multiplier = weights[dimIndex];\n totals.weightedSum += curr.val * multiplier;\n totals.totalMultiplier += multiplier;\n return totals;\n },\n { weightedSum: 0, totalMultiplier: 0 }\n );\n\n const weightedAverage = weightedSum / totalMultiplier;\n\n return { ccaa: region, val: weightedAverage };\n });\n\n return custom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"imcvDetailRaw = FileAttachment(\"imcv-detail.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1965,"value":"imcvDetail = imcvDetailRaw.map((d) => {\n d.subdim = d.dim;\n d.dim = d.dim.substring(0, 4);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"groupedByYearAndRegion = {\n const year = view.year;\n const filteredData = originalAmpi.filter((item) => item.year === year);\n\n const groupedByRegion = filteredData.reduce((acc, curr) => {\n if (!acc[curr.ccaa]) {\n acc[curr.ccaa] = [];\n }\n acc[curr.ccaa].push(curr);\n return acc;\n }, {});\n\n return groupedByRegion;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"ccaaList = [...new Set(originalAmpi.map((d) => d.ccaa))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"ccaaIdDict = ({\"ES\": \"Total\",\n\"AN\": \"Andalucía\",\n\"AR\": \"Aragón\",\n\"AS\": \"Asturias, Principado de\",\n\"IB\": \"Balears, Illes\",\n\"CN\": \"Canarias\",\n\"CB\": \"Cantabria\",\n\"CL\": \"Castilla y León\",\n\"CM\": \"Castilla - La Mancha\",\n\"CT\": \"Cataluña\",\n\"VC\": \"Comunitat Valenciana\",\n\"EX\": \"Extremadura\",\n\"GA\": \"Galicia\",\n\"MD\": \"Madrid, Comunidad de\",\n\"MC\": \"Murcia, Región de\",\n\"NC\": \"Navarra, Comunidad Foral de\",\n\"PV\": \"País Vasco\",\n\"RI\": \"Rioja, La\",\n\"CE\": \"Ceuta\",\n\"ML\": \"Melilla\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"dimList = [...new Set(originalAmpi.map((d) => d.dim))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"dimColors = [\n \"#a87c9f\",\n \"#e49243\",\n \"#6ba059\",\n \"#84b5b2\",\n \"#c67794\",\n \"#5877a3\",\n \"#eccf73\",\n \"#9bcf85\",\n \"#f1c2d2\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"dimDict = ({\n dim1: \"Condiciones materiales de vida\",\n dim2: \"Trabajo\",\n dim3: \"Salud\",\n dim4: \"Educación\",\n dim5: \"Ocio y relaciones sociales\",\n dim6: \"Seguridad física y personal\",\n dim7: \"Gobernanza y derechos básicos\",\n dim8: \"Entorno y medioambiente\",\n dim9: \"Experiencia general de la vida\",\n index: \"Calidad de vida global\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"spainTileCoords = [\n { id: \"GA\", x: 0, y: 0 },\n { id: \"AS\", x: 1, y: 0 },\n { id: \"CB\", x: 2, y: 0 },\n { id: \"PV\", x: 3, y: 0 },\n { id: \"RI\", x: 3, y: 1 },\n { id: \"NC\", x: 4, y: 0 },\n { id: \"AR\", x: 4, y: 1 },\n { id: \"CT\", x: 5, y: 1 },\n { id: \"CL\", x: 2, y: 1 },\n { id: \"CM\", x: 3, y: 2 },\n { id: \"MD\", x: 2, y: 2 },\n { id: \"EX\", x: 1, y: 2 },\n { id: \"VC\", x: 4, y: 2 },\n { id: \"MC\", x: 3, y: 3 },\n { id: \"AN\", x: 2, y: 3 },\n { id: \"IB\", x: 5, y: 3 },\n { id: \"CN\", x: 0, y: 4 },\n { id: \"CE\", x: 2, y: 4 },\n { id: \"ML\", x: 3, y: 4 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"import { occlusionY } from \"@observablehq/plot-slope-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":888,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"mosaic = [\n [\"GA\", \"AS\", \"CB\", \"PV\", \"NC\", \"\"],\n [\"\", \"\", \"CL\", \"RI\", \"AR\", \"CT\"],\n [\"\", \"EX\", \"MD\", \"CM\", \"VC\", \"\"],\n [\"\", \"\", \"AN\", \"MU\", \"\", \"\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"mosaicBorders = calculateBorders(mosaic)","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"borders = ({\n GA: [\"AS\", \"CL\"],\n AS: [\"GA\", \"CL\", \"CB\"],\n CB: [\"AS\", \"CL\", \"PV\"],\n PV: [\"CB\", \"NC\", \"RI\", \"CL\"],\n NC: [\"PV\", \"RI\", \"AR\"],\n RI: [\"PV\", \"CL\", \"NC\", \"AR\"],\n AR: [\"NC\", \"RI\", \"CL\", \"CT\", \"VC\", \"CM\"],\n CL: [\"GA\", \"AS\", \"CB\", \"PV\", \"RI\", \"NC\", \"AR\", \"MD\", \"EX\", \"CM\"],\n MD: [\"CL\", \"CM\"],\n CM: [\"MD\", \"CL\", \"EX\", \"VC\", \"MU\", \"AR\"],\n VC: [\"AR\", \"CM\", \"MU\", \"CT\"],\n MU: [\"VC\", \"CM\", \"AN\"],\n CT: [\"AR\", \"VC\"],\n EX: [\"CL\", \"CM\", \"AN\"],\n AN: [\"EX\", \"MU\", \"CM\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"compareBorders(borders, mosaicBorders)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"import { chroma } from \"@gka/chroma-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"originalAmpi = FileAttachment(\"imcv@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}