31:T5d7,chart = { const chart = await html`

${dataLocale[languageSelector].title}

${viewof map}

${ map.access ? htl.html`

La sanidad pública cubre la prueba en ${map.region_code}: ${map.region_name} desde ${map.date}.

${dataLocale[languageSelector].cases}

${map.cases}.

${dataLocale[languageSelector].numberTests}

${map.tests}.

` : htl.html`

La sanidad pública no cubre la prueba en ${map.region_code}: ${map.region_name}.

` }

`; return chart; }32:T1198,viewof map = { let myRegion = mutableRegion; // Embeding and using and external SVG file // https://observablehq.com/@mbostock/manipulating-svg-files // Load contents of the SVG file as a string let text = await FileAttachment("ES-CCAA_desktop-40x400-7.svg").text(); // Convert that string into a Document by parsing it as SVG const document = new DOMParser().parseFromString(text, "image/svg+xml"); // To extract the SVG element, we use document.documentElement. We also want to remove this SVG element from its document (the one created by DOMParser) so that when we return it from the cell it doesn’t have a parent, and thus the inspector will display it: if you return an element that already has a parent, the inspector will display it as Element {} to avoid removing the element from its current location. const svg = d3.select(document.documentElement).remove(); // Adjusting SVG size svg .attr("width", isMobile ? "280px" : `${Math.min(460, myWidth - 20)}px`) .attr("class", "cartogram"); //.attr("overflow", "visible"); //// // ASSIGNING CLASSES const mapGroup = svg.select("g#regions-group"); const regionsGroups = mapGroup.selectAll("g").attr("class", "region-group"); const context = svg.select("g#context"); context .selectAll("line") .style("stroke", contextColor) .style("stroke-width", contextWidth); // Geolocation const myRegionGroup = mapGroup .select(`g#${myRegion}`) .raise() .classed("myRegion", true); mapGroup.selectAll("circle").attr("class", "auxCircles").style("opacity", 0); mapGroup.selectAll("polygon").attr("class", "region-hex"); // Basic initialization styling (hiding things, etc) svg .select("g#regions-group") .selectAll("circle") .attr("class", "auxCircles") .style("opacity", 0); // DATA BINDING - to the groups // http://jsfiddle.net/gyc4hg59/5/ const myMap = svg.selectAll(".region-group").datum(function (d) { return { region_code: d3.select(this).attr("id") }; }); myMap.data(data, function (d, i) { return d.region_code; //return { ...d }; }); myMap.each(function (d, i) { const myCircle = d3.select(this).select(".auxCircles"); const xPosit = +myCircle.attr("cx"); const yPosit = +myCircle.attr("cy"); //console.log(xPosit, yPosit); //Adding x-y position to data, for convenience d["xGeo"] = xPosit; d["yGeo"] = yPosit; // Extra info from data // ... //console.log(this.id, d); }); // Hex: filling by data binded const nodes = regionsGroups.select(".region-hex"); nodes .style("fill-opacity", fillOpacityBasicState) .style("fill", (d) => (d.access ? colorAccess : colorNoAccess)); // Texts: region codes const textsNodes = regionsGroups .append("text") .text((d) => d.region_code) .attr("x", (d) => d.xGeo) .attr("y", (d) => d.yGeo) .style("font-size", isMobile ? "0.7rem" : "0.6rem") .style("text-anchor", "middle") .style("alignment-baseline", "central") .style("dominant-baseline", "central") .style("fill", (d) => (d.access ? colorAccessText : colorNoAccessText)); //////////////////// ///// CELL VALUE //////////////////// // SENDING INFO ABOUT SELECTED REGION let myRegionData = data.find((d) => d["region_code"] === myRegion); // Update map cell value const element = svg.node(); element.value = myRegionData; element.dispatchEvent(new CustomEvent("input")); //////////////////// ///// BASIC INTERACTIONS //////////////////// regionsGroups .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .on("click", handleMouseClick); // ON CLICK INTERACTION function handleMouseClick(event, d) { // Update region selection const myNewRegion = d.region_code; //console.log(myNewRegion); d3.selectAll(".myRegion").classed("myRegion", false); d3.selectAll(`.region-group[id=${myNewRegion}]`) .raise() .classed("myRegion", true); // SENDING INFO ABOUT SELECTED REGION const myNewRegionData = data.find( (d) => d["region_code"] === myNewRegion ).access; // Update my region data myRegion = myNewRegion; mutable mutableRegion = myRegion; // UPDATE CELL VALUE element.value = myNewRegionData; element.dispatchEvent(new CustomEvent("input")); } // Lastly we extract the SVG element from the selection with selection.node and return it for display. return svg.node(); }33:T792,chartStyle = html` `34:[{"id":"34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","href":"https://static.observableusercontent.com/files/34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","name":"ES-CCAA_desktop-40x400-7.svg","type":"image/svg+xml","lastModified":1681404232563.234,"size":54553},{"id":"527bc0398067b33dea688a964b1d01704196016795fd9381094fdde1cb30caeb1b7560abaeeb6116926a855ceeeb85da9c004df870a1b60d42a09b13429d988e","href":"https://static.observableusercontent.com/files/527bc0398067b33dea688a964b1d01704196016795fd9381094fdde1cb30caeb1b7560abaeeb6116926a855ceeeb85da9c004df870a1b60d42a09b13429d988e","name":"ES-CCAA_mobile-300-7.svg","type":"image/svg+xml","lastModified":1681404232539.577,"size":71311}] 2f:{"title":"Public healthcare access to noninvasive prenatal testing (NIPT / TPNI) in Spain","cells":[{"id":0,"value":"# Public healthcare access to noninvasive prenatal testing (NIPT / TPNI) in Spain\n\n.\n\nThe cartogram shows the access from the public healthcare system to non-invasive prenatal testing (NIPT in English, TPNI in Spanish) in the 19 Spanish administrative regions. The chart is reused from our work on on assisted reproductive techniques ([notebook](https://observablehq.com/@civio/648-cartogram-spain-v01) and [article](https://civio.es/medicamentalia/2021/11/16/diferencias-en-reproduccion-asistida-por-comunidades-autonomas/)). \n\n**Article published in Civio (18/04/23):** (Spanish)\n- Spanish version: [Cuatro comunidades no cubren la alternativa a la amniocentesis pese a la recomendación oficial a favor de su uso](https://civio.es/medicamentalia/2023/04/18/adn-fetal-sangre-materna-test-prenatales-no-invasivos/).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"---\n\n### HTML bits","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"---\n\n### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"fillOpacityBasicState = 0.85","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function onMouseOver(event, d, i) {\n d3.select(this).select(\".region-hex\").transition().style(\"fill-opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n d3.select(this)\n .select(\".region-hex\")\n .transition()\n .style(\"fill-opacity\", fillOpacityBasicState);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"// Adding date as parameter to avoid cache problems with any data update\ndateId = new Date().getTime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"dataURL = `https://data.civio.es/medicamentalia/genetic-tests-tpni/data-TPNI.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"dataRaw = await d3.csv(dataURL, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif = {\n const dataCleaning = dataRaw\n .map((d) => ({\n region_code: d.region_ISO,\n region_name: d.region_name,\n\n access: d.access === \"Sí\", // Returns true or false\n date: d.access_date,\n cases: d.cases,\n tests: d.tests_byYear\n }))\n // Sorting by region name alphabetically\n .sort((a, b) => d3.ascending(a.region_name, b.region_name));\n\n return dataCleaning;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = dataModif","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"// Reference: https://observablehq.com/@planemad/mapbox-static-image-generator\n// This one seems more accurate for Spanish regions\ngeoIp = await fetch(\"https://api.ipbase.com/v1/json/\")\n .then((res) => res.json())\n .catch(() => null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"myRegions = data.map((d) => d.region_code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"defaultRegion = \"MD\" // Setting Madrid as default (if reader is outside Spain)","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"myIPRegion = {\n if (geoIp && geoIp.country_code === \"ES\") {\n const geoIpDetected = geoIp.region_code;\n const isOnTheMap = myRegions.includes(geoIpDetected);\n\n // If the region detected is not in the map => mark our default region\n const myIPRegion = isOnTheMap ? geoIpDetected : defaultRegion;\n return myIPRegion;\n } else {\n // If the IP fetch fails or is seen from abroad returns our default region\n return defaultRegion;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"// https://observablehq.com/@observablehq/introduction-to-mutable-state\nmutable mutableRegion = myIPRegion","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dataLocale = ({\n es: {\n title: \"Acceso público al Test Prenatal No Invasivo (TPNI) en España\",\n\n cases: \"¿En qué casos se hace la prueba?\",\n numberTests: \"Nº pruebas anuales realizadas:\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"height = 500 // If we need 2 or more heights (for mobile, desktop, etc), we should create them in different cells (heightDesktop and hegihtMobile) and use one or the other depending on the flag variable isMobile","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 550","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 This 320 is just for testing. On production the devideSelection will always be \"desktop\", so it will take the Math.min(width, maxWidth) as expected","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"isMobile = width < mediaQueryLimit || deviceSelection === \"mobile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"colorAccess = \"#08A6BF\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"colorAccessText = colorNeutral(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"colorDepends = \"#967494\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"colorNoAccess = \"#EF2E61\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"colorNoAccessText = colorNeutral(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"contextColor = colorNeutral(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"contextWidth = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"{\n //variables to generate the code\n const variables = {\n url: \"https://graphs.civio.es/.../dist/\", // URL at Civio's repository `civio-graphs`.\n heightDesktop: \"\", //not necessary if there is only one height\n heightMobile: height,\n mediaQuery: mediaQueryLimit, //breakpoint\n lang: languageSelector,\n variableHeight: false //if there are two heights -> true, if there is only one -> false\n };\n\n return md`~~~html\n${codeToExportIframe(\n variables.url,\n variables.heightDesktop,\n variables.heightMobile,\n variables.mediaQuery,\n variables.lang,\n variables.variableHeight\n)}\n~~~\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}