30:Tebd,

${resumeViz}

${resumeCompanies}

${isMobile ? dataLocale[languageSelector].interactionNote_mobile : dataLocale[languageSelector].interactionNote_desktop}

${viewof map}

${myRegionData.private ? chunkPrivate : chunkPublic}

31:T410,defs = () => svg` `32:T10cf,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(); }33:T1341,localeCountries = ({ en: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Belarus", BE: "Belgium", BA: "Bosnia and Herzegovina", BG: "Bulgaria", HR: "Croatia", CY: "Cyprus", CZ: "Czech Republic", DK: "Denmark", EE: "Estonia", FI: "Finland", FR: "France", GE: "Georgia", DE: "Germany", EL: "Greece", HU: "Hungary", IS: "Iceland", IE: "Ireland", IT: "Italy", KZ: "Kazakhstan", LV: "Latvia", LT: "Lithuania", LU: "Luxemburg", MK: "Macedonia", MT: "Malta", MD: "Moldova", ME: "Montenegro", NO: "Norway", NL: "The Netherlands", PL: "Poland", PT: "Portugal", RO: "Romania", RS: "Serbia", RU: "Russia", SK: "Slovakia", SI: "Slovenia", ES: "Spain", SE: "Sweden", CH: "Switzerland", TR: "Turkey", UA: "Ukraine", UK: "United Kingdom" }, es: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Bielorrusia", BE: "Bélgica", BA: "Bosnia y Herzegovina", BG: "Bulgaria", HR: "Croacia", CY: "Chipre", CZ: "República Checa", DK: "Dinamarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", GE: "Georgia", DE: "Alemania", EL: "Grecia", HU: "Hungría", IS: "Islandia", IE: "Irlanda", KZ: "Kazajistán", IT: "Italia", LV: "Letonia", LT: "Lituania", LU: "Luxemburgo", MK: "Macedonia", MT: "Malta", MD: "Moldavia", ME: "Montenegro", NO: "Noruega", NL: "Países Bajos", PL: "Polonia", PT: "Portugal", RO: "Rumanía", RS: "Serbia", RU: "Rusia", SK: "Eslovaquia", SI: "Eslovenia", ES: "España", SE: "Suecia", CH: "Suiza", TR: "Turquía", UA: "Ucrania", UK: "Reino Unido" }, it: { AT: "Austria", BE: "Belgio", BG: "Bulgaria", HR: "Croazia", CZ: "Cechia", DK: "Danimarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", DE: "Germania", EL: "Grecia", HU: "Ungheria", IE: "Irlanda", IT: "Italia", LV: "Lettonia", LT: "Lituania", MT: "Malta", NL: "Paesi Bassi", PL: "Polonia", PT: "Portogallo", RO: "Romania", SK: "Slovacchia", SI: "Slovenia", ES: "Spagna", SE: "Svezia", UK: "Regno Unito", CY: "Cipro", AL: "Albania", AM: "Armenia", BY: "Bielorussia", BA: "Bosnia Erzegovina", GE: "Georgia", IS: "Islanda", KZ: "Kazakistan", LU: "Lussemburgo", MK: "Macedonia", MD: "Moldova", ME: "Montenegro", NO: "Norvegia", RS: "Serbia", RU: "Russia", CH: "Svizzera", TR: "Tacchino", UA: "Ucraina" }, fr: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaïdjan", AL: "Albanie", AM: "Armènie", BY: "Biélorussie", BA: "Bosnie Herzégovine", IS: "Islande", KZ: "Kazakhstan", MD: "Moldavie", ME: "Monténégro", RU: "Russie", RS: "Serbie", MK: "Macédoine", GE: "Géorgie", UA: "Ukraine", AT: "L'Autriche", BE: "Belgique", BG: "Bulgarie", HR: "Croatie", CZ: "Tchéquie", DK: "Danemark", EE: "Estonie", FI: "Finlande", FR: "France", DE: "Allemagne", EL: "Grèce", HU: "Hongrie", IE: "Irlande", IT: "Italie", LV: "Lettonie", LT: "Lituanie", LU: "Luxembourg", MT: "Malte", NL: "Pays-Bas", PL: "Pologne", PT: "Portugal", RO: "Roumanie", SK: "Slovaquie", SI: "Slovénie", ES: "Espagne", SE: "Suède", UK: "Royaume-Uni", CY: "Chypre", NO: "Norvège", CH: "Suisse", TR: "Turquie" }, el: { UK: "Ηνωμένο Βασίλειο", SE: "Σουηδία", ES: "Ισπανία", SI: "Σλοβενία", SK: "Σλοβακία", RO: "Ρουμανία", PT: "Πορτογαλία", PL: "Πολωνία", NL: "Κάτω Χώρες", MT: "Μάλτα", LT: "Λιθουανία", LV: "Λετονία", IT: "Ιταλία", IE: "Ιρλανδία", HU: "Ουγγαρία", EL: "Ελλάδα", DE: "Γερμανία", FR: "Γαλλία", FI: "Φινλανδία", EE: "Εσθονία", DK: "Δανία", CZ: "Τσεχία", HR: "Κροατία", BG: "Βουλγαρία", BE: "Βέλγιο", AT: "Αυστρία", AL: "Αλβανία", AM: "Αρμενία", BY: "Λευκορωσία", BA: "Βοσνία και Ερζεγοβίνη", CY: "Κύπρος", GE: "Γεωργία", IS: "Ισλανδία", KZ: "Καζακστάν", LU: "Λουξεμβούργο", MK: "Βόρεια Μακεδονία", MD: "Μολδαβία", ME: "Μαυροβούνιο", NO: "Νορβηγία", RS: "Σερβία", RU: "Ρωσία", CH: "Ελβετία", TR: "Τουρκία", UA: "Ουκρανία" } })34:T6a8,dataLocale = ({ es: { title: "Privatización de la atención telefónica del 112 📞", resume: `El 112 es de gestión pública en 6 comunidades y 1 ciudad autónoma, pero es un servicio subcontratado total o parcialmente en otras 11 comunidades y 1 ciudad autónoma.`, 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: `

Fuente: Plataforma de Contratación del Sector Público y elaboración propia

`, /// REGIONS chunkPrivate: `

En ${ myRegionData.region_name } el servicio de atención de llamadas del 112 es un servicio subcontratado a ${ myRegionData.adjudicataria } por un importe de ${ myRegionData.importe_adjudicacion_sin_iva } durante el periodo de ${myRegionData.periodo}

${myRegionData.note ? `

Nota: ${myRegionData.note}

` : ""}

Fuente: contrato 🔗

`, chunkPublic: `

En ${myRegionData.region_name} el servicio de atención de llamadas del 112 es de gestión pública.

` } })35:[{"id":"4195ff133613742abadae84b95632c72962e92e154c57e3f6a31086a62e2230325f4e7ba812b4f9ab1ba782c90c2a027de8fbbf97bf66ff07c5c0538d769e6a1","href":"https://static.observableusercontent.com/files/4195ff133613742abadae84b95632c72962e92e154c57e3f6a31086a62e2230325f4e7ba812b4f9ab1ba782c90c2a027de8fbbf97bf66ff07c5c0538d769e6a1","name":"ES-CCAAs.svg","type":"image/svg+xml","lastModified":1736349180107.896,"size":54553}] 2e:{"title":"Privatization of the 112 Emergency Call Service 📞","cells":[{"id":0,"value":"# Privatization of the 112 Emergency Call Service 📞\n\n.\n\n**Article published in Civio (21/01/25):**\n\n- Spanish version: [Subcontratado y con convenio de telemarketing: la situación del 112 en once comunidades autónomas](https://civio.es/lo-publico/2025/01/21/subcontratado-y-con-convenio-de-telemarketing-la-situacion-del-112-en-once-comunidades-autonomas/).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":1013,"value":"

${dataLocale[languageSelector].title}

","pinned":false,"hidden":false,"mode":"html"},{"id":359,"value":"$30","pinned":true,"hidden":false,"mode":"html"},{"id":608,"value":"viewof svgIlunion = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"viewof svgFerrovial = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"viewof svgAvilon = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"//sourceHtml = html`${dataLocale[languageSelector].source}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"sourceHtml = html`${dataLocale[languageSelector].source}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"chunkPrivate = html`\n ${dataLocale[languageSelector].chunkPrivate}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"resumeViz = html`\n ${dataLocale[languageSelector].resume}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"resumeCompanies = html`\nPrincipales adjudicatarias:\n

\n ${viewof svgIlunion} ILUNION Emergencias\n ${viewof svgFerrovial} Serveo Servicios (antigua Ferrovial)\n ${viewof svgAvilon} Avilon Center \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"chunkPublic = html`\n ${dataLocale[languageSelector].chunkPublic}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"function onMouseOver(event, d, i) {\n d3.select(this).select(\".region-hex\").transition().style(\"fill-opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n d3.select(this)\n .select(\".region-hex\")\n .transition()\n .style(\"fill-opacity\", fillOpacityBasicState);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"dataURL = \"https://data.civio.es/lopublico/servicio-112/mapa-112.csv?q=3\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"dataRaw = await d3.csv(dataURL, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif = {\n const dataCleaning = dataRaw.map((d) => ({\n region_code: d.region_code,\n region_name: d.region_name,\n private: d.externalizacion === \"Sí\" ? true : false,\n url_contrato: d.url_contrato,\n adjudicataria: d.adjudicataria,\n adjudicataria_clean: d.adjudicataria_clean_legend,\n importe_adjudicacion_sin_iva: d.importe_adjudicacion_sin_iva,\n periodo: d.periodo,\n note: d.note\n }));\n\n return dataCleaning.sort((a, b) =>\n d3.ascending(a.region_name, b.region_name)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"Inputs.table(dataModif)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = dataModif","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"myRegionData = data.find((d) => d.region_code === map.myRegion)","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"totalPrivate = data.filter((d) => d.private).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"totalPublic = data.filter((d) => !d.private).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"---\n\n### Detect user IP","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"geoIp = await fetch(\"https://api.ipbase.com/v1/json/\")\n .then((res) => res.json())\n .catch(() => null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"myRegions = data.map((d) => d.region_code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"myIPRegion = {\n const defaultRegion = \"VC\";\n\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":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"// es-ES format\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"myRegionData","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 550","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"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","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 This 320 is just for testing. On production the devideSelection will always be \"desktop\", so it will take the Math.min(width, maxWidth) as expected","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"isMobile = width < mediaQueryLimit || deviceSelection === \"mobile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"colorPrivate = \"#f74383\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"//colorPublic = \"#002A6D\" // civio main blue\n//colorPublic = \"#3d64a3\" // a bit lighter and desaturated\ncolorPublic = \"#7391c6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"contextColor = colorNeutral(40)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"contextWidth = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"fillOpacityBasicState = 0.9","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"{\n //variables to generate the code\n const variables = {\n url: \"https://graphs.civio.es/lopublico/servicio-112/viz-observable/\", // URL at Civio's repository `civio-graphs`.\n heightDesktop: \"\", //not necessary if there is only one height\n heightMobile: height,\n mediaQuery: mediaQueryLimit, //breakpoint\n lang: languageSelector,\n variableHeight: true //if there are two heights -> true, if there is only one -> false\n };\n\n return md`~~~html\n${codeToExportIframe(\n variables.url,\n variables.heightDesktop,\n variables.heightMobile,\n variables.mediaQuery,\n variables.lang,\n variables.variableHeight\n)}\n~~~\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}