The avatar for @civio
Civio
Non-profit organization specialized in public data, investigative journalism and access to information | Organización independiente y sin ánimo de lucro especializada en datos públicos, periodismo de investigación y acceso a la información
Public
# 648 Access to Assisted Reproduction Techniques in Spain
Edited
Jan 7
Fork of #619 Cartograms EU_v12
Importers
2 stars
19
# 648 Access to Assisted Reproduction Techniques in Spain
#648 MAIN: All notebooks together - ART dataviz in Spain_v01
#648 Cartograms Spain - CCAA_v01
#648 Legal Age limits SPAIN - CCAA_v04#648 Public funding: Max Nº of cycles - SPAIN#648 Extra barriers - Spain - CCAA_v01
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ageLegalMap
Insert cell
Insert cell
ageLegalMap
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
inVitroNationalMax = 3
Insert cell
inseminationNationalMax = 6
Insert cell
Insert cell
maxCyclesMap
Insert cell
Insert cell
Insert cell
Insert cell
datasetExtraBarriersCCAA
Insert cell
Insert cell
extraBarriersMap
Insert cell
resumeTotalsExtraBarriers = html`
${
extraBarriersMap["extraBarriersTotalYes"]
? locale[languageSelector].resumeTotalsExtraBarriersYes
: ""
}

${
extraBarriersMap["extraBarriersTotalNo"]
? locale[languageSelector].resumeTotalsExtraBarriersNo
: ""
}

`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
handleMouseOver = function (event, d) {
d3.select(this).select(".region-hex").transition().style("fill-opacity", 1);
}
Insert cell
handleMouseOut = function (e, d) {
d3.select(this)
.select(".region-hex")
.transition()
.style("fill-opacity", fillOpacityBasicState);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Typography
styles = html`
<style>

.cartogram {
background: whitesmoke;
/*max-width: ${myWidth}px;*/
}

html *, svg * {
font-family: 'Lato', sans-serif;
}

.region-group.myRegion > .region-hex {
stroke: black!important;
stroke-width: 4px;
}

.region-hex {
stroke: whitesmoke;
stroke-width: 1px;
}

.myRegion > text {
fill: black!important;
font-weight: 800;
}

/* TOTALS PER STEP */
.resume-subtitle {
text-align: center;
}
.resume-subtitle .number {
font-weight: 800;
}
.resumeTotal-no {
color: ${colorNoAccess};
}
.resumeTotal-noPublicFunding {
color: ${colorNoAccessDarker};
}
.resumeTotal-yes {
color: ${colorAccess};
}
.resumeTotal-depends {
color: ${colorDepends};
}
.resumeTotal-notAvailable {
color: grey;
}

.img-legend {
object-fit: cover;
width: 20px;
height: 10px;
margin: 0px;
padding: 0px;
margin-right: 0.2rem;
margin-left: 0.1rem;

}
.img-legend.unable {
width: 120px;
object-fit: cover;
}

.custom-toggle form {
cursor: pointer;
margin: 0 auto;
}

</style>
`
Insert cell
Insert cell
Insert cell
// Trying another IP service, as the previous one failed due to a CORS problem at some point after publishing the article
// https://freegeoip.live/json/ not working anymore
// "https://freegeoip.app/json/" not working anymore
geoIp = await fetch("https://api.ipbase.com/v1/json/")
.then((res) => res.json())
.catch(() => null)
Insert cell
myRegions = datasetCCAA.map((d) => d.region_code)
Insert cell
defaultRegion = "MD"
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
localeArtTechniques = ({
en: {
Insemination: "artificial insemination",
"In Vitro": "in vitro fertilisation"
},
es: {
Insemination: "inseminación artificial",
"In Vitro": "fertilización in vitro"
}
})
Insert cell
localePersonalSituation = ({
en: {
hetero_couples: "woman in a heterosexual couple",
single_women: "single woman",
female_couples: "woman in a female couple"
},
es: {
hetero_couples: "mujer en pareja heterosexual",
single_women: "mujer sin pareja",
female_couples: "mujer en pareja de mujeres"
}
})
Insert cell
locale = ({
es: {
// 1 Legal age map
resumeTotalsAgeYes: `
<span class="resumeTotal-yes"> <strong>${
ageLegalMap["legalAgeTotalYes"]
} comunidades</strong> <strong>cumplen con los límites nacionales</strong> 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"<image class="img-legend" src=${await FileAttachment(
"legend_Yes@1.svg"
).url()}></image></span>
`,

resumeTotalsAgeDepends: `<span class="resumeTotal-depends"> pero hay <strong>${
ageLegalMap["legalAgeTotalDepends"]
}</strong> que los <strong>interpretan de una forma distinta</strong><image class="img-legend" src=${await FileAttachment(
"legend_reproductive.svg"
).url()}></image></span>`,

resumeTotalsAgeNo: `<span class="resumeTotal-no"> y <strong>${
ageLegalMap["legalAgeTotalNo"]
}</strong> más <strong>restrictivas aún</strong> <image class="img-legend" src=${await FileAttachment(
"legend_No@1.svg"
).url()}></image></span>`,

// 2 Max cycles map
resumeTotalSameNational: `<span class="resumeTotal-yes"> <strong>${
maxCyclesMap["cyclesTotalSameNational"]
} comunidades</strong> cumplen con los <strong>${
_isInsemination ? inseminationNationalMax : inVitroNationalMax
} ciclos máximos </strong> que marca la norma nacional ${
_isInsemination ? " (4 si es con semen de pareja)" : ""
}<image class="img-legend" src=${await FileAttachment(
"legend_Yes@1.svg"
).url()}></image></span>`,

resumeTotalMoreNational: `<span class="resumeTotal-no"> pero hay <strong>${
maxCyclesMap["cyclesTotalMoreNational"]
}</strong> que no lo hacen y <strong>cubren menos ciclos</strong> <image class="img-legend" src=${await FileAttachment(
"legend_No@1.svg"
).url()}></image></span>
`,

resumeTotaLessNational: `<span class="resumeTotal-yes"> y ${
maxCyclesMap["cyclesTotalLessNational"]
}<strong>${
maxCyclesMap["cyclesTotalLessNational"] === 1 ? " amplía " : " amplían "
}</strong> el número de intentos <image class="img-legend" src=${await FileAttachment(
"legend_NoLimits.svg"
).url()}></image></span>`,

// 3 Extra barriers map
resumeTotalsExtraBarriersYes: `
<span class="resumeTotal-yes">En <strong>${
extraBarriersMap["extraBarriersTotalYes"]
} ${
extraBarriersMap["extraBarriersTotalYes"] === 1
? "comunidad</strong>"
: "comunidades</strong>"
} no hay restricciones extras, <image class="img-legend" src=${await FileAttachment(
"legend_Yes@1.svg"
).url()}></image></span>
`,

resumeTotalsExtraBarriersNo: `<span class="resumeTotal-no"> pero en <strong>${
extraBarriersMap["extraBarriersTotalNo"]
}</strong>, sí <image class="img-legend" src=${await FileAttachment(
"legend_No@1.svg"
).url()}></image></span>`
}
})
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