31:T41d,# #754 Spanish Primary Healthcare Pressure Map 2021/22 . **New version here (25/05/23)!** [Spanish Primary Healthcare Pressure Map 2022 | Map & dataset updates ](https://observablehq.com/@civio/buscador-atencion-primaria-v02) ----- **Article published in Civio (24/11/22):** - Spanish version: [Buscador | Consulta la presión asistencial en la atención primaria de tu área de salud ](https://civio.es/medicamentalia/buscador-presion-asistencial-atencion-primaria/). **References**: - Observable notebook [Hello, Mapbox GL](https://observablehq.com/@observablehq/hello-mapbox-gl) by [Mike Bostock](https://observablehq.com/@mbostock) 🙌🏻. - Observable [Tiny charts](https://observablehq.com/@hamzaamjad/tiny-charts) by [Hamza Amjad](https://observablehq.com/@hamzaamjad) 🙌🏻. - Observable [Inputs table](https://observablehq.com/@observablehq/input-table). - Mapbox GL JS [API reference](https://docs.mapbox.com/mapbox-gl-js/api/) and [examples](https://docs.mapbox.com/mapbox-gl-js/example/) (see list at the end of the notebook). ---32:T4331,viewof APmap = { // AP-map container const container = html`

`; // Prepare map content div const mapContent = html`

`; // 3 main sections + CSS styles container.appendChild(mapHeader); container.appendChild(mapDetailedInfo); container.appendChild(mapContent); container.appendChild(style); yield container; // Visible extent // http://bboxfinder.com/#26.659986,-19.195650,45.218596,7.470413 const bounds = [ [-19.19565, 26.659986], // Southwest coordinates [7.470413, 45.218596] // Northeast coordinates ]; // Create the \`map\` object with the mapboxgl.Map constructor, referencing the container div const map = (container.value = new mapboxgl.Map({ container: mapContent, center: [-3.059475, 40.55331], // Fits pensínsula Ibérica maxBounds: bounds, // Set the map's geographical boundaries. zoom: 5, style: "mapbox://styles/civio/cla8m4s5z000314mccqvj3l5d", // AP custom style scrollZoom: true })); // https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ let hoveredStateId = null; // Wait until the map loads. map.on("load", () => { let speciality = "mf"; // By default let featuresPolyg = dataMerge.features.map((d) => d.properties); let featuresPoints = pointsMerge.features.map((d) => d.properties); let features = featuresPolyg.concat(featuresPoints); container.value = { map, speciality, features }; container.dispatchEvent(new CustomEvent("input")); // LAYERS // A. Source layers map.addSource("source_AS", { type: "geojson", data: dataMerge, promoteId: "area_code" // !! id of each future, needed for managing the hover state }); map.addSource("source_CS", { type: "geojson", data: pointsMerge, promoteId: "area_code" // !! id of each future, needed for managing the hover state }); // B. Painted layers // POINTS // 3. Points ENF map.addLayer({ id: "layer_CS_enf-points", type: "circle", source: "source_CS", paint: { "circle-radius": pointsRad, "circle-color": [ "case", ["==", ["get", "enf_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "enf_data_2021_2022"], color_enf.domain()[0], color_enf.range()[0], color_enf.domain()[1], color_enf.range()[1] ] ], "circle-opacity": 0 } }); // 2. Points PED map.addLayer({ id: "layer_CS_ped-points", type: "circle", source: "source_CS", paint: { "circle-radius": pointsRad + 0.02, "circle-color": [ "case", ["==", ["get", "ped_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "ped_data_2021_2022"], color_ped.domain()[0], color_ped.range()[0], color_ped.domain()[1], color_ped.range()[1] ] ], "circle-opacity": 0 } }); // 1. Points MF map.addLayer({ id: "layer_CS_mf-points", type: "circle", source: "source_CS", paint: { "circle-radius": pointsRad, "circle-color": [ "case", ["==", ["get", "mf_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "mf_data_2021_2022"], color_mf.domain()[0], color_mf.range()[0], color_mf.domain()[1], color_mf.range()[1] ] ], "circle-opacity": baseOpacity } }); // 3. Polygons fills ENF map.addLayer( { id: "layer_AS_enf-fill", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", "enf_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "enf_data_2021_2022"], color_enf.domain()[0], color_enf.range()[0], color_enf.domain()[1], color_enf.range()[1] ] ], "fill-opacity": 0 } }, "settlement-minor-label" ); // Place layer under these labels. // 2. Polygons fills PED map.addLayer( { id: "layer_AS_ped-fill", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", "ped_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "ped_data_2021_2022"], color_ped.domain()[0], color_ped.range()[0], color_ped.domain()[1], color_ped.range()[1] ] ], "fill-opacity": 0 //"fill-opacity-transition": { duration: opacityDuration } } }, "settlement-minor-label" ); // Place layer under these labels. // 1. Polygons fills mf map.addLayer( { id: "layer_AS_mf-fill", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", "mf_data_2021_2022"], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", "mf_data_2021_2022"], color_mf.domain()[0], color_mf.range()[0], color_mf.domain()[1], color_mf.range()[1] ] ], "fill-opacity": baseOpacity } }, "settlement-minor-label" ); // Place layer under these labels. // Points bigger - for HOVER INTERACTIONS map.addLayer({ id: "points-outline", type: "circle", source: "source_CS", paint: { "circle-radius": pointsRad + 2, "circle-color": colorNeutral(1000), "circle-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 1, 0 ] } }); // Polygons borders - for HOVER INTERACTIONS // https://stackoverflow.com/questions/52162989/mapbox-gl-js-changing-polygon-border-width map.addLayer({ id: "layer-outline", type: "line", source: "source_AS", paint: { "line-color": colorNeutral(900), "line-width": [ "case", ["boolean", ["feature-state", "hover"], false], 2.5, 0.1 ], "line-opacity": 1 } }); // FILTER DATA BY SPECIALITY // https://observablehq.com/@benjaminadk/mapbox-tutorials document.getElementById("filter").addEventListener("change", function (e) { speciality = e.target.value; // A. UPDATE DINAMIC TABLE let targetLayers; if (speciality === "mf") { targetLayers = ["layer_AS_mf-fill", "layer_CS_mf-points"]; } else if (speciality === "enf") { targetLayers = ["layer_AS_enf-fill", "layer_CS_enf-points"]; } else if (speciality === "ped") { targetLayers = ["layer_AS_ped-fill", "layer_CS_ped-points"]; } const visibleFeatures = map.queryRenderedFeatures({ layers: targetLayers }); if (visibleFeatures) { // Because features come from tiled vector data, feature geometries may be split or duplicated across tile boundaries. As a result, features may appear multiple times in query results. const uniqueFeatures = getUniqueFeatures(visibleFeatures, "area_code"); const features = uniqueFeatures.map((d) => d.properties); container.value = { map, speciality, features }; container.dispatchEvent(new CustomEvent("input")); } // B. UPDATE MAP if (speciality === "mf") { // FILLS // Using "Setpaintproperty" to change the "fill-opacity". // https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setpaintproperty map.setPaintProperty("layer_AS_mf-fill", "fill-opacity", baseOpacity); map.setPaintProperty("layer_AS_enf-fill", "fill-opacity", 0); map.setPaintProperty("layer_AS_ped-fill", "fill-opacity", 0); // POINTS map.setPaintProperty( "layer_CS_mf-points", "circle-opacity", baseOpacity ); map.setPaintProperty("layer_CS_enf-points", "circle-opacity", 0); map.setPaintProperty("layer_CS_ped-points", "circle-opacity", 0); // Moving layers position, similar to z-index // https://docs.mapbox.com/mapbox-gl-js/api/map/#map#movelayer map.moveLayer("layer_AS_enf-fill", "layer_AS_mf-fill"); map.moveLayer("layer_AS_ped-fill", "layer_AS_mf-fill"); map.moveLayer("layer_CS_enf-points", "layer_CS_mf-points"); map.moveLayer("layer_CS_ped-points", "layer_CS_mf-points"); // Update color scale legend document.getElementById("legend-mf").style.display = "block"; document.getElementById("legend-enf").style.display = "none"; document.getElementById("legend-ped").style.display = "none"; // More performant than using "setLayoutProperty" to "visible" or "none" (flickering problem) // https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/ } else if (speciality === "enf") { // FILLS map.setPaintProperty("layer_AS_mf-fill", "fill-opacity", 0); map.setPaintProperty("layer_AS_enf-fill", "fill-opacity", baseOpacity); map.setPaintProperty("layer_AS_ped-fill", "fill-opacity", 0); // POINTS map.setPaintProperty("layer_CS_mf-points", "circle-opacity", 0); map.setPaintProperty( "layer_CS_enf-points", "circle-opacity", baseOpacity ); map.setPaintProperty("layer_CS_ped-points", "circle-opacity", 0); map.moveLayer("layer_AS_mf-fill", "layer_AS_enf-fill"); map.moveLayer("layer_AS_ped-fill", "layer_AS_enf-fill"); map.moveLayer("layer_CS_mf-points", "layer_CS_enf-points"); map.moveLayer("layer_CS_ped-points", "layer_CS_enf-points"); // Update color scale legend document.getElementById("legend-mf").style.display = "none"; document.getElementById("legend-enf").style.display = "block"; document.getElementById("legend-ped").style.display = "none"; } else if (speciality === "ped") { // FILLS map.setPaintProperty("layer_AS_mf-fill", "fill-opacity", 0); map.setPaintProperty("layer_AS_enf-fill", "fill-opacity", 0); map.setPaintProperty("layer_AS_ped-fill", "fill-opacity", baseOpacity); // POINTS map.setPaintProperty("layer_CS_mf-points", "circle-opacity", 0); map.setPaintProperty("layer_CS_enf-points", "circle-opacity", 0); map.setPaintProperty( "layer_CS_ped-points", "circle-opacity", baseOpacity ); map.moveLayer("layer_AS_mf-fill", "layer_AS_ped-fill"); map.moveLayer("layer_AS_enf-fill", "layer_AS_ped-fill"); map.moveLayer("layer_CS_mf-points", "layer_CS_ped-points"); map.moveLayer("layer_CS_enf-points", "layer_CS_ped-points"); // Update color scale legend document.getElementById("legend-mf").style.display = "none"; document.getElementById("legend-enf").style.display = "none"; document.getElementById("legend-ped").style.display = "block"; } else { console.log("error"); } }); // INTERACTIONS !! // When the user moves their mouse over the state-fill layer, we'll update the // feature state for the feature under the mouse. // Changing initial "mousenter" event my "mousemove" as it wasn't not working well map.on( "mousemove", [ "layer_AS_mf-fill", "layer_AS_enf-fill", "layer_AS_ped-fill", "layer_CS_mf-points", "layer_CS_enf-points", "layer_CS_ped-points" ], (e) => { // 1. Creating a lateral panel instead of popup // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; // Copy coordinates array. const coordinates = e.lngLat; // Single out the first found feature. const feature = e.features[0]; const key = feature.layer.id.split("_")[2].split("-")[0]; const description = setDetailedInfo_text(feature, key); // DETAILED INFO - Lateral panel document.getElementById("detailed-information").innerHTML = description; // 2. Managing HOVER state if (e.features.length > 0) { if (hoveredStateId !== null) { map.setFeatureState( { source: "source_AS", id: hoveredStateId }, { hover: false } ); map.setFeatureState( { source: "source_CS", id: hoveredStateId }, { hover: false } ); } hoveredStateId = e.features[0].id; // this is the promoteId, in our case, the unique "area_code" map.setFeatureState( { source: "source_AS", id: hoveredStateId }, { hover: true } ); map.setFeatureState( { source: "source_CS", id: hoveredStateId }, { hover: true } ); } } ); // When the mouse leaves the state-fill layer, update the feature state of the // previously hovered feature. map.on( "mouseleave", [ "layer_AS_mf-fill", "layer_AS_enf-fill", "layer_AS_ped-fill", "layer_CS_mf-points", "layer_CS_enf-points", "layer_CS_ped-points" ], () => { map.getCanvas().style.cursor = ""; // 1. Emptying lateral panel document.getElementById("detailed-information").innerHTML = ""; // 2. Managing HOVER state if (hoveredStateId !== null) { map.setFeatureState( { source: "source_AS", id: hoveredStateId }, { hover: false } ); map.setFeatureState( { source: "source_CS", id: hoveredStateId }, { hover: false } ); } hoveredStateId = null; } ); // Filtering visible features withing the map view // https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/ map.on("moveend", () => { let targetLayers; if (speciality === "mf") { targetLayers = ["layer_AS_mf-fill", "layer_CS_mf-points"]; } else if (speciality === "enf") { targetLayers = ["layer_AS_enf-fill", "layer_CS_enf-points"]; } else if (speciality === "ped") { targetLayers = ["layer_AS_ped-fill", "layer_CS_ped-points"]; } const visibleFeatures = map.queryRenderedFeatures({ layers: targetLayers }); if (visibleFeatures) { // Because features come from tiled vector data, feature geometries may be split or duplicated across tile boundaries. As a result, features may appear multiple times in query results. const uniqueFeatures = getUniqueFeatures(visibleFeatures, "area_code"); const features = uniqueFeatures.map((d) => d.properties); container.value = { map, speciality, features }; container.dispatchEvent(new CustomEvent("input")); } }); // CONTROLS // https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/ // Add geocoder control map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl, placeholder: dataLocale[languageSelector].messageGeocoder, marker: false, // https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-limit-region/ countries: "es" // https://docs.mapbox.com/api/search/geocoding/#data-types //types: "place" }) ); // Add zoom and rotation controls to the map //map.addControl(new mapboxgl.FullscreenControl(), "bottom-right"); map.addControl(new mapboxgl.NavigationControl(), "top-right"); // Add small scale control :) map.addControl( new mapboxgl.ScaleControl({ maxWidth: 80, unit: "metric" }) ); }); invalidation.then(() => map.remove()); }33:Te42,// https://observablehq.com/@observablehq/input-table APtable = { // Show fields depending on the speciality filter const speciality = APmap.speciality; let fields; let maxRatio; let colorScale; if (speciality === "mf") { fields = { presion: "mf_data_2021_2022", ratio: "mf_ratio_2021", evolution_presion: "presion_mf", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_mf; colorScale = color_mf; } else if (speciality === "enf") { fields = { presion: "enf_data_2021_2022", ratio: "enf_ratio_2021", evolution_presion: "presion_enf", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_enf; colorScale = color_enf; } else if (speciality === "ped") { fields = { presion: "ped_data_2021_2022", ratio: "ped_ratio_2021", evolution_presion: "presion_ped", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_ped; colorScale = color_ped; } const fieldPresion = fields.presion; const fieldRatio = fields.ratio; const fieldEvolutionPresion = fields.evolution_presion; const fieldEvolutionRatio = fields.evolution_ratio; let input = Inputs.table(APmap.features, { columns: [ "region_name", "area_name", // EVOLUTION TINY CHARTS "evolution_presion", fieldPresion, "evolution_ratio", fieldRatio ], header: { region_name: "Comunidad autónoma", area_name: "Área/Centro de salud", // EVOLUTION TINY CHARTS evolution_presion: `Evolución presión ${ dataLocale[languageSelector][speciality + "_small"] }`, evolution_ratio: `Evolución cupo ${ dataLocale[languageSelector][speciality + "_small"] }`, [fieldPresion]: "Presión 2021/2022", [fieldRatio]: "Cupo 2021" }, format: { evolution_presion: (x) => tinyLineChart( tryParseJSONObject(x) ? JSON.parse(x) : x, "presion", fieldEvolutionPresion ), evolution_ratio: (x) => tinyLineChart( tryParseJSONObject(x) ? JSON.parse(x) : x, "ratio", fieldEvolutionRatio ), [fieldPresion]: (x) => htl.html`

${formatDecimal(x)}`, [fieldRatio]: (x) => htl.html`

${formatIntegers(x)}${x > maxRatio ? " *" : ""}` }, align: { [fieldPresion]: "left", [fieldRatio]: "left" }, // This is working in Observable but not in production... for that reason I'm adding those widths in the CSS bit as well, to keep each column truly fixed width: { region_name: widthTableColumnCCAA, area_name: widthTableColumnName, evolution_presion: widthTableColumnPresionEvolution, fieldPresion: widthTableColumnPresion, evolution_ratio: widthTableColumnRatioEvolution, [fieldRatio]: widthTableColumnRatio }, sort: fieldPresion, reverse: true, maxWidth: maxWidth }); // Custom styles (not working on production, so adding them as CSS styles below) //d3.select(input).select("*").style("font-family", "'Lato', sans-serif;"); //d3.select(input).select("tr>:first-of-type").style("width", "0!important"); /*d3.select(input) .select("tr>:first-of-type input") .style("display", "none!important");*/ // Adding CSS styles input.append(svgTable); return input; }34:T56b,mapHeader = html`

${dataLocale[languageSelector].mapTitle}

${ dataLocale[languageSelector].mf_code } ${ dataLocale[languageSelector].ped_code } ${ dataLocale[languageSelector].enf_code }

${legend({ color: color_mf, title: "Pacientes vistos al día (MED)", width: 200 //tickFormat: format })}

`35:T10d4, 36:T64f, 37:T1c5e,setDetailedInfo_text = (data, key) => { //console.log(key); const area_name = data.properties.area_name; const region_code = data.properties.region_code; const region_name = data.properties.region_name; // AREA DATASETS: const data_2018 = data.properties[`${key}_data_2018`]; const data_2019 = data.properties[`${key}_data_2019`]; const data_2020 = data.properties[`${key}_data_2020`]; const data_2021 = data.properties[`${key}_data_2021`]; const data_2022 = data.properties[`${key}_data_2022`]; const ratio_2018 = data.properties[`${key}_ratio_2018`]; const ratio_2019 = data.properties[`${key}_ratio_2019`]; const ratio_2020 = data.properties[`${key}_ratio_2020`]; const ratio_2021 = data.properties[`${key}_ratio_2021`]; const ratio_2022 = data.properties[`${key}_ratio_2022`]; let speciality; let maxRatio; let maxSource; let colorScale; if (key === "mf") { speciality = dataLocale[languageSelector].mf; maxSource = dataLocale[languageSelector].maxSource_mf; maxRatio = maxRatio_mf; colorScale = color_mf; } else if (key === "enf") { speciality = dataLocale[languageSelector].enf; maxSource = dataLocale[languageSelector].maxSource_enf; maxRatio = maxRatio_enf; colorScale = color_enf; } else if (key === "ped") { speciality = dataLocale[languageSelector].ped; maxSource = dataLocale[languageSelector].maxSource_ped; maxRatio = maxRatio_ped; colorScale = color_ped; } const description = `

${area_name}

${region_name.toUpperCase()}

2022

Pres. asistencial: ${ data_2022 ? formatDecimal(data_2022) : dataLocale[languageSelector].messageNoData } ${data_2022 ? dataLocale[languageSelector].pacientsDay : ""}
Cupo: ${ ratio_2022 ? formatIntegers(ratio_2022) : dataLocale[languageSelector].messageNoData }${ratio_2022 > maxRatio ? " *" : ""} ${ ratio_2022 ? `pacientes por ${speciality}.` : "" }

2021

Pres. asistencial: ${ data_2021 ? formatDecimal(data_2021) : dataLocale[languageSelector].messageNoData } ${data_2021 ? dataLocale[languageSelector].pacientsDay : ""}
Cupo: ${ ratio_2021 ? formatIntegers(ratio_2021) : dataLocale[languageSelector].messageNoData }${ratio_2021 > maxRatio ? " *" : ""} ${ ratio_2021 ? `pacientes por ${speciality}.` : "" }

2020

Pres. asistencial: ${ data_2020 ? formatDecimal(data_2020) : dataLocale[languageSelector].messageNoData } ${data_2020 ? dataLocale[languageSelector].pacientsDay : ""}
Cupo: ${ ratio_2020 ? formatIntegers(ratio_2020) : dataLocale[languageSelector].messageNoData }${ratio_2020 > maxRatio ? " *" : ""} ${ ratio_2020 ? `pacientes por ${speciality}.` : "" }

2019

Pres. asistencial: ${ data_2019 ? formatDecimal(data_2019) : dataLocale[languageSelector].messageNoData } ${data_2019 ? dataLocale[languageSelector].pacientsDay : ""}
Cupo: ${ ratio_2019 ? formatIntegers(ratio_2019) : dataLocale[languageSelector].messageNoData }${ratio_2019 > maxRatio ? " *" : ""} ${ ratio_2019 ? `pacientes por ${speciality}.` : "" }

2018

Pres. asistencial: ${ data_2018 ? formatDecimal(data_2018) : dataLocale[languageSelector].messageNoData } ${data_2018 ? dataLocale[languageSelector].pacientsDay : ""}
Cupo: ${ ratio_2018 ? formatIntegers(ratio_2018) : dataLocale[languageSelector].messageNoData }${ratio_2018 > maxRatio ? " *" : ""} ${ ratio_2018 ? `pacientes por ${speciality}.` : "" }

`; return description; }38:T8c2,function structureData(d, subject) { //console.log("structureData: d", d); //console.log("value_mf", d.properties.mf_data_2018); let myObject; if (subject === "presion") { myObject = [ { date: new Date(2018, 0, 1), presion_mf: d.properties.mf_data_2018, presion_ped: d.properties.ped_data_2018, presion_enf: d.properties.enf_data_2018 }, { date: new Date(2019, 0, 1), presion_mf: d.properties.mf_data_2019, presion_ped: d.properties.ped_data_2019, presion_enf: d.properties.enf_data_2019 }, { date: new Date(2020, 0, 1), presion_mf: d.properties.mf_data_2020, presion_ped: d.properties.ped_data_2020, presion_enf: d.properties.enf_data_2020 }, { date: new Date(2021, 0, 1), presion_mf: d.properties.mf_data_2021, presion_ped: d.properties.ped_data_2021, presion_enf: d.properties.enf_data_2021 }, { date: new Date(2022, 0, 1), presion_mf: d.properties.mf_data_2022, presion_ped: d.properties.ped_data_2022, presion_enf: d.properties.enf_data_2022 } ]; } else if (subject === "ratio") { myObject = [ { date: new Date(2018, 0, 1), ratio_mf: d.properties.mf_ratio_2018, ratio_ped: d.properties.ped_ratio_2018, ratio_enf: d.properties.enf_ratio_2018 }, { date: new Date(2019, 0, 1), ratio_mf: d.properties.mf_ratio_2019, ratio_ped: d.properties.ped_ratio_2019, ratio_enf: d.properties.enf_ratio_2019 }, { date: new Date(2020, 0, 1), ratio_mf: d.properties.mf_ratio_2020, ratio_ped: d.properties.ped_ratio_2020, ratio_enf: d.properties.enf_ratio_2020 }, { date: new Date(2021, 0, 1), ratio_mf: d.properties.mf_ratio_2021, ratio_ped: d.properties.ped_ratio_2021, ratio_enf: d.properties.enf_ratio_2021 }, { date: new Date(2022, 0, 1), ratio_mf: d.properties.mf_ratio_2022, ratio_ped: d.properties.ped_ratio_2022, ratio_enf: d.properties.enf_ratio_2022 } ]; } return myObject; }39:T51e,function tinyLineChart(dataset, topic, field) { const dataValues = dataset.map((d) => d[field]); //const tinyWidth = tinyWidth; const lastItem = dataValues[dataValues.length - 1]; //console.log("dataValues", dataValues); let colorLine; if (topic === "presion") { colorLine = colorNeutral(1000); } else if (topic === "ratio") { colorLine = colorNeutral(300); } const xstart = 0; const ystart = 0; //const spacer = 150; return html``; }3a:T1329,function line_modif(values, options = {}) { let { width, height, color, size, highlights, datum, scaling, margin } = { width: 45, height: 25, color: "black", size: 1, highlights: { start: null, end: null, min: null, max: null, myPoints: null }, datum: null, scaling: "min", margin: { horizontal: 0.1, vertical: 0.125 }, ...options }; const x = d3 .scaleLinear() .domain([0, values.length - 1]) .range([width * margin.horizontal, width - width * margin.horizontal]); const yscale = scaling == "zero" ? [0, d3.max(values)] : scaling === "min" ? d3.extent(values) : d3.extent(values); const y = d3 .scaleLinear() .domain(yscale) .range([height - height * margin.vertical, height * margin.vertical]); const context = DOM.context2d(width, height); const range = (start, stop, step) => Array.from( { length: (stop - start) / step + 1 }, (_, i) => start + i * step ).map((d) => Number(d.toFixed(2))); const zip = (a, b) => a.map((k, i) => [k, b[i]]); // Color logic if (typeof color === "object" && color !== null) { var gradient = context.createLinearGradient(0, 0, 0, height); if (Object.keys(color)[0] === "gradient") { if (typeof color["gradient"][0] === "object") { color["gradient"].forEach((g) => { gradient.addColorStop(g.value, g.color); }); } else { const step_length = 1 / (color["gradient"].length - 1); const steps = range(0, 1, step_length); const colorStops = zip(color["gradient"], steps); colorStops.forEach((e) => { gradient.addColorStop(e[1], e[0]); }); } } if (Object.keys(color)[0] === "threshold") { gradient.addColorStop( y(color["threshold"]["value"]) / height, color["threshold"]["above"] ); gradient.addColorStop( y(color["threshold"]["value"]) / height, color["threshold"]["below"] ); } color = gradient; } // Line drawing function, the core const line = (d) => { context.beginPath(); var lineDrawer = d3 .line() .x((d, i) => x(i)) .y(y) .context(context); lineDrawer(d); context.strokeStyle = color; context.lineWidth = size; context.stroke(); context.closePath(); }; // Highlights drawn on line as points const points = []; if (highlights.myPoints !== undefined && highlights.start !== null) { // console.log("myPoints", highlights.myPoints); // TODO } if (highlights.start !== undefined && highlights.start !== null) { //console.log("start", highlights.start); //console.log("start value", values[0]); //console.log("start x: 0", 0); points.push({ value: values[0], color: highlights.start, x: 0 }); } if (highlights.end !== undefined && highlights.end !== null) { //console.log("end", highlights.end); //console.log("end value", values[values.length - 1]); //console.log("end x", values.length); points.push({ value: values[values.length - 1] || values[values.length - 2], color: highlights.end, //x: values.length //x: values.length - 1 // I HAVE CHANGE THIS!! // Last non-null item x: values[values.length - 1] ? [values.length - 1] : [values.length - 2] }); } if (highlights.min !== undefined && highlights.min !== null) { points.push({ value: d3.min(values), color: highlights.min, x: d3.minIndex(values) }); } if (highlights.max !== undefined && highlights.min !== null) { points.push({ value: d3.max(values), color: highlights.max, x: d3.maxIndex(values) }); } const point = (d) => { context.beginPath(); d.forEach((d) => { context.beginPath(); context.arc(x(d.x), y(d.value), 2, 0, 2 * Math.PI); context.fillStyle = d.color; context.fill(); }); }; line(values); point(points); //console.log("dataValues", dataValues); //console.log("values", values); //console.log("line(values)", line(values)); //console.log("points", points); //console.log("point(points)", point(points)); // Datum // {value: , color: } if (datum !== undefined && datum !== null) { if (datum.color === undefined || datum.color === null) { datum.color = "black"; } if (datum.size === undefined || datum.size === null) { datum.size = 1; } if (datum.dash === undefined || datum.dash === null) { datum.dash = []; } context.strokeStyle = datum.color; context.lineWidth = datum.size; context.setLineDash(datum.dash); context.beginPath(); context.moveTo(width * margin.horizontal, y(datum.value)); context.lineTo(width - width * margin.horizontal, y(datum.value)); context.stroke(); } return context.canvas; }3b:T107d,pointsMerge = { const geoDataset = points.features; //const statsCCAADataset = dataRaw_mf_CS; const dataMerged = geoDataset.map((d, i) => ({ ...d, properties: { //...d.properties, // Keeping just the 2 keys-value I need from the geoJSON: region_code: "MD", region_name: "Comunidad de Madrid", area_code: d.properties["CODIGO2"], // Unique id area_name: d.properties["TIPOCEN2"], // Adding new keys-values from the csv dataset: // 1. mf // mf Presión asistencial: mf_data_2018: dataRaw_mf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2018"], mf_data_2019: dataRaw_mf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2019"], mf_data_2020: dataRaw_mf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2020"], mf_data_2021: dataRaw_mf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2021"], mf_data_2022: dataRaw_mf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: mf_data_2021_2022: dataRaw_mf_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2022" ] || dataRaw_mf_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2021" ], // mf Cuotas ratios mf_ratio_2018: null, mf_ratio_2019: null, mf_ratio_2020: null, mf_ratio_2021: null, mf_ratio_2022: null, // 2. ped // ped Presión asistencial: ped_data_2018: dataRaw_ped_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2018"], ped_data_2019: dataRaw_ped_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2019"], ped_data_2020: dataRaw_ped_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2020"], ped_data_2021: dataRaw_ped_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2021"], ped_data_2022: dataRaw_ped_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: ped_data_2021_2022: dataRaw_ped_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2022" ] || dataRaw_ped_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2021" ], // ped Cuotas ratios ped_ratio_2018: null, ped_ratio_2019: null, ped_ratio_2020: null, ped_ratio_2021: null, ped_ratio_2022: null, // enf // 3. enf Presión asistencial: enf_data_2018: dataRaw_enf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2018"], enf_data_2019: dataRaw_enf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2019"], enf_data_2020: dataRaw_enf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2020"], enf_data_2021: dataRaw_enf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2021"], enf_data_2022: dataRaw_enf_cs.filter( (e) => e.CS_code === d.properties.CODIGO2 )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: enf_data_2021_2022: dataRaw_enf_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2022" ] || dataRaw_enf_cs.filter((e) => e.CS_code === d.properties.CODIGO2)[0][ "presion_2021" ], // enf Cuotas ratios enf_ratio_2018: null, enf_ratio_2019: null, enf_ratio_2020: null, enf_ratio_2021: null, enf_ratio_2022: null } })); const dataMergedEvolut = dataMerged.map((d) => ({ ...d, properties: { ...d.properties, evolution_presion: structureData(d, "presion"), evolution_ratio: structureData(d, "ratio") } })); return { type: "FeatureCollection", features: dataMergedEvolut }; }3c:T1a32,dataMerge = { // Joining 2 datasets: geographical and stats const geoDataset = dataPolyg1.features.concat( // CB dataPolyg2.features, // CM dataPolyg3.features, // EX dataPolyg4.features, // AR dataPolyg5.features, // CL dataPolyg6.features, // CN dataPolyg7.features, // CT dataPolyg8.features, // NC dataPolyg9.features, // PV dataPolyg10.features, // RI dataPolyg11.features, // VC dataPolyg12.features, // GA dataPolyg13.features, // MC dataPolyg14.features, // AN dataPolyg15.features, // IB dataPolyg16.features, // AS dataPolyg17.features, // CE dataPolyg18.features // ML //dataPolyg19.features // MD ); const statsCCAADataset = dataRaw_mf_ccaa; const dataMerged = geoDataset.map((d, i) => ({ ...d, properties: { //...d.properties, // Keeping just the 2 keys-value I need from the geoJSON: region_code: d.properties["region_code"], area_code: d.properties["area_code"], // Region name from other dataset region_name: statsCCAADataset.filter( (e) => e.region_code === d.properties.region_code )[0]["CCAA"], // Adding new keys-values from the csv dataset: // TODO-Refactor: can I simplify this? area_name: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["area_name"], // 1. mf // mf Presión asistencial: mf_data_2018: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2018"], mf_data_2019: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2019"], mf_data_2020: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2020"], mf_data_2021: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2021"], mf_data_2022: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: mf_data_2021_2022: dataRaw_mf_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2022" ] || dataRaw_mf_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2021" ], // mf Cuotas ratios mf_ratio_2018: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2018"], mf_ratio_2019: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2019"], mf_ratio_2020: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2020"], mf_ratio_2021: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2021"], mf_ratio_2022: dataRaw_mf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2022"], // 2. ped // ped Presión asistencial: ped_data_2018: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2018"], ped_data_2019: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2019"], ped_data_2020: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2020"], ped_data_2021: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2021"], ped_data_2022: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: ped_data_2021_2022: dataRaw_ped_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2022" ] || dataRaw_ped_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2021" ], // ped Cuotas ratios ped_ratio_2018: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2018"], ped_ratio_2019: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2019"], ped_ratio_2020: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2020"], ped_ratio_2021: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2021"], ped_ratio_2022: dataRaw_ped_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2022"], // enf // 3. enf Presión asistencial: enf_data_2018: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2018"], enf_data_2019: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2019"], enf_data_2020: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2020"], enf_data_2021: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2021"], enf_data_2022: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["presion_2022"], // NEW: Adding data from 2021 when 2022 is not available: enf_data_2021_2022: dataRaw_enf_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2022" ] || dataRaw_enf_as.filter((e) => e.area_code === d.properties.area_code)[0][ "presion_2021" ], // enf Cuotas ratios enf_ratio_2018: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2018"], enf_ratio_2019: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2019"], enf_ratio_2020: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2020"], enf_ratio_2021: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2021"], enf_ratio_2022: dataRaw_enf_as.filter( (e) => e.area_code === d.properties.area_code )[0]["cuota_2022"] } })); const dataMergedEvolut = dataMerged.map((d) => ({ ...d, properties: { ...d.properties, evolution_presion: structureData(d, "presion"), evolution_ratio: structureData(d, "ratio") } })); // Clean ids from some areas? //delete dataMerged["id"]; return { type: "FeatureCollection", features: dataMergedEvolut }; }3d:T604,dataMerge_ES = { // Joining 2 datasets: geographical and stats const geoDataset = dataES.features; let statsDataset = dataRaw_mf_ccaa; //geoDataset.map((d) => console.log("geo", d)); //statsDataset.map((d) => console.log("stats", d)); const dataMerged = geoDataset.map((d) => ({ ...d, properties: { //...d.properties, // Keeping just the 1 keys-value I need from the geoJSON: region_code: d.properties["region_code"], // Adding new keys-values from the csv dataset: // TODO-Refactor: can I simplify this? region_name: statsDataset.filter( (e) => e.region_code === d.properties.region_code )[0]["CCAA"], data_2018: statsDataset.filter( (e) => e.region_name === d.properties.region_name )[0]["presion_2018"], data_2019: statsDataset.filter( (e) => e.region_name === d.properties.region_name )[0]["presion_2019"], data_2020: statsDataset.filter( (e) => e.region_name === d.properties.region_name )[0]["presion_2020"], data_2021: statsDataset.filter( (e) => e.region_name === d.properties.region_name )[0]["presion_2021"], data_2022: statsDataset.filter( (e) => e.region_name === d.properties.region_name )[0]["presion_2022"] //.toFixed(2) //data_2022_formatted: formatDecimal(d.data_2022) } })); //.sort((a, b) => d3.descending(a.noSentencedPercent, b.noSentencedPercent)); return { type: "FeatureCollection", features: dataMerged }; }3e: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: "Ουκρανία" } })3f:T480,--- ### Mapbox GL JS useful examples as references: - [Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/) - [Filter features within map view](https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) - [Change a layer's color with buttons](https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/) - [Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) - [Add a new layer below labels](https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/) - [Create a time slider](https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/) - [Get coordinates of the mouse pointer](https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/) - [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) - [Update a choropleth layer by zoom level](https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/) - [Filter symbols by toggling a list](https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/) - [Get features under the mouse pointer](https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/)40:[{"id":"cc78b884870e58cd55de71d46481ae8f6f4c764d0cccd3375fcbe98eb8e38b61b2d57a490a8c937a2377c2aeb5f45768f38e6ace16b300a25de8a09bac80ab5a","href":"https://static.observableusercontent.com/files/cc78b884870e58cd55de71d46481ae8f6f4c764d0cccd3375fcbe98eb8e38b61b2d57a490a8c937a2377c2aeb5f45768f38e6ace16b300a25de8a09bac80ab5a","name":"RI.json","type":"application/json","lastModified":1668773554973.82,"size":130760},{"id":"732ddf5ebb062274c88df185d10903967ff91ef2aba3b17d63c20e2acc5c38d7941159e3d715831b42cecd97d885e33bd69299f4ebd2d30c2b279cbbe25976ab","href":"https://static.observableusercontent.com/files/732ddf5ebb062274c88df185d10903967ff91ef2aba3b17d63c20e2acc5c38d7941159e3d715831b42cecd97d885e33bd69299f4ebd2d30c2b279cbbe25976ab","name":"CT.json","type":"application/json","lastModified":1668773554973.82,"size":281174},{"id":"d042f01a09050b66b5a56712b035989f52dd49602295e558d8378b6ed9fed7370e76dbb67fbff735d3d7e88ce641e8ff0726f1fd040e85f7cdd2d36fb292ecbf","href":"https://static.observableusercontent.com/files/d042f01a09050b66b5a56712b035989f52dd49602295e558d8378b6ed9fed7370e76dbb67fbff735d3d7e88ce641e8ff0726f1fd040e85f7cdd2d36fb292ecbf","name":"CL.json","type":"application/json","lastModified":1668773554973.82,"size":1465854},{"id":"1f1e97522893707d1bf370b61260ed011bfee85be919358896d0c19fddb87577c75d8bb6a41f272775211906a2c70504df81d342cdeaa279200a4341817a262a","href":"https://static.observableusercontent.com/files/1f1e97522893707d1bf370b61260ed011bfee85be919358896d0c19fddb87577c75d8bb6a41f272775211906a2c70504df81d342cdeaa279200a4341817a262a","name":"CN.json","type":"application/json","lastModified":1668773554973.82,"size":266484},{"id":"266f720adf5aecec005e266b5790d174081a92ab7927638fe2da268d9bbf65a5651c5f0e7121f498f3d85a32ad866975282eed6cf8a785aea2fcfb03cd3d08f1","href":"https://static.observableusercontent.com/files/266f720adf5aecec005e266b5790d174081a92ab7927638fe2da268d9bbf65a5651c5f0e7121f498f3d85a32ad866975282eed6cf8a785aea2fcfb03cd3d08f1","name":"VC.json","type":"application/json","lastModified":1668773554973.82,"size":2632236},{"id":"ea57173d2b0eaddfb299808af42de3abd02eff5fbc530ad5f127966f219dfac6e642d92b25fd25c8b704fa55e134351cc490a8ae4806eec6d97dfea2a2f11a94","href":"https://static.observableusercontent.com/files/ea57173d2b0eaddfb299808af42de3abd02eff5fbc530ad5f127966f219dfac6e642d92b25fd25c8b704fa55e134351cc490a8ae4806eec6d97dfea2a2f11a94","name":"MD.json","type":"application/json","lastModified":1668773554973.82,"size":2459140},{"id":"5a295476a591a280688b8dfc931c65f9c8c2399dd7ddbacf4ee0c194371b226b2437e0aa52aba53ff0fc200b678d4cc4cbbe573e06467f8f25d6ab503e0c8040","href":"https://static.observableusercontent.com/files/5a295476a591a280688b8dfc931c65f9c8c2399dd7ddbacf4ee0c194371b226b2437e0aa52aba53ff0fc200b678d4cc4cbbe573e06467f8f25d6ab503e0c8040","name":"CE.json","type":"application/json","lastModified":1668773554973.82,"size":90108},{"id":"7ef9ff6fe6f2344be89a35d1a4b14d2c950ceccfa329af0492c230350187013b1a9674093183553c1e4a1769aadc223277fba53d87fbb13f89ea4e9762d89709","href":"https://static.observableusercontent.com/files/7ef9ff6fe6f2344be89a35d1a4b14d2c950ceccfa329af0492c230350187013b1a9674093183553c1e4a1769aadc223277fba53d87fbb13f89ea4e9762d89709","name":"ML.json","type":"application/json","lastModified":1668773554973.82,"size":21355},{"id":"a2b7135759b5a7a7503990c36b9baa24080c471af01b382c4ef25eb990abd08471f6aacf036e370823aa4f2d132c3e2ff6f6f247e10a974e210395966e7b7c27","href":"https://static.observableusercontent.com/files/a2b7135759b5a7a7503990c36b9baa24080c471af01b382c4ef25eb990abd08471f6aacf036e370823aa4f2d132c3e2ff6f6f247e10a974e210395966e7b7c27","name":"GA.json","type":"application/json","lastModified":1668773554973.82,"size":5931953},{"id":"e240237aa157e8c5ffa6377007a7ad4c5e459bc4faeb69fff8d8e71cb5182111f04622a3edb623a554eefd3e5e19759274a379833c3257c4fcc03d4b223d4dc7","href":"https://static.observableusercontent.com/files/e240237aa157e8c5ffa6377007a7ad4c5e459bc4faeb69fff8d8e71cb5182111f04622a3edb623a554eefd3e5e19759274a379833c3257c4fcc03d4b223d4dc7","name":"PV@1.json","type":"application/json","lastModified":1668773554973.82,"size":7350116},{"id":"59fd4e750f2741d5055e13512ff80abb7c10f53d0125cec34cbf96ed000067c8525433eddf76b8fc8b00b7af44218e84e70d4182d8ded801a346e8b9652a2873","href":"https://static.observableusercontent.com/files/59fd4e750f2741d5055e13512ff80abb7c10f53d0125cec34cbf96ed000067c8525433eddf76b8fc8b00b7af44218e84e70d4182d8ded801a346e8b9652a2873","name":"ES_CCAA@1.json","type":"application/json","lastModified":1668773554973.82,"size":29425486},{"id":"8f7f82505859ae5f3e2b79686cb4354426191522ffefc49a5e883dd17083ec8fafde08c09def7e3d418de1893ca894f78a52fef6312efd4376e8b1c5a551befa","href":"https://static.observableusercontent.com/files/8f7f82505859ae5f3e2b79686cb4354426191522ffefc49a5e883dd17083ec8fafde08c09def7e3d418de1893ca894f78a52fef6312efd4376e8b1c5a551befa","name":"CB@1.json","type":"application/json","lastModified":1668773554973.82,"size":684435},{"id":"a3a3541787fe37a6bf4e209431b9dc26cfa10dbc697b1e2f8b12acbc3bc261a0cbec53046ee182fe6c9e9a96d634a3f6e96ece2bbfb8afdbb29e829bd3d07ae9","href":"https://static.observableusercontent.com/files/a3a3541787fe37a6bf4e209431b9dc26cfa10dbc697b1e2f8b12acbc3bc261a0cbec53046ee182fe6c9e9a96d634a3f6e96ece2bbfb8afdbb29e829bd3d07ae9","name":"AS.json","type":"application/json","lastModified":1668773554973.82,"size":1188233},{"id":"f16e8dff6c307c2e9c8dba5f2da5894bc75bad8a54d0c4a6ff7fafe886e7907994bf98aea1ae7a3c1fd0d10c9def95b5b73026361e835447db2fec37acfa0de5","href":"https://static.observableusercontent.com/files/f16e8dff6c307c2e9c8dba5f2da5894bc75bad8a54d0c4a6ff7fafe886e7907994bf98aea1ae7a3c1fd0d10c9def95b5b73026361e835447db2fec37acfa0de5","name":"EX.json","type":"application/json","lastModified":1668773554973.82,"size":71854},{"id":"52ae4356db81e2b6df9842d636f16c70ef93292d130de0aac99c5c637f68678d9fd997b598ee0cc378e5ecc9f68774874da5365c9827e3d4ecaa5256a933cfb7","href":"https://static.observableusercontent.com/files/52ae4356db81e2b6df9842d636f16c70ef93292d130de0aac99c5c637f68678d9fd997b598ee0cc378e5ecc9f68774874da5365c9827e3d4ecaa5256a933cfb7","name":"NC@1.json","type":"application/json","lastModified":1668773554973.82,"size":2258898},{"id":"f55377be888ea36890cb72558bf516f988d913cfece204dbf742302c0929dda3fb4f0367ddc11342fdf342d63dd61dd04c9bcb00c2288af90a0b01ea06d64fc0","href":"https://static.observableusercontent.com/files/f55377be888ea36890cb72558bf516f988d913cfece204dbf742302c0929dda3fb4f0367ddc11342fdf342d63dd61dd04c9bcb00c2288af90a0b01ea06d64fc0","name":"CM@1.json","type":"application/json","lastModified":1668773554973.82,"size":2427356},{"id":"4d62506b287043589643de4ca5b8e3527740514c1ab8f20f59318abee1f3b6b36b61f2eb69d9ab689f37c869a52aca9306f1bba89f729c52ae98802c7f901bbb","href":"https://static.observableusercontent.com/files/4d62506b287043589643de4ca5b8e3527740514c1ab8f20f59318abee1f3b6b36b61f2eb69d9ab689f37c869a52aca9306f1bba89f729c52ae98802c7f901bbb","name":"AN@2.json","type":"application/json","lastModified":1668773554973.82,"size":6864865},{"id":"215b527adc61467f3f1f8bdfc8a973eab08a46bc17ce64adf3c096fa83c972d1aff1a46ff2de9cb4bf1610573b155893c9e6329daa932963e1ad34b91457774f","href":"https://static.observableusercontent.com/files/215b527adc61467f3f1f8bdfc8a973eab08a46bc17ce64adf3c096fa83c972d1aff1a46ff2de9cb4bf1610573b155893c9e6329daa932963e1ad34b91457774f","name":"AR.json","type":"application/json","lastModified":1668773554973.82,"size":233885},{"id":"900202b235688557cc50c0fe66d4c7f687cff72cb53461c3704b93d92f9850abe5e9d0e0b8cc2c7df7d785e61b4cbd91a6e2b1f12b97b9f486f93b5848012786","href":"https://static.observableusercontent.com/files/900202b235688557cc50c0fe66d4c7f687cff72cb53461c3704b93d92f9850abe5e9d0e0b8cc2c7df7d785e61b4cbd91a6e2b1f12b97b9f486f93b5848012786","name":"MC.json","type":"application/json","lastModified":1668773554973.82,"size":1267998},{"id":"d831e6642c78d3a8476c1865f7ce3c10f1de64d69cd56cfba48406aadd0c7ada07d59557dfdd7ea0c177806faef553a3de5a8fd84c25b610d734440a8ec16cf0","href":"https://static.observableusercontent.com/files/d831e6642c78d3a8476c1865f7ce3c10f1de64d69cd56cfba48406aadd0c7ada07d59557dfdd7ea0c177806faef553a3de5a8fd84c25b610d734440a8ec16cf0","name":"IB.json","type":"application/json","lastModified":1668773554973.82,"size":7089071},{"id":"2160125368977e9b9e5fa11cca852bb26f63386198da888d80828675b96baf1dbf909e86b02376288b775cacd75b798ea9a6cdcd3eace4d7d43378c5487cf9af","href":"https://static.observableusercontent.com/files/2160125368977e9b9e5fa11cca852bb26f63386198da888d80828675b96baf1dbf909e86b02376288b775cacd75b798ea9a6cdcd3eace4d7d43378c5487cf9af","name":"CS_MD.json","type":"application/json","lastModified":1669132404340.03,"size":94123},{"id":"5c505ad2ecc3ee2c2050ffb8b7b3e64c2e60441c513985965861efefdce61b77c203eae7a20e7abf8d196bb489e3845673a44c870a4485b990af94f85ede19ad","href":"https://static.observableusercontent.com/files/5c505ad2ecc3ee2c2050ffb8b7b3e64c2e60441c513985965861efefdce61b77c203eae7a20e7abf8d196bb489e3845673a44c870a4485b990af94f85ede19ad","name":"CS_MD@2.json","type":"application/json","lastModified":1669193921915.185,"size":105425},{"id":"2e0de7b0799bc62e3aec2ad0f9b44560d12f63ec32d152a6993ef9b551aa7793412e90996d7f8067c87a9b7f662913147078e024e025d11b7ac08ee546d5ef59","href":"https://static.observableusercontent.com/files/2e0de7b0799bc62e3aec2ad0f9b44560d12f63ec32d152a6993ef9b551aa7793412e90996d7f8067c87a9b7f662913147078e024e025d11b7ac08ee546d5ef59","name":"PV.json","type":"application/json","lastModified":1669280891890.185,"size":7350116},{"id":"337826ffc8e7e065e58d3278944572ce34e20d6ed4b24d1c402a0923efcc641451cad9dca35ddad6df161658ff8e22a9e9760b0b1004e5dd6e55c663f6340ea2","href":"https://static.observableusercontent.com/files/337826ffc8e7e065e58d3278944572ce34e20d6ed4b24d1c402a0923efcc641451cad9dca35ddad6df161658ff8e22a9e9760b0b1004e5dd6e55c663f6340ea2","name":"points.json","type":"application/json","lastModified":1668783442953.957,"size":89146},{"id":"2160125368977e9b9e5fa11cca852bb26f63386198da888d80828675b96baf1dbf909e86b02376288b775cacd75b798ea9a6cdcd3eace4d7d43378c5487cf9af","href":"https://static.observableusercontent.com/files/2160125368977e9b9e5fa11cca852bb26f63386198da888d80828675b96baf1dbf909e86b02376288b775cacd75b798ea9a6cdcd3eace4d7d43378c5487cf9af","name":"points@1.json","type":"application/json","lastModified":1668785468606.609,"size":94123},{"id":"fa0d88fe20a0faec2c416df677bb7a8d4dba4a4f4905dd716a52f2ae1fe374b4aacdceb006d448eadeb4aec477cb44b2208a78fdd9b6232f9dd1bb5f9d6c41ff","href":"https://static.observableusercontent.com/files/fa0d88fe20a0faec2c416df677bb7a8d4dba4a4f4905dd716a52f2ae1fe374b4aacdceb006d448eadeb4aec477cb44b2208a78fdd9b6232f9dd1bb5f9d6c41ff","name":"points@2.json","type":"application/json","lastModified":1668785579030.494,"size":11346}] 2f:{"title":"#754 Spanish Primary Healthcare Pressure Map 2021/22","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"---\n\n### HTML bits ","pinned":false,"hidden":false,"mode":"md"},{"id":2440,"value":"'mapHeader' div","pinned":false,"hidden":false,"mode":"md"},{"id":2235,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2435,"value":"'mapDetailedInfo' div","pinned":false,"hidden":false,"mode":"md"},{"id":2162,"value":"mapDetailedInfo = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2429,"value":"'CSS' div","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$35","pinned":false,"hidden":false,"mode":"html"},{"id":2990,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1201,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"opacityDuration = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":2552,"value":"pointsRad = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"function getUniqueFeatures(features, comparatorProperty) {\n const uniqueIds = new Set();\n const uniqueFeatures = [];\n for (const feature of features) {\n const id = feature.properties[comparatorProperty];\n if (!uniqueIds.has(id)) {\n uniqueIds.add(id);\n uniqueFeatures.push(feature);\n }\n }\n return uniqueFeatures;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2785,"value":"function tryParseJSONObject(jsonString) {\n try {\n var o = JSON.parse(jsonString);\n\n // Handle non-exception-throwing cases:\n // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,\n // but... JSON.parse(null) returns null, and typeof null === \"object\",\n // so we must check for that, too. Thankfully, null is falsey, so this suffices:\n if (o && typeof o === \"object\") {\n return o;\n }\n } catch (e) {}\n\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2784,"value":"---\n\n### Table stuff","pinned":false,"hidden":false,"mode":"md"},{"id":2783,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2782,"value":"tinyWidth = 140","pinned":false,"hidden":false,"mode":"ojs"},{"id":2781,"value":"tinyHeight = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":2780,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3085,"value":"widthTableColumnCCAA = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":3084,"value":"widthTableColumnName = 310","pinned":false,"hidden":false,"mode":"ojs"},{"id":3083,"value":"widthTableColumnPresionEvolution = tinyWidth + 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3082,"value":"widthTableColumnPresion = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":3081,"value":"widthTableColumnRatioEvolution = tinyWidth + 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3080,"value":"widthTableColumnRatio = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1456,"value":"#### a) CSV Data","pinned":false,"hidden":false,"mode":"md"},{"id":1255,"value":"dateId = new Date().getTime() // To avoid cache problems","pinned":false,"hidden":false,"mode":"ojs"},{"id":2924,"value":"URL_mf_cs = `https://data.civio.es/medicamentalia/atencion-primaria/MF_CS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"URL_ped_cs = `https://data.civio.es/medicamentalia/atencion-primaria/PED_CS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2945,"value":"URL_enf_cs = `https://data.civio.es/medicamentalia/atencion-primaria/ENF_CS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"URL_mf_as = `https://data.civio.es/medicamentalia/atencion-primaria/MF_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"URL_enf_as = `https://data.civio.es/medicamentalia/atencion-primaria/ENF_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"URL_ped_as = `https://data.civio.es/medicamentalia/atencion-primaria/PED_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"URL_mf_ccaa = `https://data.civio.es/medicamentalia/atencion-primaria/MF_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"URL_enf_ccaa = `https://data.civio.es/medicamentalia/atencion-primaria/ENF_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"URL_ped_ccaa = `https://data.civio.es/medicamentalia/atencion-primaria/PED_AS.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2927,"value":"dataRaw_mf_cs = await d3.csv(URL_mf_cs, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2929,"value":"Inputs.table(dataRaw_mf_cs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2944,"value":"dataRaw_ped_cs = await d3.csv(URL_ped_cs, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2943,"value":"Inputs.table(dataRaw_ped_cs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2942,"value":"dataRaw_enf_cs = await d3.csv(URL_enf_cs, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2941,"value":"Inputs.table(dataRaw_enf_cs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2940,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"dataRaw_mf_as = await d3.csv(URL_mf_as, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":"Inputs.table(dataRaw_mf_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"dataRaw_enf_as = await d3.csv(URL_enf_as, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"Inputs.table(dataRaw_enf_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"dataRaw_ped_as = await d3.csv(URL_ped_as, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"Inputs.table(dataRaw_ped_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1339,"value":"dataRaw_mf_ccaa = await d3.csv(URL_mf_ccaa, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"Inputs.table(dataRaw_mf_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"dataRaw_enf_ccaa = await d3.csv(URL_enf_ccaa, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"Inputs.table(dataRaw_enf_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"dataRaw_ped_ccaa = await d3.csv(URL_ped_ccaa, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"Inputs.table(dataRaw_ped_as)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1787,"value":"Recommendations for ratios","pinned":false,"hidden":false,"mode":"md"},{"id":1790,"value":"maxRatio_mf = 1500 // según FDASPU","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"maxRatio_ped = 900 // 900-1000 según FDASPU","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"maxRatio_enf = 1000 // Recomendación de SATSE","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"---\n\n#### b) Geographical Data","pinned":false,"hidden":false,"mode":"md"},{"id":1352,"value":"**19 CCAA:**","pinned":false,"hidden":false,"mode":"md"},{"id":829,"value":"dataES = FileAttachment(\"ES_CCAA@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"**170 AREAS SALUD:**","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"dataPolyg1 = FileAttachment(\"CB@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"dataPolyg2 = FileAttachment(\"CM@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"dataPolyg3 = FileAttachment(\"EX.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"dataPolyg4 = FileAttachment(\"AR.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"dataPolyg5 = FileAttachment(\"CL.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"dataPolyg6 = FileAttachment(\"CN.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"dataPolyg7 = FileAttachment(\"CT.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"dataPolyg8 = FileAttachment(\"NC@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"dataPolyg9 = FileAttachment(\"PV.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"dataPolyg10 = FileAttachment(\"RI.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"dataPolyg11 = FileAttachment(\"VC.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"dataPolyg12 = FileAttachment(\"GA.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"dataPolyg13 = FileAttachment(\"MC.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"dataPolyg14 = FileAttachment(\"AN@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"dataPolyg15 = FileAttachment(\"IB.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"dataPolyg16 = FileAttachment(\"AS.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"dataPolyg17 = FileAttachment(\"CE.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"dataPolyg18 = FileAttachment(\"ML.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"// COMUNIDAD DE MADRID (7 areas) IS MISSING\ndataPolyg19 = FileAttachment(\"MD.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2583,"value":"**267 POINTS:**","pinned":false,"hidden":false,"mode":"md"},{"id":2483,"value":"points = FileAttachment(\"CS_MD@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"---\n\n#### c) Merged Data","pinned":false,"hidden":false,"mode":"md"},{"id":2498,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2506,"value":"Inputs.table(pointsMerge.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"Inputs.table(dataMerge.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"Inputs.table(dataMerge_ES.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":2648,"value":"color_mf = d3.scaleLinear(dataRange_mf, [colorPrimary, colorMf]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2650,"value":"color_enf = d3.scaleLinear(dataRange_enf, [colorPrimary, colorEnf]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2651,"value":"color_ped = d3.scaleLinear(dataRange_ped, [colorPrimary, colorPed]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"// Taking both poygons and points datasets into account\n/*dataRange_mf = d3.extent(\n dataMerge.features\n .map((d) => d.properties.mf_data_2021_2022)\n .concat(pointsMerge.features.map((d) => d.properties.mf_data_2021_2022))\n)*/ // [18, 43.3]\n\ndataRange_mf = [15, 44]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"// Taking both poygons and points datasets into account\ndataRange_enf = d3.extent(\n dataMerge.features\n .map((d) => d.properties.enf_data_2021_2022)\n .concat(pointsMerge.features.map((d) => d.properties.enf_data_2021_2022))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"// Taking both poygons and points datasets into account\ndataRange_ped = d3.extent(\n dataMerge.features\n .map((d) => d.properties.ped_data_2021_2022)\n .concat(pointsMerge.features.map((d) => d.properties.ped_data_2021_2022))\n)","pinned":false,"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":641,"value":"formatDecimal = d3.formatLocale(locale).format(\",.2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dataLocale = ({\n es: {\n mapTitle: \"Mapa de la Presión Asistencial en la Atención Primaria 2021/22\",\n\n mf: \"médica/o\",\n enf: \"enfermera/o\",\n ped: \"pediatra\",\n\n mf_small: \"MED\",\n enf_small: \"ENF\",\n ped_small: \"PED\",\n // BUTTONS LABELS ON FORM\n mf_code: \"MÉDICAS/OS\",\n enf_code: \"ENFERMERAS/OS\",\n ped_code: \"PEDIATRAS\",\n\n messageNoData: \"Sin datos.\",\n pacientsDay: \"pacientes/día.\",\n\n maxSource_mf: \"FDASPU\",\n maxSource_enf: \"SATSE\",\n maxSource_ped: \"FDASPU\",\n\n messageGeocoder: \"Busca tu C.P. o municipio\",\n source: \"Fuente: Datos propios Civio (ver metodología)\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":2417,"value":"headerHeight = 270","pinned":false,"hidden":false,"mode":"ojs"},{"id":2419,"value":"mapHeightMobile = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":2345,"value":"//heightMobile = 1200\nheightMobile = \"auto\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"heightDesktop = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"height = isMobile ? heightMobile : heightDesktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":2181,"value":"mediaQueryLimit = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":2183,"value":"maxWidth = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"myWidth = +Math.min(width, maxWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2187,"value":"isMobile = myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":2708,"value":"colorMf = colorContrast","pinned":false,"hidden":false,"mode":"ojs"},{"id":2711,"value":"//colorEnf = \"#ffb114\"\n//colorEnf = \"#ff7550\"\n//colorEnf = colorContrast\ncolorEnf = \"#ff7550\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2706,"value":"//colorPed = \"#d3514a\"\n//colorPed = \"#ffb114\"\n//colorPed = d3.color(\"#ffab03\").brighter(2)\n//colorPed = \"#ffb114\"\ncolorPed = \"#ff9914\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"colorPrimary = \"#08a6bf\" // Medicamentalia main green","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"colorSecundary = \"#2eefbc\" // Medicamentalia secundary green","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"colorContrast = \"#ef2e61\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"colorNoData = colorNeutral(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"colorNoDataFill = colorNeutral(150)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2771,"value":"colorHighlight = \"#FFED6A\"\n//colorHighlight = \"yellow\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2201,"value":"baseOpacity = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":2461,"value":"$3f","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1041,"value":"import {\n line,\n bar,\n area,\n histogram,\n ticks,\n range\n} from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"MapboxGeocoder = {\n const gc = require(\"@mapbox/mapbox-gl-geocoder@5.0.1/dist/mapbox-gl-geocoder.min.js\");\n if (!gc.accessToken) {\n gc.accessToken =\n \"pk.eyJ1IjoiY2l2aW8iLCJhIjoiY2xhdjl0ZGppMDEzaDN4bnpuZHZ6dHk1NSJ9.6rLi2s-NuDocE6SLErA0mA\";\n\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-geocoder@5.0.1/dist/mapbox-gl-geocoder.css\"\n );\n document.head.appendChild(html``);\n }\n return gc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"// Current version: v2.3.1\n// https://docs.mapbox.com/mapbox-gl-js/api/\nmapboxgl = {\n const gl = await require(\"mapbox-gl/dist/mapbox-gl.js\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken =\n \"pk.eyJ1IjoiY2l2aW8iLCJhIjoiY2tiZ21kampzMDllMjJ4cDMzc3N3MGdoZSJ9.CW_XiRH3y8EAeW5hIqjYng\";\n const href = await require.resolve(\n \"https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css\"\n );\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"//import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"//ss = require(\"simple-statistics\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}