Public
Edited
Jan 29
Paused
1 fork
<section id="servicio-112" style="font-family: 'Lato', sans-serif; width:${myWidth}px; margin: 0 auto; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1b1e23; padding-bottom: 30px;">
<header>
<p class="resume-viz">${resumeViz}</p>
<p class="resume-companies">${resumeCompanies}</p>
</header>
<div class="map-section">
<small class="viz-note">${isMobile ? dataLocale[languageSelector].interactionNote_mobile : dataLocale[languageSelector].interactionNote_desktop}</small>
<div class="map">${viewof map}</div>
<div class="detailed-info">
${myRegionData.private ? chunkPrivate : chunkPublic}
</div>
</div>
<footer>
${sourceHtml}
</footer>
</section>
<style>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap" rel="stylesheet">
#servicio-112 header {
text-align: center;
}
#servicio-112 header h2 {
min-width: 100%;
}
#servicio-112 header > * {
margin: 0 auto;
}
#servicio-112 header .resume-viz {
font-size: 1.1rem;
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1.5;
text-align: center;
}
#servicio-112 a {
color: #3182bd;
text-decoration: none;
}
#servicio-112 header .resume-companies > span{
display: flex;
flex-direction: column;
justify-content: center;
font-size: 0.7rem;
min-width: 100%;
text-transform: uppercase;
text-align: center;
}
.companies-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
width: 300px;
margin: 0 auto;
margin-top: 10px;
gap: 0.5rem;
align-items: flex-start;
}
.title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.375em;
letter-spacing: .01em;
text-align: center;
color: #212529;
font-family: 'Merriweather', serif;
margin-top: 0
}
.map-section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
}
.map {
margin: 0 auto;
}
.public {
background: ${colorPublic};
color: white;
padding: 2px 7px;
}
.private {
background: ${colorPrivate};
color: white;
padding: 2px 7px;
}
.public-text {
color: ${colorPublic};
}
.private-text {
color: ${colorPrivate};
}
.detailed-info {
border: 4px solid black;
font-size: 1rem;
line-height: 1.5;
padding: 1rem;
}
.resume-access {
margin: 0;
}
.resume-access.contract {
margin-top: 1rem;
}
.region-group.myRegion > .region-hex {
stroke: black!important;
stroke-width: 4px!important;
}
.viz-source, .viz-note {
font-size: 0.9rem;
color: ${colorNeutral(400)};
}
.viz-note {
margin-top: 0.5rem;
}
.viz-source {
position: static;
margin-top: 10px;
text-align: center;
}
@media (min-width: ${mediaQueryLimit}px) {
.map-section {
flex-direction: row;
margin: 0 auto;
}
.map {
margin-left: 70px;
}
.resume-viz {
max-width: 85%;
}
.viz-note, .viz-source {
font-size: 0.8rem;
}
.viz-note {
position: fixed;
width: 150px;
}
.viz-source {
position: relative;
}
.resume-companies {
max-width: 100%;
}
#servicio-112 header .resume-companies > span {
flex-direction: row;
gap: 0.5rem;
}
.companies-list {
flex-direction: row;
gap: 0.5rem;
justify-content: center;
width: unset;
margin: unset;
}
}
</style>
viewof svgIlunion = htl.html`<svg width="30px" height="15px" style="opacity:${fillOpacityBasicState}; margin-bottom: -3px; margin-left: 8px;"><rect width="40px" height="20px" fill="url(#Ilunion)"></rect></svg>`
viewof svgFerrovial = htl.html`<svg width="30px" height="15px" style="opacity:${fillOpacityBasicState}; margin-bottom: -3px; margin-left: 8px;"><rect width="40px" height="20px"fill="url(#Ferrovial)"></rect></svg>`
viewof svgAvilon = htl.html`<svg width="30px" height="15px" style="opacity:${fillOpacityBasicState}; margin-bottom: -3px; margin-left: 8px;"><rect width="40px" height="20px"fill="url(#Avilon)"></rect></svg>`
defs = () => svg`
<defs>
<pattern width="6" height="6" patternTransform="rotate(30)" patternUnits="userSpaceOnUse" id="Ilunion"><rect x="0" y="0" width="100%" height="100%" fill="#f74383"></rect><line x1="0" x2="0" y1="0" y2="6" style="stroke: rgb(51, 51, 51); stroke-width: 5;"></line></pattern>
<pattern width="6" height="6" patternTransform="rotate(-30)" patternUnits="userSpaceOnUse" id="Ferrovial"><rect x="0" y="0" width="100%" height="100%" fill="#f74383"></rect><line x1="0" x2="0" y1="0" y2="6" style="stroke: #f8b5cc; stroke-width: 5;"></line></pattern>
<pattern width="6" height="6" patternTransform="rotate(90)" patternUnits="userSpaceOnUse" id="Avilon"><rect x="0" y="0" width="100%" height="100%" fill="#f74383"></rect><line x1="0" x2="0" y1="0" y2="6" style="stroke: #c43568 ; stroke-width: 5;"></line></pattern>
<filter x="-0.1" y="0" width="1.2" height="1.1" id="solid">
<feFlood flood-color="#f74383" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
`
viewof map = {
// By geolocation:
let myRegion = myIPRegion;
// Embeding and using and external SVG file c43568
// https://observablehq.com/@mbostock/manipulating-svg-files
// Load contents of the SVG file as a string
let text = await FileAttachment("ES-CCAAs.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 ? myWidth - 10 : `${Math.min(460, myWidth - 10)}px`)
.attr("class", "cartogram")
.attr("overflow", "visible");
// Def patterns to show main privatizations
svg.append(defs);
// 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);
// Basic initialization styling (hiding things, etc)
mapGroup.selectAll("circle").attr("class", "auxCircles").style("opacity", 0);
mapGroup.selectAll("polygon").attr("class", "region-hex");
// 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["xGeo"] = xPosit;
d["yGeo"] = yPosit;
});
// 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")
.attr("filter", (d) => (d.private ? "url(#solid)" : ""));
// Color coding
nodes
.style("fill", "url(#Ilunion)")
.style("fill", (d) => (d.private ? colorPrivate : colorPublic))
.style("fill", function (d) {
if (d.adjudicataria_clean === "ILUNION Emergencias") {
return "url(#Ilunion)";
} else if (
d.adjudicataria_clean === "Serveo Servicios (antigua Ferrovial)"
) {
return "url(#Ferrovial)";
} else if (d.adjudicataria_clean === "Avilon Center") {
return "url(#Avilon)";
} else {
return d.private ? colorPrivate : colorPublic;
}
})
.style("stroke", contextColor)
.style("stroke-width", 2);
textsNodes.style("fill", "white");
// Update map cell value
const element = svg.node();
element.value = {
myRegion
};
////////////////////
///// BASIC INTERACTIONS
////////////////////
regionsGroups
.style("cursor", "pointer")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.on("click", onMouseClick);
function onMouseClick(event, d) {
// Update region selection
const myNewRegion = d.region_code;
d3.selectAll(".myRegion").classed("myRegion", false);
d3.selectAll(`.region-group[id=${myNewRegion}]`)
.raise()
.classed("myRegion", true);
// UPDATE CELL VALUE
element.value = {
myRegion: myNewRegion
};
element.dispatchEvent(new CustomEvent("input"));
}
return svg.node();
}
//sourceHtml = html`${dataLocale[languageSelector].source}`
sourceHtml = html`${dataLocale[languageSelector].source}`
chunkPrivate = html`
${dataLocale[languageSelector].chunkPrivate}
`
resumeViz = html`
${dataLocale[languageSelector].resume}
`
resumeCompanies = html`
<b class="private-text">Principales adjudicatarias:</b>
<div class="companies-list">
<span>${viewof svgIlunion} ILUNION Emergencias</span>
<span>${viewof svgFerrovial} Serveo Servicios (antigua Ferrovial)</span>
<span>${viewof svgAvilon} Avilon Center</span>
</div>
`
chunkPublic = html`
${dataLocale[languageSelector].chunkPublic}
`
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);
}
dataURL = "https://data.civio.es/lopublico/servicio-112/mapa-112.csv?q=3"
dataRaw = await d3.csv(dataURL, d3.autoType)
dataModif = {
const dataCleaning = dataRaw.map((d) => ({
region_code: d.region_code,
region_name: d.region_name,
private: d.externalizacion === "Sí" ? true : false,
url_contrato: d.url_contrato,
adjudicataria: d.adjudicataria,
adjudicataria_clean: d.adjudicataria_clean_legend,
importe_adjudicacion_sin_iva: d.importe_adjudicacion_sin_iva,
periodo: d.periodo,
note: d.note
}));
return dataCleaning.sort((a, b) =>
d3.ascending(a.region_name, b.region_name)
);
}
Inputs.table(dataModif)
data = dataModif
myRegionData = data.find((d) => d.region_code === map.myRegion)
totalPrivate = data.filter((d) => d.private).length
totalPublic = data.filter((d) => !d.private).length
geoIp = await fetch("https://api.ipbase.com/v1/json/")
.then((res) => res.json())
.catch(() => null)
myRegions = data.map((d) => d.region_code)
myIPRegion = {
const defaultRegion = "VC";
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;
}
}
myRegionData
dataLocale = ({
es: {
title: "Privatización de la atención telefónica del 112 📞",
resume: `El <b>112</b> es de <b class="public">gestión pública</b> en <b class="public-text">6 comunidades</b> y <b class="public-text">1 ciudad autónoma</b>, pero es un <b class="private">servicio subcontratado</b> <b>total o parcialmente</b> en otras <b class="private-text">11 comunidades</b> y <b class="private-text">1 ciudad autónoma</b>.`,
interactionNote_desktop:
"Haz click en cada región para ver su información en detalle",
interactionNote_mobile:
"↓ Toca en cada región para ver su información en detalle",
source: `<div class="viz-source">Fuente: <a href="https://contrataciondelestado.es/wps/portal/plataforma" target="_blank">Plataforma de Contratación del Sector Público</a> y elaboración propia</div>`,
/// REGIONS
chunkPrivate: `<p class="resume-access">En <span class="private"> ${
myRegionData.region_name
}</span> el <b>servicio de atención de llamadas del 112</b> es un <b class="private-text">servicio subcontratado</b> a <b>${
myRegionData.adjudicataria
}</b> por un importe de <b>${
myRegionData.importe_adjudicacion_sin_iva
}</b> durante el periodo de ${myRegionData.periodo}
</p>
${myRegionData.note ? `<p>Nota: ${myRegionData.note}</p>` : ""}
<p class="resume-access contract">Fuente: <a href="${
myRegionData.url_contrato
}" target="_blank">contrato 🔗</a>
</p>`,
chunkPublic: `<p class="resume-access">En <span class="public"> ${myRegionData.region_name}</span> el <b>servicio de atención de llamadas del 112</b> es de <b class="public-text">gestión pública</b>.
</p>`
}
})
margin = ({ top: 50, right: 50, bottom: 50, left: 50 })
mediaQueryLimit = 550
//660 is Civio central column
maxWidth = 900
height = isMobile ? 600 : 1000 // 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
colorPrivate = "#f74383"
//colorPublic = "#002A6D" // civio main blue
//colorPublic = "#3d64a3" // a bit lighter and desaturated
colorPublic = "#7391c6"
contextColor = colorNeutral(40)
contextWidth = 2
fillOpacityBasicState = 0.9
{
//variables to generate the code
const variables = {
url: "https://graphs.civio.es/lopublico/servicio-112/viz-observable/", // URL at Civio's repository `civio-graphs`.
heightDesktop: "", //not necessary if there is only one height
heightMobile: height,
mediaQuery: mediaQueryLimit, //breakpoint
lang: languageSelector,
variableHeight: true //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
)}
~~~
`;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.