function onMouseOver(event, d, i) {
d3.select(this).select(".region-hex").transition().style("fill-opacity", 1);
}
function onMouseOut(event, d, i) {
d3.select(this)
.select(".region-hex")
.transition()
.style("fill-opacity", fillOpacityBasicState);
}
// Adding date as parameter to avoid cache problems with any data update
dateId = new Date().getTime()
// 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)
myRegions = data.map((d) => d.region_code)
defaultRegion = "MD" // Setting Madrid as default (if reader is outside Spain)
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;
}
}
// https://observablehq.com/@observablehq/introduction-to-mutable-state
mutable mutableRegion = myIPRegion
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:"
}
})
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
margin = ({ top: 50, right: 50, bottom: 50, left: 50 })
mediaQueryLimit = 550
//660 is Civio central column
maxWidth = 900
colorAccess = "#08A6BF"
colorAccessText = colorNeutral(0)
colorDepends = "#967494"
colorNoAccess = "#EF2E61"
colorNoAccessText = colorNeutral(0)
contextColor = colorNeutral(0)
contextWidth = 2
{
//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
)}
~~~
`;
}
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.
