Public
Edited
Apr 18, 2023
Paused
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function onMouseOver(event, d, i) {
d3.select(this).select(".region-hex").transition().style("fill-opacity", 1);
}
Insert cell
function onMouseOut(event, d, i) {
d3.select(this)
.select(".region-hex")
.transition()
.style("fill-opacity", fillOpacityBasicState);
}
Insert cell
Insert cell
// Adding date as parameter to avoid cache problems with any data update
dateId = new Date().getTime()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Reference: https://observablehq.com/@planemad/mapbox-static-image-generator
// This one seems more accurate for Spanish regions
geoIp = await fetch("https://api.ipbase.com/v1/json/")
.then((res) => res.json())
.catch(() => null)
Insert cell
myRegions = data.map((d) => d.region_code)
Insert cell
defaultRegion = "MD" // Setting Madrid as default (if reader is outside Spain)
Insert cell
myIPRegion = {
if (geoIp && geoIp.country_code === "ES") {
const geoIpDetected = geoIp.region_code;
const isOnTheMap = myRegions.includes(geoIpDetected);

// If the region detected is not in the map => mark our default region
const myIPRegion = isOnTheMap ? geoIpDetected : defaultRegion;
return myIPRegion;
} else {
// If the IP fetch fails or is seen from abroad returns our default region
return defaultRegion;
}
}
Insert cell
// https://observablehq.com/@observablehq/introduction-to-mutable-state
mutable mutableRegion = myIPRegion
Insert cell
Insert cell
Insert cell
dataLocale = ({
es: {
title: "Acceso público al Test Prenatal No Invasivo (TPNI) en España",

cases: "¿En qué casos se hace la prueba?",
numberTests: "Nº pruebas anuales realizadas:"
}
})
Insert cell
Insert cell
Insert cell
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
Insert cell
margin = ({ top: 50, right: 50, bottom: 50, left: 50 })
Insert cell
mediaQueryLimit = 550
Insert cell
//660 is Civio central column
maxWidth = 900
Insert cell
Insert cell
Insert cell
Insert cell
colorAccess = "#08A6BF"
Insert cell
colorAccessText = colorNeutral(0)
Insert cell
colorDepends = "#967494"
Insert cell
colorNoAccess = "#EF2E61"
Insert cell
colorNoAccessText = colorNeutral(0)
Insert cell
contextColor = colorNeutral(0)
Insert cell
contextWidth = 2
Insert cell
Insert cell
{
//variables to generate the code
const variables = {
url: "https://graphs.civio.es/.../dist/", // URL at Civio's repository `civio-graphs`.
heightDesktop: "", //not necessary if there is only one height
heightMobile: height,
mediaQuery: mediaQueryLimit, //breakpoint
lang: languageSelector,
variableHeight: false //if there are two heights -> true, if there is only one -> false
};

return md`~~~html
${codeToExportIframe(
variables.url,
variables.heightDesktop,
variables.heightMobile,
variables.mediaQuery,
variables.lang,
variables.variableHeight
)}
~~~
`;
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more