31:T10e7,chart = { // Embeding and using and external SVG file // https://observablehq.com/@mbostock/manipulating-svg-files let text; // Load contents of the SVG file as a string if (myWidth < 459) { text = await FileAttachment("ART-V06_mobile-300x460.svg").text(); } else { text = await FileAttachment("ART-V06_desktop-460x460.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("id", "cartogram") .attr("width", `${Math.min(460, myWidth - 20)}px`) .style("display", "block") .style("margin", "0 auto"); // ASSIGNING CLASSES const mapGroup = svg.select("g#regions-group"); const regionsGroups = mapGroup.selectAll("g").attr("class", "region-group"); // Geolocation if (detectLocation) { const myCountryGroup = mapGroup .select(`g#${myCountry}`) .raise() .classed("myCountry", true); } mapGroup .selectAll("circle") .attr("class", "auxCircles") .style("opacity", 0) .call((el) => setTooltipEvent(el)); mapGroup .selectAll("polygon") .attr("class", "region-hex") .call((el) => setTooltipEvent(el)); // Show/hide context const context = svg.select("g#context"); context.style("opacity", showContextGrid ? 1 : 0); // DEFS elements: filter and patterns const defs = svg.append("defs"); defs .append("pattern") .attr("width", 4) .attr("height", 4) .attr("patternUnits", "userSpaceOnUse") .attr("id", "hatching") .append("path") .attr("d", "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2") .style("stroke", colorNeutral(100)) .style("strokeWidth", 1); // Basic initialization styling (hiding things, etc) svg .select("g#countries-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; }); myMap.each(function (d, i) { const myCircle = d3.select(this).select(".auxCircles"); const xPosit = +myCircle.attr("cx"); const yPosit = +myCircle.attr("cy"); // Adding x-y position to data, for convenience d["x"] = xPosit; d["y"] = yPosit; // Binding infants per national births percent d.ART_infants_per_national_births_percent = undefined; for (let i = 0; i < data.length; i++) { if (data[i].country_code === d.region_code) { d.ART_infants_per_national_births_percent = data[i].ART_infants_per_national_births_percent; d.region_name = data[i].country_name; d.national_births = data[i].national_births; d.ART_infants = data[i].ART_infants; break; } } }); const geometryClass = ".region-hex"; // Hex: filling by data binded regionsGroups .select(geometryClass) .style("fill", (d) => colorScale(d.ART_infants_per_national_births_percent)) .style("stroke", colorNeutral(0)) .style("stroke-width", "none"); // Texts: region codes regionsGroups .append("text") .text((d) => d.region_code) .attr("x", (d) => d.x) .attr("y", (d) => d.y) .style("font-size", isMobile ? "0.7rem" : "0.6rem") .style("text-anchor", "middle") .style("alignment-baseline", "central") .style("dominant-baseline", "central") .style("fill", colorNeutral(800)) .style("pointer-events", "none"); //.style("fill", colorNeutral(500)); // BASIC INTERACTIONS regionsGroups.style("cursor", "auto"); // Lastly we extract the SVG element from the selection with selection.node and return it for display. return svg.node(); }32:T65b,setTooltipEvent = (el) => { el.on("mouseover", function (ev, d) { const ART_infants_per_national_births_percent = formatterNumber( d.ART_infants_per_national_births_percent ); const ART_infants = formatterNumber(d.ART_infants); const national_births = formatterNumber(Math.round(d.national_births)); tooltip .html( `

${d.region_name}

${ ART_infants_per_national_births_percent !== "NaN" ? locale[languageSelector].tooltipHTML( ART_infants_per_national_births_percent, ART_infants, national_births ) : locale[languageSelector].noData }

` ) .style("visibility", "visible"); }) .on("mousemove", function (ev, d) { tooltip .style("z-index", "300") .style("top", function () { const cartogramDimensions = d3 .select("#cartogram") .node() .getBoundingClientRect(); return `${ ev.pageY < cartogramDimensions.height / 2 + cartogramDimensions.top ? ev.pageY - 10 : ev.pageY - tooltip.node().getBoundingClientRect().height + 10 }px`; }) .style("left", function () { return `${ ev.pageX + 5 < myWidth / 2 ? ev.pageX + 5 : ev.pageX - tooltip.node().getBoundingClientRect().width - 5 }px`; }) .style("pointer-events", "none"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); }); }33:T2232,locale = ({ es: { title: "Bebés nacidos por alguna técnica de reproducción asistida", source: "Fuente: ...", countries: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaiyán", AL: "Albania", AM: "Armenia", BY: "Bielorusia", BA: "Bosnia y Herzegovina", IS: "Islandia", KZ: "Kazajistán", MD: "Moldavia", ME: "Montenegro", RU: "Rusia", RS: "Serbia", MK: "Macedonia", GE: "Georgia", UA: "Ucrania", AT: "Austria", BE: "Bélgica", BG: "Bulgaria", HR: "Croacia", CZ: "Rep. Checa", DK: "Dinamarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", DE: "Alemania", EL: "Grecia", HU: "Hungría", IE: "Irlanda", IT: "Italia", LV: "Letonia", LT: "Lituania", LU: "Luxemburgo", MT: "Malta", NL: "Países Bajos", PL: "Polonia", PT: "Portugal", RO: "Rumanía", SK: "Eslovaquia", SI: "Eslovenia", ES: "España", SE: "Suecia", UK: "Reino Unido", CY: "Chipre", NO: "Noruega", CH: "Suiza", TR: "Turquía" }, tooltipHTML: ( ART_infants_per_national_births_percent, ART_infants, national_births ) => `En 2017, un ${ART_infants_per_national_births_percent}% de los niños nacieron mediante reproducción asistida: ${ART_infants} de ${national_births}.`, noData: "No hay datos", formatData: { decimal: ",", thousands: ".", grouping: [3], currency: ["", "\u00a0€"] } }, en: { title: "Babies born with some kind of assisted reproductive technology (ART)", source: "Source: ...", countries: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaijan", AT: "Austria", BE: "Belgium", BG: "Bulgaria", HR: "Croatia", CZ: "Czechia", DK: "Denmark", EE: "Estonia", FI: "Finland", FR: "France", DE: "Germany", EL: "Greece", HU: "Hungary", IE: "Ireland", IT: "Italy", LV: "Latvia", LT: "Lithuania", LU: "Luxembourg", MT: "Malta", NL: "Netherlands", PL: "Poland", PT: "Portugal", RO: "Romania", SK: "Slovakia", SI: "Slovenia", ES: "Spain", SE: "Sweden", UK: "United Kingdom", CY: "Cyprus", AM: "Armenia", BY: "Belarus", BA: "Bosnia and Herzegovina", IS: "Iceland", KZ: "Kazakhstan", MD: "Moldova", ME: "Montenegro", RU: "Russia", RS: "Serbia", MK: "Macedonia", GE: "Georgia", UA: "Ukraine", AT: "Austria", TR: "Turkey", CH: "Switzerland", NO: "Norway", AL: "Albania" }, tooltipHTML: ( ART_infants_per_national_births_percent, ART_infants, national_births ) => `In 2017, ${ART_infants_per_national_births_percent}% of children were born through assisted reproduction: ${ART_infants} out of ${national_births}.`, noData: "There is no data", formatData: { decimal: ".", thousands: ",", grouping: [3], currency: ["£", ""] } }, it: { title: "Bambini nati con qualsiasi tecnica di riproduzione assistita", source: "Source: ...", countries: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaijan", AT: "Austria", BE: "Belgio", BG: "Bulgaria", HR: "Croazia", CZ: "Cechia", DK: "Danimarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", DE: "Germania", EL: "Grecia", HU: "Ungheria", IE: "Irlanda", IT: "Italia", LV: "Lettonia", LT: "Lituania", MT: "Malta", NL: "Paesi Bassi", PL: "Polonia", PT: "Portogallo", RO: "Romania", SK: "Slovacchia", SI: "Slovenia", ES: "Spagna", SE: "Svezia", UK: "Regno Unito", CY: "Cipro", AL: "Albania", AM: "Armenia", BY: "Bielorussia", BA: "Bosnia Erzegovina", GE: "Georgia", IS: "Islanda", KZ: "Kazakistan", LU: "Lussemburgo", MK: "Macedonia", MD: "Moldova", ME: "Montenegro", NO: "Norvegia", RS: "Serbia", RU: "Russia", CH: "Svizzera", TR: "Turchia", UA: "Ucraina" }, tooltipHTML: ( ART_infants_per_national_births_percent, ART_infants, national_births ) => `Nel 2017, il ${ART_infants_per_national_births_percent}% dei bambini è nato tramite la riproduzione assistita: ${ART_infants} su ${national_births}.`, noData: "Non ci sono dati", formatData: { decimal: ",", thousands: ".", grouping: [3], currency: ["€", ""] } }, fr: { title: "Enfants conçus selon une technique de procréation assistée", source: "Source: ...", countries: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaïdjan", AL: "Albanie", AM: "Armènie", BY: "Biélorussie", BA: "Bosnie Herzégovine", IS: "Islande", KZ: "Kazakhstan", MD: "Moldavie", ME: "Monténégro", RU: "Russie", RS: "Serbie", MK: "Macédoine", GE: "Géorgie", UA: "Ukraine", AT: "L'Autriche", BE: "Belgique", BG: "Bulgarie", HR: "Croatie", CZ: "Tchéquie", DK: "Danemark", EE: "Estonie", FI: "Finlande", FR: "France", DE: "Allemagne", EL: "Grèce", HU: "Hongrie", IE: "Irlande", IT: "Italie", LV: "Lettonie", LT: "Lituanie", LU: "Luxembourg", MT: "Malte", NL: "Pays-Bas", PL: "Pologne", PT: "Portugal", RO: "Roumanie", SK: "Slovaquie", SI: "Slovénie", ES: "Espagne", SE: "Suède", UK: "Royaume-Uni", CY: "Chypre", NO: "Norvège", CH: "Suisse", TR: "Turquie" }, tooltipHTML: ( ART_infants_per_national_births_percent, ART_infants, national_births ) => `En 2017, ${ART_infants_per_national_births_percent}% des enfants nés ont été conçus par le biais de la PMA: ${ART_infants} sur ${national_births}.`, noData: "Aucune donnée disponible", formatData: { decimal: ",", thousands: "\u00a0", grouping: [3], currency: ["", "\u00a0€"], percent: "\u202f%" } }, el: { title: "Μωρά που γεννιούνται με οποιαδήποτε τεχνική υποβοηθούμενης αναπαραγωγής", countries: { UK: "Ηνωμένο Βασίλειο", SE: "Σουηδία", ES: "Ισπανία", SI: "Σλοβενία", SK: "Σλοβακία", RO: "Ρουμανία", PT: "Πορτογαλία", PL: "Πολωνία", NL: "Κάτω Χώρες", MT: "Μάλτα", LT: "Λιθουανία", LV: "Λετονία", IT: "Ιταλία", IE: "Ιρλανδία", HU: "Ουγγαρία", EL: "Ελλάδα", DE: "Γερμανία", FR: "Γαλλία", FI: "Φινλανδία", EE: "Εσθονία", DK: "Δανία", CZ: "Τσεχία", HR: "Κροατία", BG: "Βουλγαρία", BE: "Βέλγιο", AT: "Αυστρία", AL: "Αλβανία", AM: "Αρμενία", BY: "Λευκορωσία", BA: "Βοσνία και Ερζεγοβίνη", CY: "Κύπρος", GE: "Γεωργία", IS: "Ισλανδία", KZ: "Καζακστάν", LU: "Λουξεμβούργο", MK: "Βόρεια Μακεδονία", MD: "Μολδαβία", ME: "Μαυροβούνιο", NO: "Νορβηγία", RS: "Σερβία", RU: "Ρωσία", CH: "Ελβετία", TR: "Τουρκία", UA: "Ουκρανία", LI: "Λίχτενσταϊν", XK: "Κοσσυφοπέδιο", AZ: "Αζερμπαϊτζάν" }, tooltipHTML: ( ART_infants_per_national_births_percent, ART_infants, national_births ) => `Το 2017, το ${ART_infants_per_national_births_percent}% των παιδιών γεννήθηκαν μέσω υποβοηθούμενης αναπαραγωγής: ${ART_infants} από τα ${national_births}.`, noData: "Δεν υπάρχουν δεδομένα", formatData: { decimal: ",", thousands: ".", grouping: [3], currency: ["", "\u00a0€"] } } })34:[{"id":"3c980570139c47565dbac59fc84a7b6228d970689eb28fe5bb1a2bde8959589e924c8f9634a4127b996eeda624899802706714e02c416188ee7d7d94d9f90cfa","href":"https://static.observableusercontent.com/files/3c980570139c47565dbac59fc84a7b6228d970689eb28fe5bb1a2bde8959589e924c8f9634a4127b996eeda624899802706714e02c416188ee7d7d94d9f90cfa","name":"ART-V06_desktop-460x460.svg","type":"image/svg+xml","lastModified":1635408526714.329,"size":104380},{"id":"495f813d15f51b085b7001d248eab352d2dfd4293b1fdb34747b9267b72e0ac2a62669eaae41528662f5b17c5b7ce0327c51b390a73e6453a89a3ab774b477e8","href":"https://static.observableusercontent.com/files/495f813d15f51b085b7001d248eab352d2dfd4293b1fdb34747b9267b72e0ac2a62669eaae41528662f5b17c5b7ce0327c51b390a73e6453a89a3ab774b477e8","name":"ART-V06_mobile-300x460.svg","type":"image/svg+xml","lastModified":1635408526681.945,"size":94747},{"id":"45378ffd21136b96fda26769c90ed474328825d1b36e749b36e1e4973f532428fde173255edb028a4647318b648dca2ea7e68be1986abd1ccd5cb1eea054cee4","href":"https://static.observableusercontent.com/files/45378ffd21136b96fda26769c90ed474328825d1b36e749b36e1e4973f532428fde173255edb028a4647318b648dca2ea7e68be1986abd1ccd5cb1eea054cee4","name":"ART-v04_desktop-750x900.svg","type":"image/svg+xml","lastModified":1633359670110.191,"size":104536},{"id":"b9e141ae69d29974518b070049b85f497859906b21829394518de94b4665da60969875c9f6acf75c7e37d6cee1e5f419553d02f6429efe5486a5f78541cc3b58","href":"https://static.observableusercontent.com/files/b9e141ae69d29974518b070049b85f497859906b21829394518de94b4665da60969875c9f6acf75c7e37d6cee1e5f419553d02f6429efe5486a5f78541cc3b58","name":"ART-v04_mobile-320.svg","type":"image/svg+xml","lastModified":1633359670110.191,"size":43103}] 2f:{"title":"#645 Bebés nacidos por ART respecto al total de nacimientos","cells":[{"id":405,"value":"# #645 Bebés nacidos por ART respecto al total de nacimientos","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"md`\n- La implementación del _tooltip_ está basada en este [_notebook_](https://observablehq.com/@bsaienko/animated-bar-chart-with-tooltip)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"viewof languageSelector = Inputs.radio(Object.keys(locale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof noDataFillSelection = Inputs.radio([\"hatched\", \"solid\"], {\n label: \"Fill no data\",\n value: \"solid\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"viewof regionsGeometry = Inputs.radio([\"hexagon\", \"circle\"], {\n label: \"Regions geometry\",\n value: \"hexagon\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof showContextGrid = Inputs.toggle({\n label: \"Show context grid\",\n value: true // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"viewof detectLocation = Inputs.toggle({\n label: \"Detect user location\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"title = html`

${locale[languageSelector].title}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"legend = html`

${Legend(\n colorScale,\n {\n title: \"%\",\n tickFormat: (d) => `${d}%`\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\")\n .style(\"padding\", \"10px\")\n .style(\"background-color\", \"white\")\n .style(\"border-radius\", \"2px\")\n .style(\"-webkit-border-radius\", \"2px\")\n .style(\"-moz-border-radius\", \"2px\")\n .style(\"-webkit-box-shadow\", \"2px 2px 5px rgba(0, 0, 0, 0.2)\")\n .style(\"-moz-box-shadow\", \"2px 2px 5px rgba(0, 0, 0, 0.2)\")\n .style(\"box-shadow\", \"2px 2px 5px rgba(0, 0, 0, 0.2)\")\n .style(\"color\", \"black\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"14px\")\n .text(\"a simple tooltip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":956,"value":"dateId = new Date()\n .toLocaleDateString(\"de\", {\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\"\n })\n .replaceAll(/[:., ]/g, \"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"data = d3.csv(\n `https://data.civio.es/medicamentalia/access-ART/context_art_births_eu.csv?q=${dateId}`,\n (d) => {\n return {\n country_name: locale[languageSelector].countries[d.country_code],\n country_code: d.country_code,\n ART_infants: +d.ART_infants,\n national_births: +d.national_births_2017,\n ART_infants: +d.ART_infants_2017,\n ART_infants_per_national_births_percent:\n d.ART_infants_per_national_births_percent === \"n/a\"\n ? undefined\n : Math.round(+d.ART_infants_per_national_births_percent * 10) / 10,\n note: d.note\n };\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"maxWidth = 460","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"mediaQueryLimit = 459","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"myWidth = deviceSelection === \"desktop\" ? +Math.min(width, maxWidth) : 320 // 👈🏻 Just for testing","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"isMobile = myWidth < mediaQueryLimit","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"### Detect user location","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"Test01: Using https://freegeoip.app/","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"// Reference: https://observablehq.com/@planemad/mapbox-static-image-generator\n/*geoIp = await fetch(\"https://freegeoip.app/json/\")\n .then((res) => res.json())\n .catch(() => null)*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"Test02: Using https://freegeoip.live/json/","pinned":false,"hidden":false,"mode":"md"},{"id":1027,"value":"// Trying another IP service, as the previous one failed due to a CORS problem at some point after publishing the article\ngeoIp2 = await fetch(\"https://freegeoip.live/json/\")\n .then((res) => res.json())\n .catch(() => null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"myCountries = data.map((d) => d.country_code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1047,"value":"defaultCountry = \"ES\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"myCountry = {\n if (geoIp2) {\n const geoIpDetected = geoIp2.country_code;\n const isOnTheMap = myCountries.includes(geoIpDetected);\n\n // If the country detected is not in the map => mark our default country\n const myIPCountry = isOnTheMap ? geoIpDetected : defaultCountry;\n return myIPCountry;\n } else {\n // If the IP fetch fails, returns our default country\n return defaultCountry;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"colorScale = d3.scaleSequential(\n [\n d3.min(data, (d) => d.ART_infants_per_national_births_percent),\n d3.max(data, (d) => d.ART_infants_per_national_births_percent)\n ],\n [\"#F1FAFB\", \"#08A6BF\"]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"### Languages","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"formatterNumber = d3\n .formatLocale(locale[languageSelector].formatData)\n .format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md `### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"// Typography\nstyles = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"import { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}