31:T2739,viewof ageLegalMap = { let myRegion = mutableRegion; const chartId = "cartogramAgeLegal"; const dataToPaint = "ageLegalValues"; const data = datasetCCAA; ////////// // MAPS ///////// // Map totals to compute let legalAgeTotalYes = ""; let legalAgeTotalNo = ""; let legalAgeTotalDepends = ""; let legalAgeTotalNotAvailable = ""; ///// // For both Map01 and Map03 const minValue = "female_minAge"; const maxValue = "female_maxAge"; ////////// // COMMON STUFF ///////// // 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 (isMobile) { text = await FileAttachment("ES-CCAA_mobile-300@7.svg").text(); } else { 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", `${Math.min(460, myWidth - 20)}px`) .attr("width", isMobile ? "280px" : `${Math.min(460, myWidth - 20)}px`) .attr("id", chartId) .attr("class", "cartogram") .attr("overflow", "visible"); // 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); const defsStripes = defs .append("pattern") .attr("width", 8) .attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("id", "yesPartially"); defsStripes .append("rect") .attr("width", 8) .attr("height", 8) .attr("x", 0) .attr("x", 0) .attr("fill", colorAccess); defsStripes .append("path") .attr("d", "M-1,1 l4,-4 M0,8 l8,-8 M6,10 l4,-4") .style("stroke", colorNoAccess) .style("stroke-width", 3); // Unabling countries pattern // Following this online tool // https://svg-stripe-generator.web.app/ const unablePattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "unable"); unablePattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", "whitesmoke"); unablePattern .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", patternColor) .style("stroke-width", patternWidth); const noLimitsPattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) //.attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "noLimits"); noLimitsPattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorAccess); noLimitsPattern .append("line") .attr("x1", "0") .attr("x2", patternSize) .attr("y1", "0") .attr("y2", "0") .style("stroke", colorAccessDarker) .style("stroke-width", patternWidth); //Extra-barriers pattern const extraBarrierPattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternUnits", "userSpaceOnUse") .attr("id", "extraBarriers"); extraBarrierPattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorNoAccess); extraBarrierPattern .append("line") .attr("x1", "0") .attr("x2", patternSize) .attr("y1", "0") .attr("y2", "0") .style("stroke", colorNoAccessDarker) .style("stroke-width", patternWidth); //// // 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.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); // 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"); ////////// // MAP AGE LEGAL / AGE PUBLIC FUNDING ///////// nodes.style("fill", function (d) { // Both female and male constrains if (_isHetero) { //MISSING // Just female constrains // Possible answers: "NotAvailable", "Depends" or a number } else { if (d[maxValue] === "NotAvailable") { d["access"] = "NotAvailable"; return colorNotAvailable; } else if ( d[maxValue] === "Depends" && _femaleAgeSelector >= d[minValue] ) { d["access"] = "Depends"; return colorDepends; } else if ( (_femaleAgeSelector >= d[minValue] && _femaleAgeSelector < d[maxValue]) || (d[maxValue] === "Depends" && _femaleAgeSelector < d[maxValue]) ) { d["access"] = "Yes"; return colorAccess; } else { d["access"] = "No"; return colorNoAccess; } } }); nodes .filter((d) => d.region_code === "MD" || d.region_code === "IB") .style("fill", function (d) { // Change the data for this 2 regions, as have more restrictive notes d["access"] = "No"; return colorNoAccess; }); textsNodes.style("fill", function (d) { if (d.access === "NoLimits") { return colorAccessText; } else if (d.access === "No") { return colorNoAccessText; } else if (d.access === "Yes") { return colorAccessText; } else if (d.access === "Depends") { return colorDependsText; } else if (d.access === "NotAvailable") { return colorNotAvailableText; } }); //////////////////// ///// CELL VALUE //////////////////// // SENDING INFO ABOUT SELECTED REGION let myRegionAccessLegalAge = data.find((d) => d["region_code"] === myRegion) .access; // Counting totals legalAgeTotalYes = data.filter((d) => d.access === "Yes").length; legalAgeTotalNo = data.filter((d) => d.access === "No").length; legalAgeTotalDepends = data.filter((d) => d.access === "Depends").length; legalAgeTotalNotAvailable = data.filter((d) => d.access === "NotAvailable") .length; // Update map cell value const element = svg.node(); element.value = { myRegion, myRegionAccessLegalAge, legalAgeTotalYes, legalAgeTotalNo, legalAgeTotalDepends, legalAgeTotalNotAvailable }; element.dispatchEvent(new CustomEvent("input")); //////////////////// ///// BASIC INTERACTIONS //////////////////// regionsGroups .style("cursor", "pointer") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .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 myNewRegionAccessLegalAge = data.find( (d) => d["region_code"] === myNewRegion ).access; // Update my region data myRegion = myNewRegion; myRegionAccessLegalAge = myNewRegionAccessLegalAge; // TEST MUTABLE mutable mutableRegion = myRegion; // UPDATE CELL VALUE!! element.value = { myRegion, myRegionAccessLegalAge }; 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(); }32:T28e8,viewof maxCyclesMap = { let myRegion = mutableRegion; const chartId = "cartogramCycles"; const dataToPaint = "publicFundingCycles"; const data = datasetMaxCyclesCCAA; ////////// // MAPS ///////// // Map totals to compute let cyclesTotalSameNational = ""; let cyclesTotalMoreNational = ""; let cyclesTotalLessNational = ""; let cyclesTotalNotAvailable = ""; ////////// // COMMON STUFF ///////// // 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 (isMobile) { text = await FileAttachment("ES-CCAA_mobile-300@7.svg").text(); } else { 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", `${Math.min(460, myWidth - 20)}px`) .attr("width", isMobile ? "280px" : `${Math.min(460, myWidth - 20)}px`) .attr("id", chartId) .attr("class", "cartogram") .attr("overflow", "visible"); // 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); // Yes partially const defsStripes = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "yesPartially"); defsStripes .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorAccess); defsStripes .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", colorNoAccess) .style("stroke-width", patternWidth); // Unabling countries pattern // Following this online tool // https://svg-stripe-generator.web.app/ const unablePattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "unable"); unablePattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", "whitesmoke"); unablePattern .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", patternColor) .style("stroke-width", patternWidth); //No-limits age pattern const noLimitsPattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) //.attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "noLimits"); noLimitsPattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorAccess); noLimitsPattern .append("line") .attr("x1", "0") .attr("x2", patternSize) .attr("y1", "0") .attr("y2", "0") .style("stroke", colorAccessDarker) .style("stroke-width", patternWidth); //// // 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.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); // 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"); ////////// // MAP MAX.CYCLES ON PUBLIC ///////// const myField = _isInsemination ? "maxCyclesAI_viz" : "maxCyclesIVF_viz"; const myMax = _isInsemination ? inseminationNationalMax : inVitroNationalMax; nodes.style("fill", function (d) { const notAvailable = d[myField] === "NotAvailable"; const isEmpty = d[myField] === ""; const hasNumberLimit = typeof +d[myField] === "number"; const hasSameNationalLevel = hasNumberLimit && +d[myField] === myMax; const hasMoreRestrictions = hasNumberLimit && +d[myField] < myMax; const hasLessRestrictions = hasNumberLimit && +d[myField] > myMax; if (notAvailable || isEmpty) { d["access"] = "NotAvailable"; return colorNotAvailable; } else if (hasSameNationalLevel) { d["access"] = "Yes"; return colorAccess; } else if (hasMoreRestrictions) { d["access"] = "NoMore"; return colorNoAccess; } else if (hasLessRestrictions) { d["access"] = "YesLess"; return "url(#noLimits)"; } }); textsNodes.style("fill", function (d) { if (d.access === "NoPublicFunding") { return colorNoAccessText; } else if (d.access === "NoMore") { return colorNoAccessText; } else if (d.access === "Yes" || d.access === "YesLess") { return colorAccessText; } else if (d.access === "Depends") { return colorDependsText; } else if (d.access === "NotAvailable") { return colorNotAvailableText; } }); const cyclesGroup = regionsGroups.append("g").attr("class", "cycles-group"); cyclesGroup .selectAll("circle") .data((d) => (+d[myField] ? d3.range(+d[myField]) : "")) .join("circle") .attr("r", 1.5) .attr("cx", function (d, i) { const cx = d3 .select(this.parentNode.parentNode) .select(".auxCircles") .attr("cx"); return +cx; }) .attr("cy", function (d, i) { const cy = d3 .select(this.parentNode.parentNode) .select(".auxCircles") .attr("cy"); return +cy; }) .attr("transform", function (d, i) { const angleRad = 0.5; const distToCenter = 11.5; const co = distToCenter * Math.sin(angleRad * i); const cc = distToCenter * Math.cos(angleRad * i); return `translate(${co},${cc})`; }) .style("fill", colorNeutral(0)) .style("opacity", 0) .transition() .delay((d, i) => i * 100) .style("opacity", 1); //////////////////// ///// CELL VALUE //////////////////// // SENDING INFO ABOUT SELECTED COUNTRY let myRegionAccessUnlimitedCycles = data.find( (d) => d["region_code"] === myRegion ).access; // Counting totals cyclesTotalSameNational = data.filter((d) => d.access === "Yes").length; cyclesTotalMoreNational = data.filter((d) => d.access === "NoMore").length; cyclesTotalLessNational = data.filter((d) => d.access === "YesLess").length; cyclesTotalNotAvailable = data.filter((d) => d.access === "NotAvailable") .length; // Update map cell value const element = svg.node(); element.value = { myRegion, myRegionAccessUnlimitedCycles, cyclesTotalSameNational, cyclesTotalMoreNational, cyclesTotalLessNational, cyclesTotalNotAvailable }; element.dispatchEvent(new CustomEvent("input")); //////////////////// ///// BASIC INTERACTIONS //////////////////// regionsGroups .style("cursor", "pointer") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .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 myNewRegionAccessUnlimitedCycles = data.find( (d) => d["region_code"] === myNewRegion ).access; // Update my region data myRegion = myNewRegion; myRegionAccessUnlimitedCycles = myNewRegionAccessUnlimitedCycles; // TEST MUTABLE mutable mutableRegion = myRegion; // UPDATE CELL VALUE!! element.value = { myRegion, myRegionAccessUnlimitedCycles }; 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:T224a,viewof extraBarriersMap = { let myRegion = mutableRegion; const chartId = "cartogramExtraBarriers"; const dataToPaint = "extraBarriers"; const data = datasetExtraBarriersCCAA; ////////// // COMMON STUFF ///////// // 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 (isMobile) { text = await FileAttachment("ES-CCAA_mobile-300@7.svg").text(); } else { 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("id", chartId) .attr("class", "cartogram") .attr("overflow", "visible"); // 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); // Yes partially const defsStripes = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "yesPartially"); defsStripes .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorAccess); defsStripes .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", colorNoAccess) .style("stroke-width", patternWidth); // Unabling countries pattern // Following this online tool // https://svg-stripe-generator.web.app/ const unablePattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "unable"); unablePattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", "whitesmoke"); unablePattern .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", patternColor) .style("stroke-width", patternWidth); //No-limits age pattern const noLimitsPattern = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) //.attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "noLimits"); noLimitsPattern .append("rect") .attr("x", "0") .attr("y", "0") .attr("width", "100%") .attr("height", "100%") .attr("fill", colorAccess); noLimitsPattern .append("line") .attr("x1", "0") .attr("x2", patternSize) .attr("y1", "0") .attr("y2", "0") .style("stroke", colorAccessDarker) .style("stroke-width", patternWidth); //// // 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") }; return { region_code: d3.select(this).attr("id") }; }); myMap.data(data, function (d, i) { return d.region_code; //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); // 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"); ////////// // EXTR BARRIERS ///////// const myField = "extraBarriers_viz"; nodes.style("fill", function (d) { const notAvailable = d[myField] === "NotAvailable"; const isEmpty = d[myField] === ""; const noBarriers = d[myField] === "No" || d[myField] === "No "; if (notAvailable || isEmpty) { d["access"] = "NotAvailable"; return colorNotAvailable; } else if (noBarriers) { d["access"] = "Yes"; return colorAccess; } else { d["access"] = "No"; return colorNoAccess; } }); textsNodes.style("fill", function (d) { if (d.access === "No") { return colorNoAccessText; } else if (d.access === "Yes") { return colorAccessText; } else if (d.access === "NotAvailable") { return colorNotAvailableText; } }); //////////////////// ///// CELL VALUE //////////////////// // SENDING INFO ABOUT SELECTED COUNTRY let myRegionExtraBarriers = data.find((d) => d["region_code"] === myRegion) .access; let myRegionHasIMC = data.find((d) => d["region_code"] === myRegion).IMC_max; // Counting totals const extraBarriersTotalYes = data.filter((d) => d.access === "Yes").length; const extraBarriersTotalNo = data.filter((d) => d.access === "No").length; const extraBarriersNotAvailable = data.filter( (d) => d.access === "NotAvailable" ).length; // Update map cell value const element = svg.node(); element.value = { myRegion, myRegionExtraBarriers, myRegionHasIMC, extraBarriersTotalYes, extraBarriersTotalNo, extraBarriersNotAvailable }; element.dispatchEvent(new CustomEvent("input")); //////////////////// ///// BASIC INTERACTIONS //////////////////// regionsGroups .style("cursor", "pointer") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .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 myNewRegionExtraBarriers = data.find( (d) => d["region_code"] === myNewRegion ).access; const myNewRegionHasIMC = data.find((d) => d["region_code"] === myRegion) .IMC_max; // Update my region data myRegion = myNewRegion; myRegionExtraBarriers = myNewRegionExtraBarriers; // Update my region data myRegion = myNewRegion; // TEST MUTABLE mutable mutableRegion = myRegion; // UPDATE CELL VALUE!! element.value = { myRegion, myRegionExtraBarriers, myNewRegionHasIMC }; 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(); }34:T47f,// Typography styles = html` `35:Tb9e,locale = ({ es: { // 1 Legal age map resumeTotalsAgeYes: ` ${ ageLegalMap["legalAgeTotalYes"] } comunidades cumplen con los límites nacionales de edad (en mujeres 40 años máximo, 38 para inseminación si es con semen de pareja), que se cuentan "en el inicio del estudio del paciente"

`, resumeTotalsAgeDepends: ` pero hay ${ ageLegalMap["legalAgeTotalDepends"] } que los interpretan de una forma distinta

`, resumeTotalsAgeNo: ` y ${ ageLegalMap["legalAgeTotalNo"] } más restrictivas aún

`, // 2 Max cycles map resumeTotalSameNational: ` ${ maxCyclesMap["cyclesTotalSameNational"] } comunidades cumplen con los ${ _isInsemination ? inseminationNationalMax : inVitroNationalMax } ciclos máximos que marca la norma nacional ${ _isInsemination ? " (4 si es con semen de pareja)" : "" }

`, resumeTotalMoreNational: ` pero hay ${ maxCyclesMap["cyclesTotalMoreNational"] } que no lo hacen y cubren menos ciclos

`, resumeTotaLessNational: ` y ${ maxCyclesMap["cyclesTotalLessNational"] }${ maxCyclesMap["cyclesTotalLessNational"] === 1 ? " amplía " : " amplían " } el número de intentos

`, // 3 Extra barriers map resumeTotalsExtraBarriersYes: ` En ${ extraBarriersMap["extraBarriersTotalYes"] } ${ extraBarriersMap["extraBarriersTotalYes"] === 1 ? "comunidad" : "comunidades" } no hay restricciones extras,

`, resumeTotalsExtraBarriersNo: ` pero en ${ extraBarriersMap["extraBarriersTotalNo"] }, sí

` } })36:[{"id":"46ed579748a67fb89361adceb156dd36b49384a9d80421ca12e5caf7d90e3065fa3e292adf3dbcdb5bb337dab89d29a56e5accc05193d1b4f51754a977c231c7","href":"https://static.observableusercontent.com/files/46ed579748a67fb89361adceb156dd36b49384a9d80421ca12e5caf7d90e3065fa3e292adf3dbcdb5bb337dab89d29a56e5accc05193d1b4f51754a977c231c7","name":"ES-CCAA_desktop-40x400@2.svg","type":"image/svg+xml","lastModified":1636399571511.412,"size":56079},{"id":"f01fb25557909ea9c64b7897098a2ed5498b8017a102baadd9529c5442a3e21121e1d285b9007866051afc2d06c3c367abad7e645590c1d4ed125b780206bebc","href":"https://static.observableusercontent.com/files/f01fb25557909ea9c64b7897098a2ed5498b8017a102baadd9529c5442a3e21121e1d285b9007866051afc2d06c3c367abad7e645590c1d4ed125b780206bebc","name":"ES-CCAA_mobile-300@2.svg","type":"image/svg+xml","lastModified":1636399571584.509,"size":93438},{"id":"1d1f214244e64c75a5b294a7d1d8bbb72e931666d081c4993725648c1d155e2a964b69919b2ba70576b26a2ed6e99b60184b8e416e4f093d5076637b7adac523","href":"https://static.observableusercontent.com/files/1d1f214244e64c75a5b294a7d1d8bbb72e931666d081c4993725648c1d155e2a964b69919b2ba70576b26a2ed6e99b60184b8e416e4f093d5076637b7adac523","name":"legend_reproductive.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":144},{"id":"15093d8108e03ff22f57a2209ac9bb4d3bac10c3cc6fdf0407b9c49a9421ed8dd7ea95e3806beb4c806e4dccaad3dc4cd7c54c61bb4f5d616b604ab1be6cb2c9","href":"https://static.observableusercontent.com/files/15093d8108e03ff22f57a2209ac9bb4d3bac10c3cc6fdf0407b9c49a9421ed8dd7ea95e3806beb4c806e4dccaad3dc4cd7c54c61bb4f5d616b604ab1be6cb2c9","name":"legend_Depends@1.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":582},{"id":"5890611f622b9b8320ed2d94c4ec4f166fb59617c4160c629c9c576b18dd20c7099a32806b510ae3131f604831d6e7bf224f775613bb504a8c2aa7c1a43da1fd","href":"https://static.observableusercontent.com/files/5890611f622b9b8320ed2d94c4ec4f166fb59617c4160c629c9c576b18dd20c7099a32806b510ae3131f604831d6e7bf224f775613bb504a8c2aa7c1a43da1fd","name":"legend_Yes@1.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":144},{"id":"af1b189b2bd2afcff7a2a2fa95bf954cc96328a1162ce41b72e265ab724b61760868509ca9421991169575c086a6d20160774ea8aba2e8445a7d0be8b4e06159","href":"https://static.observableusercontent.com/files/af1b189b2bd2afcff7a2a2fa95bf954cc96328a1162ce41b72e265ab724b61760868509ca9421991169575c086a6d20160774ea8aba2e8445a7d0be8b4e06159","name":"legend_No@1.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":144},{"id":"3c980570139c47565dbac59fc84a7b6228d970689eb28fe5bb1a2bde8959589e924c8f9634a4127b996eeda624899802706714e02c416188ee7d7d94d9f90cfa","href":"https://static.observableusercontent.com/files/3c980570139c47565dbac59fc84a7b6228d970689eb28fe5bb1a2bde8959589e924c8f9634a4127b996eeda624899802706714e02c416188ee7d7d94d9f90cfa","name":"ART-V06_desktop-460x460.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":104380},{"id":"495f813d15f51b085b7001d248eab352d2dfd4293b1fdb34747b9267b72e0ac2a62669eaae41528662f5b17c5b7ce0327c51b390a73e6453a89a3ab774b477e8","href":"https://static.observableusercontent.com/files/495f813d15f51b085b7001d248eab352d2dfd4293b1fdb34747b9267b72e0ac2a62669eaae41528662f5b17c5b7ce0327c51b390a73e6453a89a3ab774b477e8","name":"ART-V06_mobile-300x460.svg","type":"image/svg+xml","lastModified":1636108828972.884,"size":94747},{"id":"9e259c2072edc2a24d33de24cb3156f0bde26c1cd9385f085a11485c16aebd7371d484a96b4631f0ecc260a16a484f9530375b48013421a5333b8926e3ac52f5","href":"https://static.observableusercontent.com/files/9e259c2072edc2a24d33de24cb3156f0bde26c1cd9385f085a11485c16aebd7371d484a96b4631f0ecc260a16a484f9530375b48013421a5333b8926e3ac52f5","name":"ES-CCAA_desktop-40x400@1.svg","type":"image/svg+xml","lastModified":1636374736756.727,"size":56079},{"id":"28ca0763d7eaa6ff42db5af084a767f59fc222472bc3ed546727f28d191606e8182d351cfacd8decab30614f8953a26030f04f076ee93e9d1295a5c291d2b87d","href":"https://static.observableusercontent.com/files/28ca0763d7eaa6ff42db5af084a767f59fc222472bc3ed546727f28d191606e8182d351cfacd8decab30614f8953a26030f04f076ee93e9d1295a5c291d2b87d","name":"ES-CCAA_mobile-300@1.svg","type":"image/svg+xml","lastModified":1636374736839.381,"size":93438},{"id":"f01fb25557909ea9c64b7897098a2ed5498b8017a102baadd9529c5442a3e21121e1d285b9007866051afc2d06c3c367abad7e645590c1d4ed125b780206bebc","href":"https://static.observableusercontent.com/files/f01fb25557909ea9c64b7897098a2ed5498b8017a102baadd9529c5442a3e21121e1d285b9007866051afc2d06c3c367abad7e645590c1d4ed125b780206bebc","name":"ES-CCAA_mobile-300@3.svg","type":"image/svg+xml","lastModified":1636735680214.679,"size":93438},{"id":"9a0d7e7278893b90ec68fc28a77f3833e313ec42b72399f111906d4970799a0f9b3268d27b49fb81f80d383279bda3cc90128c613ff58a8cf3fa9fb124855053","href":"https://static.observableusercontent.com/files/9a0d7e7278893b90ec68fc28a77f3833e313ec42b72399f111906d4970799a0f9b3268d27b49fb81f80d383279bda3cc90128c613ff58a8cf3fa9fb124855053","name":"ES-CCAA_desktop-40x400@3.svg","type":"image/svg+xml","lastModified":1636735680264.418,"size":55768},{"id":"527bc0398067b33dea688a964b1d01704196016795fd9381094fdde1cb30caeb1b7560abaeeb6116926a855ceeeb85da9c004df870a1b60d42a09b13429d988e","href":"https://static.observableusercontent.com/files/527bc0398067b33dea688a964b1d01704196016795fd9381094fdde1cb30caeb1b7560abaeeb6116926a855ceeeb85da9c004df870a1b60d42a09b13429d988e","name":"ES-CCAA_mobile-300@7.svg","type":"image/svg+xml","lastModified":1636997101357.753,"size":71311},{"id":"34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","href":"https://static.observableusercontent.com/files/34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","name":"ES-CCAA_desktop-40x400@7.svg","type":"image/svg+xml","lastModified":1636997101277.504,"size":54553},{"id":"e8c8d8df65072c93ff875d9badd066d1a8c28576e2f7c39c52f4198558ab4775e4008947ac8d6d63c4f918f71a0981739551ef17adaea5db2e82b9f113966904","href":"https://static.observableusercontent.com/files/e8c8d8df65072c93ff875d9badd066d1a8c28576e2f7c39c52f4198558ab4775e4008947ac8d6d63c4f918f71a0981739551ef17adaea5db2e82b9f113966904","name":"legend_NoLimits.svg","type":"image/svg+xml","lastModified":1636967271493.421,"size":644},{"id":"9a0d7e7278893b90ec68fc28a77f3833e313ec42b72399f111906d4970799a0f9b3268d27b49fb81f80d383279bda3cc90128c613ff58a8cf3fa9fb124855053","href":"https://static.observableusercontent.com/files/9a0d7e7278893b90ec68fc28a77f3833e313ec42b72399f111906d4970799a0f9b3268d27b49fb81f80d383279bda3cc90128c613ff58a8cf3fa9fb124855053","name":"ES-CCAA_desktop-40x400@4.svg","type":"image/svg+xml","lastModified":1636974015249.482,"size":55768},{"id":"6192d23c1b325ba7d1e6dd1cece1b8a1fee56ba8ed45e3d47fc1ea14ff0084cdd8a5433d1725611d071ee8fb009f8c2cd46f9fe6985fa8ec72a71c8e2b3ef22b","href":"https://static.observableusercontent.com/files/6192d23c1b325ba7d1e6dd1cece1b8a1fee56ba8ed45e3d47fc1ea14ff0084cdd8a5433d1725611d071ee8fb009f8c2cd46f9fe6985fa8ec72a71c8e2b3ef22b","name":"ES-CCAA_mobile-300@4.svg","type":"image/svg+xml","lastModified":1636974016251.775,"size":51546},{"id":"34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","href":"https://static.observableusercontent.com/files/34487ca3bdb551d9f3e175c20b239d49ce4dd3f34f0b1a583d205fb6db069a0859dbf8b88d41cc67729e8932ee84f9f4a639ceea4a2abf3ef377870f8ca31095","name":"ES-CCAA_desktop-40x400@5.svg","type":"image/svg+xml","lastModified":1636985707620.346,"size":54553},{"id":"815fb43efb93b99018ed58c04e34b25ad2e3fafaa7e9753f24b73d945878857d526fcfed2a2041008389e64a17eac01c2a54326354a8ee9d245d799f67252a68","href":"https://static.observableusercontent.com/files/815fb43efb93b99018ed58c04e34b25ad2e3fafaa7e9753f24b73d945878857d526fcfed2a2041008389e64a17eac01c2a54326354a8ee9d245d799f67252a68","name":"ES-CCAA_mobile-300@5.svg","type":"image/svg+xml","lastModified":1636985707672.256,"size":125523}] 2f:{"title":"#648 Cartograms Spain - CCAA_v01","cells":[{"id":405,"value":"# #648 Cartograms Spain - CCAA_v01\n\n.\n\nThis is a small piece imported on this notebook [648-art-access-spain-v01](https://observablehq.com/@civio/648-art-access-spain-v01)\n\n\n**Article published in Civio (16/11/21):**\n- Spanish version: [La odisea de acceder a la reproducción asistida pública según donde vivas](https://civio.es/medicamentalia/2021/11/16/diferencias-en-reproduccion-asistida-por-comunidades-autonomas/)\n- \n\n**References:**\n- [Manipulating SVG Files](https://observablehq.com/@mbostock/manipulating-svg-files) by [Mike Bostock](https://observablehq.com/@mbostock/manipulating-svg-files).\n- [Introduction to Mutable State](https://observablehq.com/@observablehq/introduction-to-mutable-state) by [Observable](https://observablehq.com/@observablehq).","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"_languageSelector = \"es\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4757,"value":"languageSelector = _languageSelector","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":3368,"value":"// https://observablehq.com/@observablehq/introduction-to-mutable-state\nmutable mutableRegion = myIPRegion","pinned":false,"hidden":false,"mode":"ojs"},{"id":4349,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1843,"value":"personalSituationArray = [\"hetero_couples\", \"single_women\", \"female_couples\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"viewof _personalSituationSelector = Inputs.radio(personalSituationArray, {\n value: \"single_women\" // Default value\n //disabled: [\"trans\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"_isHetero = _personalSituationSelector === \"hetero_couples\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3688,"value":"ARTtechniques = [\"Insemination\", \"In Vitro\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"_isInsemination = _artTechniqueSelector === \"Insemination\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"viewof insemination_SubtechniquesSelector = Inputs.radio([\"AIH\", \"AID\"], {\n value: \"AIH\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"viewof inVitro_SubtechniquesSelector = Inputs.radio(\n [\"own_gametes\", \"donated_sperm\", \"donated_eggs\", \"both\", \"donated_embryos\"],\n {\n value: \"own_gametes\" // Default value\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"mySubtechnique = _isInsemination\n ? insemination_SubtechniquesSelector\n : inVitro_SubtechniquesSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":4353,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":5886,"value":"### MAP01: Legal access (based on age ) ","pinned":false,"hidden":false,"mode":"md"},{"id":1431,"value":"viewof _femaleAgeSelector = Inputs.range([0, 100], {\n label: \"Your age (♀)\",\n //label: html`Your age (♀)`,\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"viewof _maleAgeSelector = Inputs.range([0, 100], {\n //label: html`Your partner age (♂)`,\n label: \"Your partner age (♂)\",\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6900,"value":"ageLegalMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":3267,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6912,"value":"ageLegalMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":5000,"value":"resumeTotalsAge = html`\n\n \n ${\n ageLegalMap[\"legalAgeTotalYes\"]\n ? locale[languageSelector].resumeTotalsAgeYes\n : \"\"\n }\n\n ${\n ageLegalMap[\"legalAgeTotalDepends\"]\n ? locale[languageSelector].resumeTotalsAgeDepends\n : \"\"\n }\n ${\n ageLegalMap[\"legalAgeTotalNo\"]\n ? locale[languageSelector].resumeTotalsAgeNo\n : \"\"\n }\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5893,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1722,"value":"viewof _artTechniqueSelector = Inputs.radio([\"Insemination\", \"In Vitro\"], {\n value: \"In Vitro\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5906,"value":"### MAP02: Public funding: limits on cycles","pinned":false,"hidden":false,"mode":"md"},{"id":7076,"value":"inVitroNationalMax = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":7077,"value":"inseminationNationalMax = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":3328,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5822,"value":"maxCyclesMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":5050,"value":"resumeTotalsCycles = html`\n \n ${\n maxCyclesMap[\"cyclesTotalSameNational\"]\n ? locale[languageSelector].resumeTotalSameNational\n : \"\"\n }\n ${\n maxCyclesMap[\"cyclesTotalMoreNational\"]\n ? locale[languageSelector].resumeTotalMoreNational\n : \"\"\n }\n ${\n maxCyclesMap[\"cyclesTotalLessNational\"]\n ? locale[languageSelector].resumeTotaLessNational\n : \"\"\n }\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3675,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6933,"value":"### MAP03: Extra barriers","pinned":false,"hidden":false,"mode":"md"},{"id":7168,"value":"datasetExtraBarriersCCAA","pinned":true,"hidden":false,"mode":"ojs"},{"id":7031,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7111,"value":"extraBarriersMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":7107,"value":"resumeTotalsExtraBarriers = html`\n \n ${\n extraBarriersMap[\"extraBarriersTotalYes\"]\n ? locale[languageSelector].resumeTotalsExtraBarriersYes\n : \"\"\n }\n\n ${\n extraBarriersMap[\"extraBarriersTotalNo\"]\n ? locale[languageSelector].resumeTotalsExtraBarriersNo\n : \"\"\n }\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6937,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6415,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":643,"value":"fillOpacityBasicState = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":3917,"value":"contextWidth = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":3105,"value":"patternSize = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":3122,"value":"patternColor = colorNeutral(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3107,"value":"patternWidth = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":3102,"value":"patternAngle = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3131,"value":"patternTextColor = colorNeutral(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6350,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":748,"value":"### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1069,"value":"handleMouseOver = function (event, d) {\n d3.select(this).select(\".region-hex\").transition().style(\"fill-opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"handleMouseOut = function (e, d) {\n d3.select(this)\n .select(\".region-hex\")\n .transition()\n .style(\"fill-opacity\", fillOpacityBasicState);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6340,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"margin = ({ top: 20, left: 20, right: 200, bottom: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"maxWidth = 460","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"mediaQueryLimit = 459","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"myWidth = deviceSelection === \"desktop\" ? +Math.min(width, maxWidth) : 320 // 👈🏻 Just for testing","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"isMobile = myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":5756,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"### Styles & colors","pinned":false,"hidden":false,"mode":"md"},{"id":4380,"value":"colorNotAvailable = colorNeutral(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4382,"value":"colorNotAvailableText = colorNeutral(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4415,"value":"colorNoAccessText = colorNeutral(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4417,"value":"colorAccessText = colorNeutral(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"colorNoAccess = \"#EF2E61\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4421,"value":"colorDependsText = colorNeutral(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"colorAccess = \"#08A6BF\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"colorDepends = \"#967494\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"colorAccessDarker = \"#045360\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3005,"value":"colorNoAccessDarker = \"#781731\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5614,"value":"colorExtraBarriers = \"#FFB114\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3915,"value":"contextColor = colorNeutral(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":6323,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"### Detect user location","pinned":false,"hidden":false,"mode":"md"},{"id":6792,"value":"// Trying another IP service, as the previous one failed due to a CORS problem at some point after publishing the article\n// https://freegeoip.live/json/ not working anymore\n// \"https://freegeoip.app/json/\" not working anymore\ngeoIp = await fetch(\"https://api.ipbase.com/v1/json/\")\n .then((res) => res.json())\n .catch(() => null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6299,"value":"myRegions = datasetCCAA.map((d) => d.region_code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6806,"value":"defaultRegion = \"MD\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"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":6164,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1935,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1349,"value":"**Note:** Data about general access imported from notebook https://observablehq.com/@carmen-tm/619-age-limits-v03","pinned":false,"hidden":false,"mode":"md"},{"id":1928,"value":"import { datasetCCAA } from \"@civio/648-age-limits-v04\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6839,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2972,"value":"**Note:** Data about max.cycles on public funding imported from notebook https://observablehq.com/@carmen-tm/619-public-funding-cycles-v01","pinned":false,"hidden":false,"mode":"md"},{"id":2945,"value":"import { datasetMaxCyclesCCAA } from \"@civio/648-public-funding-cycles-v01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7042,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7045,"value":"**Note:** Data about extra barriers on public funding imported from notebook https://observablehq.com/@carmen-tm/648-extra-barriers-v01","pinned":false,"hidden":false,"mode":"md"},{"id":7049,"value":"import { datasetExtraBarriersCCAA } from \"@civio/648-extra-barriers-v01\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"### Languages","pinned":false,"hidden":false,"mode":"md"},{"id":5490,"value":"localeArtTechniques = ({\n en: {\n Insemination: \"artificial insemination\",\n \"In Vitro\": \"in vitro fertilisation\"\n },\n es: {\n Insemination: \"inseminación artificial\",\n \"In Vitro\": \"fertilización in vitro\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5493,"value":"localePersonalSituation = ({\n en: {\n hetero_couples: \"woman in a heterosexual couple\",\n single_women: \"single woman\",\n female_couples: \"woman in a female couple\"\n },\n es: {\n hetero_couples: \"mujer en pareja heterosexual\",\n single_women: \"mujer sin pareja\",\n female_couples: \"mujer en pareja de mujeres\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":6317,"value":"### General imports","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"import { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}