31:T5d1,# Spanish Primary Healthcare Pressure Map 2022 | Map & dataset updates . **New version!** We are thrilled to announce that our dataset has been refreshed, now including data up until **December 2022**. In addition to presenting the data by zones, we we have enhanced it further by incorporating data **specific to health centers**, wherever available. Furthermore, our map now offers a host of new features, including the ability to view **time series of historical records** when interacting with it. --- **Articles published in Civio (24/05/23):** - MAP [Spanish]: [Buscador atención primaria | Consulta la presión asistencial de tu área y centro de salud](https://civio.es/medicamentalia/buscador-presion-asistencial-atencion-primaria/). - Related article [Spanish]: [Pasar consulta a más de 25 niños al día](https://civio.es/medicamentalia/2023/05/25/pasar-consulta-a-mas-de-25-ninos-al-dia/). **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:T7e32,viewof APmap = { // AP-map container const container = html`

`; 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 v01 style: "mapbox://styles/civio/cli0bcdlm02fv01pg3iga99u2", // AP custom style v02 scrollZoom: true })); // Global variables // https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ let hoveredStateId = null; let speciality = "mf"; // By default we show the map with "Médica/os" on. // Wait until the map loads. map.on("load", () => { let featuresPolyg = dataMerge_areas.features.map((d) => d.properties); let featuresPoints = dataMerge_points.features.map((d) => d.properties); let features = featuresPolyg.concat(featuresPoints); container.value = { map, speciality, features }; container.dispatchEvent(new CustomEvent("input")); // LAYERS // A. Source layers // a1 Areas map.addSource("source_AS", { type: "geojson", data: dataMerge_areas, promoteId: "area_code" // !! id of each future, needed for managing the hover state }); // a2 Centers map.addSource("source_CS", { type: "geojson", data: dataMerge_points, 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", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ minzoom: zoomThreshold, paint: { "circle-radius": pointsRad, "circle-color": [ "case", ["==", ["get", `enf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `enf_pressure_${yearSelector}`], 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", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ minzoom: zoomThreshold, paint: { "circle-radius": pointsRad, "circle-color": [ "case", ["==", ["get", `ped_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `ped_pressure_${yearSelector}`], 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", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ minzoom: zoomThreshold, paint: { "circle-radius": pointsRad, "circle-color": [ "case", ["==", ["get", `mf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `mf_pressure_${yearSelector}`], color_mf.domain()[0], color_mf.range()[0], color_mf.domain()[1], color_mf.range()[1] ] ], "circle-opacity": baseOpacity } }); // 3. Polygons fills ENF // VARIABLE map.addLayer( { id: "layer_AS_enf-fill-variable", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ maxzoom: zoomThreshold, layout: {}, filter: ["==", "enf_constant", false], // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `enf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `enf_pressure_${yearSelector}`], color_enf.domain()[0], color_enf.range()[0], color_enf.domain()[1], color_enf.range()[1] ] ], "fill-opacity": baseOpacity } }, "settlement-minor-label" ); // Place layer under these labels. // CONSTANT map.addLayer( { id: "layer_AS_enf-fill-constant", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", filter: ["==", "enf_constant", true], layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `enf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `enf_pressure_${yearSelector}`], color_enf.domain()[0], color_enf.range()[0], color_enf.domain()[1], color_enf.range()[1] ] ], "fill-opacity": baseOpacity } }, "settlement-minor-label" ); // Place layer under these labels. // 2. Polygons fills PED // VARIABLE map.addLayer( { id: "layer_AS_ped-fill-variable", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ maxzoom: zoomThreshold, layout: {}, filter: ["==", "ped_constant", false], // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `ped_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `ped_pressure_${yearSelector}`], color_ped.domain()[0], color_ped.range()[0], color_ped.domain()[1], color_ped.range()[1] ] ], "fill-opacity": baseOpacity } }, "settlement-minor-label" ); // Place layer under these labels. // CONSTANT map.addLayer( { id: "layer_AS_ped-fill-constant", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", filter: ["==", "ped_constant", true], layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `ped_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `ped_pressure_${yearSelector}`], color_ped.domain()[0], color_ped.range()[0], color_ped.domain()[1], color_ped.range()[1] ] ], "fill-opacity": baseOpacity } }, "settlement-minor-label" ); // Place layer under these labels. // 1a. Polygons fills MF // VARIABLE map.addLayer( { id: "layer_AS_mf-fill-variable", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ maxzoom: zoomThreshold, layout: {}, filter: ["==", "mf_constant", false], // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `mf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `mf_pressure_${yearSelector}`], 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. // CONSTANT map.addLayer( { id: "layer_AS_mf-fill-constant", promoteId: "area_code", // !! id of each future, needed for managing the hover state type: "fill", source: "source_AS", filter: ["==", "mf_constant", true], layout: {}, // How to paint NO DATA //https://github.com/mapbox/mapbox-gl-js/issues/11527 paint: { "fill-color": [ "case", ["==", ["get", `mf_pressure_${yearSelector}`], null], colorNoDataFill, [ "interpolate", ["linear"], ["get", `mf_pressure_${yearSelector}`], 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", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ minzoom: zoomThreshold, paint: { "circle-radius": pointsRadHover, "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-constant", type: "line", source: "source_AS", // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ filter: ["==", "mf_constant", true], // Taking mf as reference for this paint: { "line-color": colorNeutral(900), "line-width": [ "case", ["boolean", ["feature-state", "hover"], false], 2.5, 0.1 ], "line-opacity": 1 } }); map.addLayer({ id: "layer-outline-variable", type: "line", source: "source_AS", filter: ["==", "mf_constant", false], // Taking mf as reference for this // https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/ maxzoom: zoomThreshold, 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-variable", "layer_AS_mf-fill-constant", "layer_CS_mf-points" ]; } else if (speciality === "enf") { targetLayers = [ "layer_AS_enf-fill-variable", "layer_AS_enf-fill-constant", "layer_CS_enf-points" ]; } else if (speciality === "ped") { targetLayers = [ "layer_AS_ped-fill-variable", "layer_AS_ped-fill-constant", "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. DETAILED CHARTS UPDATE // 🪲 We need to update the charts when the filter changes! if (hoveredStateId !== null) { const selectedItem = features.filter( (d) => d.area_code === hoveredStateId )[0]; //console.log("selectedItem on filter", selectedItem); const regionCode = selectedItem.region_code; const dataPressureModif = selectedItem.evolution_pressure; const dataRatioModif = selectedItem.evolution_ratio; // Detailed charts document.getElementsByClassName( "detailed-chart-group" )[0].style.display = "block"; document.getElementsByClassName( "detailed-chart-group" )[1].style.display = "block"; // DETAILED INFO 1 - Pressure chart const detailedElement_pressureOnTop = document.getElementById( "pressure-chart_onTop" ); const chartPressure = htl.html`

${createEvolutionChart_onTop( dataPressureModif, `pressure_${speciality}`, regionCode )}

`; // Removing existing child before adding it while (detailedElement_pressureOnTop.firstChild) { detailedElement_pressureOnTop.removeChild( detailedElement_pressureOnTop.firstChild ); } detailedElement_pressureOnTop.appendChild(chartPressure); // DETAILED INFO 2 - Ratio chart const detailedElement_ratioOnTop = document.getElementById("ratio-chart_onTop"); const chartRatio = htl.html`

${createEvolutionChart_onTop( dataRatioModif, `ratio_${speciality}`, regionCode )}

`; // Removing existing child before adding it while (detailedElement_ratioOnTop.firstChild) { detailedElement_ratioOnTop.removeChild( detailedElement_ratioOnTop.firstChild ); } detailedElement_ratioOnTop.appendChild(chartRatio); } // C. 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-variable", "fill-opacity", baseOpacity ); map.setPaintProperty( "layer_AS_mf-fill-constant", "fill-opacity", baseOpacity ); map.setPaintProperty("layer_AS_enf-fill-variable", "fill-opacity", 0); map.setPaintProperty("layer_AS_enf-fill-constant", "fill-opacity", 0); map.setPaintProperty("layer_AS_ped-fill-variable", "fill-opacity", 0); map.setPaintProperty("layer_AS_ped-fill-constant", "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-variable", "layer_AS_mf-fill-variable" ); map.moveLayer( "layer_AS_ped-fill-variable", "layer_AS_mf-fill-variable" ); map.moveLayer( "layer_AS_enf-fill-constant", "layer_AS_mf-fill-constant" ); map.moveLayer( "layer_AS_ped-fill-constant", "layer_AS_mf-fill-constant" ); map.moveLayer("layer_CS_enf-points", "layer_CS_mf-points"); map.moveLayer("layer_CS_ped-points", "layer_CS_mf-points"); // Pick the right color scale legend document.getElementById("legend-mf").style.display = "block"; document.getElementById("legend-enf").style.display = "none"; document.getElementById("legend-ped").style.display = "none"; // Pick the right background detailed chart document.getElementById("pressure-chart_bckgnd-mf").style.display = "block"; document.getElementById("pressure-chart_bckgnd-enf").style.display = "none"; document.getElementById("pressure-chart_bckgnd-ped").style.display = "none"; document.getElementById("ratio-chart_bckgnd-mf").style.display = "block"; document.getElementById("ratio-chart_bckgnd-enf").style.display = "none"; document.getElementById("ratio-chart_bckgnd-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-constant", "fill-opacity", 0); map.setPaintProperty("layer_AS_mf-fill-variable", "fill-opacity", 0); map.setPaintProperty( "layer_AS_enf-fill-variable", "fill-opacity", baseOpacity ); map.setPaintProperty( "layer_AS_enf-fill-constant", "fill-opacity", baseOpacity ); map.setPaintProperty("layer_AS_ped-fill-variable", "fill-opacity", 0); map.setPaintProperty("layer_AS_ped-fill-constant", "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-variable", "layer_AS_enf-fill-variable" ); map.moveLayer( "layer_AS_ped-fill-variable", "layer_AS_enf-fill-variable" ); map.moveLayer( "layer_AS_mf-fill-constant", "layer_AS_enf-fill-constant" ); map.moveLayer( "layer_AS_ped-fill-constant", "layer_AS_enf-fill-constant" ); map.moveLayer("layer_CS_mf-points", "layer_CS_enf-points"); map.moveLayer("layer_CS_ped-points", "layer_CS_enf-points"); // Pick the right color scale legend document.getElementById("legend-mf").style.display = "none"; document.getElementById("legend-enf").style.display = "block"; document.getElementById("legend-ped").style.display = "none"; // Pick the right background detailed chart document.getElementById("pressure-chart_bckgnd-mf").style.display = "none"; document.getElementById("pressure-chart_bckgnd-enf").style.display = "block"; document.getElementById("pressure-chart_bckgnd-ped").style.display = "none"; document.getElementById("ratio-chart_bckgnd-mf").style.display = "none"; document.getElementById("ratio-chart_bckgnd-enf").style.display = "block"; document.getElementById("ratio-chart_bckgnd-ped").style.display = "none"; } else if (speciality === "ped") { // FILLS map.setPaintProperty("layer_AS_mf-fill-variable", "fill-opacity", 0); map.setPaintProperty("layer_AS_mf-fill-constant", "fill-opacity", 0); map.setPaintProperty("layer_AS_enf-fill-variable", "fill-opacity", 0); map.setPaintProperty("layer_AS_enf-fill-constant", "fill-opacity", 0); map.setPaintProperty( "layer_AS_ped-fill-variable", "fill-opacity", baseOpacity ); map.setPaintProperty( "layer_AS_ped-fill-constant", "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-variable", "layer_AS_ped-fill-variable" ); map.moveLayer( "layer_AS_enf-fill-variable", "layer_AS_ped-fill-variable" ); map.moveLayer( "layer_AS_mf-fill-constant", "layer_AS_ped-fill-constant" ); map.moveLayer( "layer_AS_enf-fill-constant", "layer_AS_ped-fill-constant" ); map.moveLayer("layer_CS_mf-points", "layer_CS_ped-points"); map.moveLayer("layer_CS_enf-points", "layer_CS_ped-points"); // Pick the right color scale legend document.getElementById("legend-mf").style.display = "none"; document.getElementById("legend-enf").style.display = "none"; document.getElementById("legend-ped").style.display = "block"; // Pick the right background detailed chart document.getElementById("pressure-chart_bckgnd-mf").style.display = "none"; document.getElementById("pressure-chart_bckgnd-enf").style.display = "none"; document.getElementById("pressure-chart_bckgnd-ped").style.display = "block"; document.getElementById("ratio-chart_bckgnd-mf").style.display = "none"; document.getElementById("ratio-chart_bckgnd-enf").style.display = "none"; document.getElementById("ratio-chart_bckgnd-ped").style.display = "block"; } else { console.log("error"); } }); // Create a popup, but don't add it to the map yet. const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // 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( "click", [ "layer_AS_mf-fill-variable", "layer_AS_mf-fill-constant", "layer_AS_enf-fill-variable", "layer_AS_enf-fill-constant", "layer_AS_ped-fill-variable", "layer_AS_ped-fill-constant", "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 regionCode = feature.properties.region_code; const key = feature.layer.id.split("_")[2].split("-")[0]; //console.log("feature onclick", feature); const currentZoom = map.getZoom(); //const showingAreas = currentZoom < zoomThreshold; const dataPressure = JSON.parse(feature.properties.evolution_pressure); const dataRatio = JSON.parse(feature.properties.evolution_ratio); // https://weblog.west-wind.com/posts/2014/jan/06/javascript-json-date-parsing-and-real-dates const dataPressureModif = dataPressure.map((d) => ({ ...d, date: new Date(d.date) })); const dataRatioModif = dataRatio.map((d) => ({ ...d, date: new Date(d.date) })); // DETAILED INFO - Title const headerEl = document.getElementsByClassName("description-popup")[0]; const descriptionBasic = setDetailedInfo_basic(feature, key); headerEl.innerHTML = descriptionBasic; // Detailed charts document.getElementsByClassName( "detailed-chart-group" )[0].style.display = "block"; document.getElementsByClassName( "detailed-chart-group" )[1].style.display = "block"; // DETAILED INFO 1 - Pressure chart const detailedElement_pressureOnTop = document.getElementById( "pressure-chart_onTop" ); const chartPressure = htl.html`

${createEvolutionChart_onTop( dataPressureModif, `pressure_${speciality}`, regionCode )}

${createEvolutionChart_onTop( dataRatioModif, `ratio_${speciality}`, regionCode )}

`; // Removing existing child before adding it while (detailedElement_ratioOnTop.firstChild) { detailedElement_ratioOnTop.removeChild( detailedElement_ratioOnTop.firstChild ); } detailedElement_ratioOnTop.appendChild(chartRatio); // 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 } ); } } ); map.on( "mousemove", [ "layer_AS_mf-fill-variable", "layer_AS_mf-fill-constant", "layer_AS_enf-fill-variable", "layer_AS_enf-fill-constant", "layer_AS_ped-fill-variable", "layer_AS_ped-fill-constant", "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 regionCode = feature.properties.region_code; const key = feature.layer.id.split("_")[2].split("-")[0]; //console.log(feature); const currentZoom = map.getZoom(); //const showingAreas = currentZoom < zoomThreshold; if ( currentZoom > zoomThreshold && feature.properties.data_type === "area" ) { // POPUP tooltip //const description = e.features[0].properties.description; const description = dataLocale[languageSelector].infoTooltip; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML(description).addTo(map); } if (currentZoom < zoomThreshold) { popup.remove(); } } ); // When the mouse leaves the state-fill layer, update the feature state of the // previously hovered feature. map.on( "mouseleave", [ "layer_AS_mf-fill-variable", "layer_AS_mf-fill-constant", "layer_AS_enf-fill-variable", "layer_AS_enf-fill-constant", "layer_AS_ped-fill-variable", "layer_AS_ped-fill-constant", "layer_CS_mf-points", "layer_CS_enf-points", "layer_CS_ped-points" ], () => { //map.getCanvas().style.cursor = ""; // Remonving POP-UP tooltips popup.remove(); } ); // 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-variable", "layer_AS_mf-fill-constant", "layer_CS_mf-points" ]; } else if (speciality === "enf") { targetLayers = [ "layer_AS_enf-fill-variable", "layer_AS_enf-fill-constant", "layer_CS_enf-points" ]; } else if (speciality === "ped") { targetLayers = [ "layer_AS_ped-fill-variable", "layer_AS_ped-fill-constant", "layer_CS_ped-points" ]; } const visibleFeatures = map.queryRenderedFeatures({ layers: targetLayers }); // Arrays are always truthy. To check if they are empty, we need to check their length instead if (visibleFeatures.length) { // 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:Te51,// 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 = { pressure: `mf_pressure_${yearSelector}`, ratio: "mf_ratio_2021", evolution_pressure: "pressure_mf", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_mf; colorScale = color_mf; } else if (speciality === "enf") { fields = { pressure: `enf_pressure_${yearSelector}`, ratio: "enf_ratio_2021", evolution_pressure: "pressure_enf", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_enf; colorScale = color_enf; } else if (speciality === "ped") { fields = { pressure: `ped_pressure_${yearSelector}`, ratio: "ped_ratio_2021", evolution_pressure: "pressure_ped", evolution_ratio: "ratio_mf" }; maxRatio = maxRatio_ped; colorScale = color_ped; } const fieldPressure = fields.pressure; const fieldRatio = fields.ratio; const fieldEvolutionPressure = fields.evolution_pressure; const fieldEvolutionRatio = fields.evolution_ratio; let input = Inputs.table(APmap.features, { columns: [ "region_name", "area_name", // EVOLUTION TINY CHARTS "evolution_pressure", fieldPressure, "evolution_ratio", fieldRatio ], header: { region_name: "Comunidad autónoma", area_name: "Área/Centro de salud", // EVOLUTION TINY CHARTS evolution_pressure: `Evolución presión ${ dataLocale[languageSelector][speciality + "_small"] }`, evolution_ratio: `Evolución cupo ${ dataLocale[languageSelector][speciality + "_small"] }`, [fieldPressure]: "Presión 2022", [fieldRatio]: "Cupo 2021" }, format: { evolution_pressure: (x) => tinyLineChart( tryParseJSONObject(x) ? JSON.parse(x) : x, "pressure", fieldEvolutionPressure, colorScale ), evolution_ratio: (x) => tinyLineChart( tryParseJSONObject(x) ? JSON.parse(x) : x, "ratio", fieldEvolutionRatio, colorScale ), [fieldPressure]: (x) => htl.html`

${ x === "No tiene pediatría" ? x : formatDecimal(x) }`, [fieldRatio]: (x) => htl.html`

${formatIntegers(x)}` }, align: { [fieldPressure]: "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_pressure: widthTableColumnPressureEvolution, fieldPressure: widthTableColumnPressure, evolution_ratio: widthTableColumnRatioEvolution, [fieldRatio]: widthTableColumnRatio }, sort: fieldPressure, 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:T57f,mapHeader = html`

${dataLocale[languageSelector].mapTitle}

${dataLocale[languageSelector].mapSubtitle}

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

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

`35:T5d5,mapDetailedInfo = html`

`36:T144c, 37:T6c6, 38:T1031,function createEvolutionChart_bckgnd(field) { const speciality = field.split("_")[1]; const isPressureChart = field.split("_")[0] === "pressure"; const fieldTitle = speciality + "_small"; let colorScale; let rangePressure; let rangeRatio; let maxRatio; let maxSource; const offset = 5; if (speciality === "mf") { colorScale = color_mf; maxRatio = maxRatio_mf; maxSource = dataLocale[languageSelector].maxSource_mf; rangePressure = rangeFullSerie_Pressure_mf; rangeRatio = rangeFullSerie_Ratio_mf; } else if (speciality === "enf") { colorScale = color_enf; maxRatio = maxRatio_enf; maxSource = dataLocale[languageSelector].maxSource_enf; rangePressure = rangeFullSerie_Pressure_enf; rangeRatio = rangeFullSerie_Ratio_enf; } else if (speciality === "ped") { colorScale = color_ped; maxRatio = maxRatio_ped; maxSource = dataLocale[languageSelector].maxSource_ped; rangePressure = rangeFullSerie_Pressure_ped; rangeRatio = rangeFullSerie_Ratio_ped; } const range = isPressureChart ? rangePressure : rangeRatio; const margin = marginChart; const xOffset = 5; // Create SVG const svg = d3 .create("svg") .attr("class", "evolutionChart") .attr("width", widthChart) .attr("height", heightChart); // Update domain Y scale y.domain(range).range([heightChart - margin.bottom, margin.top]); x.range([margin.left, widthChart - margin.right]); // Axis svg.append("g").call(xAxis); svg.append("g").call(yAxis); // All data background const allData = dataEvolution.map( (d) => d.properties[isPressureChart ? "evolution_pressure" : "evolution_ratio"] ); const dataCleaned = allData.map(function (d) { return d.filter(function (e) { //console.log(e[field], !isNaN(+e[field])); //console.log(e[field], typeof e[field] === "number"); return typeof e[field] === "number"; }); }); const allPathsG = svg.append("g").attr("class", "allPaths-group"); allPathsG .selectAll("path") //.data(allData) .data(dataCleaned) .join("path") .attr("fill", "none") .attr("stroke", colorNeutral(250)) .attr("stroke-width", 0.1) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d[field])) ); // Just for ratio chart: recomendations if (!isPressureChart) { const maxLimits = svg.append("g").attr("class", "limits-group"); maxLimits .append("line") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("y1", y(maxRatio)) .attr("y2", y(maxRatio)) .attr("fill", "none") .attr("stroke", colorHighlight) .attr("stroke-width", 2); //.attr("stroke-dasharray", "6 2"); // Small legend maxLimits .append("line") .attr("x1", 0) .attr("x2", 20) .attr("y1", heightChart - 12) .attr("y2", heightChart - 12) .attr("fill", "none") .attr("stroke", colorHighlight) .attr("stroke-width", 2); // Legend const maxLimitText = maxLimits .append("text") .style("text-anchor", "start") .style("font-weight", 400) .style("font-size", "0.65rem") .attr("x", 25) .attr("y", (d) => heightChart - 10); /*.text( dataLocale[languageSelector][ isPressureChart ? "titleChartPressure" : "titleChartRatio" ] + ` (${dataLocale[languageSelector][fieldTitle]})` )*/ maxLimitText .append("tspan") .text(`${formatIntegersReduced(maxRatio)}: cupo máximo`); maxLimitText.append("tspan").text(` recomendado por ${maxSource}.`); } // Chart title const textTitle = svg.append("g").attr("class", "text-title"); textTitle .append("text") .style("text-anchor", "start") .style("font-weight", 700) .style("font-size", "0.7rem") .attr("dy", 0) .attr("x", xOffset) .attr("y", (d) => heightChart - 25) .text( dataLocale[languageSelector][ isPressureChart ? "titleChartPressure" : "titleChartRatio" ] + ` (${dataLocale[languageSelector][fieldTitle]})` ); return svg.node(); }39:T1268,function createEvolutionChart_onTop(data, field, regionCode) { const speciality = field.split("_")[1]; const isPressureChart = field.split("_")[0] === "pressure"; const isArea = data[0].data_type === "area"; let colorScale; let rangePressure; let rangeRatio; let maxRatio; let partialData; const offset = 5; if (speciality === "mf") { colorScale = color_mf; maxRatio = maxRatio_mf; rangePressure = rangeFullSerie_Pressure_mf; rangeRatio = rangeFullSerie_Ratio_mf; partialData = isPressureChart ? `pressure_mf_partial` : ""; } else if (speciality === "enf") { colorScale = color_enf; maxRatio = maxRatio_enf; rangePressure = rangeFullSerie_Pressure_enf; rangeRatio = rangeFullSerie_Ratio_enf; partialData = isPressureChart ? `pressure_enf_partial` : ""; } else if (speciality === "ped") { colorScale = color_ped; maxRatio = maxRatio_ped; rangePressure = rangeFullSerie_Pressure_ped; rangeRatio = rangeFullSerie_Ratio_ped; partialData = isPressureChart ? `pressure_ped_partial` : ""; } const range = isPressureChart ? rangePressure : rangeRatio; const margin = marginChart; const mainColorRatio = colorNeutral(800); const currentArray = data.map((d) => d[field]); const areAllNulls = currentArray.every((d) => typeof d !== "number"); const dataCleaned = data.filter(function (d) { return typeof d[field] === "number"; }); const lastIndexNotNull = dataCleaned.findLastIndex((d) => d); // SPECIAL CASE: NO PEDIATRIA IN some CSS const noPediatriaCS = isPressureChart && speciality === "ped" && currentArray[lastIndexNotNull] === "No tiene pediatría"; // Create SVG const svg = d3 .create("svg") .attr("class", "evolutionChart") .attr("width", widthChart) .attr("height", heightChart); // Update domain Y scale y.domain(range).range([heightChart - margin.bottom, margin.top]); x.range([margin.left, widthChart - margin.right]); if (!areAllNulls) { // Show background charts document.getElementById( `${isPressureChart ? "pressure" : "ratio"}-chart_bckgnd-${speciality}` ).style.opacity = 1; // Actual chart svg .append("path") .datum(dataCleaned) .attr("fill", "none") .attr("stroke", isPressureChart ? colorNeutral(600) : colorNeutral(500)) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d[field])) ); // Data points svg .selectAll("circle") .data(dataCleaned) .join("circle") .attr("cx", (d) => x(d.date)) .attr("cy", (d) => y(d[field])) .attr("r", function (d, i) { const myRadius = i === lastIndexNotNull ? 4.2 : 3; return myRadius; }) .attr("fill", (d) => isPressureChart ? colorScale(d[field]) : mainColorRatio ); if (isPressureChart) { const partialNote = svg.append("g"); partialNote .selectAll("text") .data(dataCleaned) .join("text") .attr("class", "partial-data-note") .attr("x", 5) .attr("y", heightChart - 10) .text((d) => d[partialData]) .style("font-weight", 600) .style("fill", (d) => colorScale(d[field])); } const textChart = svg.append("g").attr("class", "text-chart"); textChart .selectAll("text") .data(dataCleaned) .join("text") .style("text-anchor", "middle") .style("font-weight", (d, i) => (i === lastIndexNotNull ? 800 : 600)) .style("font-size", (d, i) => i === lastIndexNotNull ? "0.75rem" : "0.65rem" ) .style("opacity", (d, i) => (i === lastIndexNotNull ? 1 : 0.8)) .attr("dy", -10) .attr("x", (d) => x(d.date)) .attr("y", (d) => y(d[field])) .text((d) => isPressureChart ? formatDecimal(d[field]) + (d[partialData] ? " (*)" : "") : formatIntegers(d[field]) ) // To improve readability // White background .attr("stroke", colorNeutral(0)) .attr("stroke-width", 2.5) // Black visible text .clone(true) .style("fill", (d) => isPressureChart ? colorScale(d[field]) : mainColorRatio ) .attr("stroke", "none"); } else { // Hide background charts document.getElementById( `${isPressureChart ? "pressure" : "ratio"}-chart_bckgnd-${speciality}` ).style.opacity = 0; showNoDataInfo( svg, isPressureChart, isArea, speciality, regionCode, noPediatriaCS ); } return svg.node(); }3a:Tc70,function showNoDataInfo( svg, isPressureChart, isArea, speciality, regionCode, noPediatriaCS ) { // Show message - info not available const textNoteX = 5; const textNoteY = 40; const textNoteOffset = 15; const colorNoteNoData = colorNeutral(400); const colorNoteDataOtherZoom = colorNeutral(900); const textMessage = svg .append("text") .style("font-size", "0.7rem") .style("font-weight", 400) .attr("fill", colorNoteNoData) .attr("x", textNoteX) .attr("y", textNoteY); // Special case if (noPediatriaCS) { textMessage .append("tspan") .attr("x", textNoteX) .attr("dy", textNoteOffset) .text("Este Centro de Salud NO tiene pediatría"); } else { // General case textMessage .append("tspan") .attr("x", textNoteX) .attr("dy", textNoteOffset) .text("No hay información disponible sobre"); textMessage .append("tspan") .attr("x", textNoteX) .attr("dy", textNoteOffset) .text( `${ isPressureChart ? "presión asistencial (pacientes/día)." : "cupo (pacientes/profesional)." }` ); } // Areas level if (isArea) { // Check if there's something in the next level const thereIsDataPoints = resumeData .filter((e) => e.region_code === regionCode) // See if there's data .some( (e) => e[`pressure_points_${speciality}`] // points can just have pressure data, not ratio one ); if (thereIsDataPoints) { // Encourage to make zoom in textMessage .append("tspan") // More prominent message visually .style("font-size", "0.8rem") .style("font-weight", 700) .attr("fill", colorNoteDataOtherZoom) .attr("x", textNoteX) .attr("dy", textNoteOffset + 10) .text("🔎 Amplía el zoom para ver estos datos"); textMessage .append("tspan") // More prominent message visually .style("font-size", "0.8rem") .style("font-weight", 700) .attr("fill", colorNoteDataOtherZoom) .attr("x", textNoteX) .attr("dy", textNoteOffset) .text("detallados por centros de salud."); } } // Points levels else if (!isArea) { // Check if there's something in the previous level const thereIsDataAreas = resumeData .filter((e) => e.region_code === regionCode) // See if there's data .some( (e) => e[`${isPressureChart ? "pressure" : "ratio"}_area_${speciality}`] ); if (thereIsDataAreas) { // Encourage to make zoom out textMessage .append("tspan") .style("font-size", "0.8rem") .style("font-weight", 700) .attr("fill", colorNoteDataOtherZoom) .attr("x", textNoteX) .attr("dy", 25) .text("🔎 Aleja el zoom para ver estos datos"); textMessage .append("tspan") .style("font-size", "0.8rem") .style("font-weight", 700) .attr("fill", colorNoteDataOtherZoom) .attr("x", textNoteX) .attr("dy", 15) .text("detallados por áreas de salud."); } } }3b:Ta5b,function structureData(d, subject) { let myObject; if (subject === "pressure") { myObject = [ { date: new Date(2018, 0, 1), data_type: d.properties.data_type, pressure_mf: d.properties.mf_pressure_2018, pressure_ped: d.properties.ped_pressure_2018, pressure_enf: d.properties.enf_pressure_2018 }, { date: new Date(2019, 0, 1), data_type: d.properties.data_type, pressure_mf: d.properties.mf_pressure_2019, pressure_ped: d.properties.ped_pressure_2019, pressure_enf: d.properties.enf_pressure_2019 }, { date: new Date(2020, 0, 1), data_type: d.properties.data_type, pressure_mf: d.properties.mf_pressure_2020, pressure_ped: d.properties.ped_pressure_2020, pressure_enf: d.properties.enf_pressure_2020 }, { date: new Date(2021, 0, 1), data_type: d.properties.data_type, pressure_mf: d.properties.mf_pressure_2021, pressure_ped: d.properties.ped_pressure_2021, pressure_enf: d.properties.enf_pressure_2021 }, { date: new Date(2022, 0, 1), data_type: d.properties.data_type, pressure_mf: d.properties.mf_pressure_2022, pressure_ped: d.properties.ped_pressure_2022, pressure_enf: d.properties.enf_pressure_2022 } ]; } else if (subject === "ratio") { myObject = [ { date: new Date(2018, 0, 1), data_type: d.properties.data_type, 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), data_type: d.properties.data_type, 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), data_type: d.properties.data_type, 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), data_type: d.properties.data_type, 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), data_type: d.properties.data_type, ratio_mf: d.properties.mf_ratio_2022, ratio_ped: d.properties.ped_ratio_2022, ratio_enf: d.properties.enf_ratio_2022 } ]; } return myObject; }3c:T125f,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); } 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 rad = 3; const point = (d) => { context.beginPath(); d.forEach((d) => { context.beginPath(); context.arc(x(d.x), y(d.value), rad, 0, rad * Math.PI); context.fillStyle = d.color; context.fill(); }); }; line(values); 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; }3d: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: "Ουκρανία" } })3e:T4a2,dataLocale = ({ es: { mapTitle: `Mapa de la Presión Asistencial en la Atención Primaria en ${last_year}`, mapSubtitle: "Explora los datos por áreas de salud y haz zoom 🔎 para verlos por centros de salud.", mf: "médica/o", enf: "enfermera/o", ped: "pediatra", mf_small: "MED", enf_small: "ENF", ped_small: "PED", // Labels on form mf_code: "MÉDICAS/OS", enf_code: "ENFERMERAS/OS", ped_code: "PEDIATRAS", mf_code: "MED. FAMILIA", enf_code: "ENFERMERÍA", ped_code: "PEDIATRÍA", messageNoData: "Sin datos.", pacientsDay: "pacientes/día.", maxSource_mf: "FDASPU", maxSource_enf: "SATSE", maxSource_ped: "FDASPU", titleChartPressure: "Evolución presión: pacientes vistos al día", titleChartPressure_unit: "pacientes vistos al día", titleChartRatio: "Evolución cupo: pacientes/profesional", titleChartRatio_unit: "pacientes por profesional", infoTooltip: "Información no disponible por centros de salud", messageGeocoder: "Busca tu C.P. o municipio", source: "Fuente: Datos propios Civio (ver metodología ↓)" } })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":"5a295476a591a280688b8dfc931c65f9c8c2399dd7ddbacf4ee0c194371b226b2437e0aa52aba53ff0fc200b678d4cc4cbbe573e06467f8f25d6ab503e0c8040","href":"https://static.observableusercontent.com/files/5a295476a591a280688b8dfc931c65f9c8c2399dd7ddbacf4ee0c194371b226b2437e0aa52aba53ff0fc200b678d4cc4cbbe573e06467f8f25d6ab503e0c8040","name":"CE.json","type":"application/json","lastModified":1669218601473.7,"size":90108},{"id":"ea57173d2b0eaddfb299808af42de3abd02eff5fbc530ad5f127966f219dfac6e642d92b25fd25c8b704fa55e134351cc490a8ae4806eec6d97dfea2a2f11a94","href":"https://static.observableusercontent.com/files/ea57173d2b0eaddfb299808af42de3abd02eff5fbc530ad5f127966f219dfac6e642d92b25fd25c8b704fa55e134351cc490a8ae4806eec6d97dfea2a2f11a94","name":"MD.json","type":"application/json","lastModified":1669218601473.7,"size":2459140},{"id":"266f720adf5aecec005e266b5790d174081a92ab7927638fe2da268d9bbf65a5651c5f0e7121f498f3d85a32ad866975282eed6cf8a785aea2fcfb03cd3d08f1","href":"https://static.observableusercontent.com/files/266f720adf5aecec005e266b5790d174081a92ab7927638fe2da268d9bbf65a5651c5f0e7121f498f3d85a32ad866975282eed6cf8a785aea2fcfb03cd3d08f1","name":"VC.json","type":"application/json","lastModified":1669218601473.7,"size":2632236},{"id":"1f1e97522893707d1bf370b61260ed011bfee85be919358896d0c19fddb87577c75d8bb6a41f272775211906a2c70504df81d342cdeaa279200a4341817a262a","href":"https://static.observableusercontent.com/files/1f1e97522893707d1bf370b61260ed011bfee85be919358896d0c19fddb87577c75d8bb6a41f272775211906a2c70504df81d342cdeaa279200a4341817a262a","name":"CN.json","type":"application/json","lastModified":1669218601473.7,"size":266484},{"id":"d042f01a09050b66b5a56712b035989f52dd49602295e558d8378b6ed9fed7370e76dbb67fbff735d3d7e88ce641e8ff0726f1fd040e85f7cdd2d36fb292ecbf","href":"https://static.observableusercontent.com/files/d042f01a09050b66b5a56712b035989f52dd49602295e558d8378b6ed9fed7370e76dbb67fbff735d3d7e88ce641e8ff0726f1fd040e85f7cdd2d36fb292ecbf","name":"CL.json","type":"application/json","lastModified":1669218601473.7,"size":1465854},{"id":"5c505ad2ecc3ee2c2050ffb8b7b3e64c2e60441c513985965861efefdce61b77c203eae7a20e7abf8d196bb489e3845673a44c870a4485b990af94f85ede19ad","href":"https://static.observableusercontent.com/files/5c505ad2ecc3ee2c2050ffb8b7b3e64c2e60441c513985965861efefdce61b77c203eae7a20e7abf8d196bb489e3845673a44c870a4485b990af94f85ede19ad","name":"CS_MD@2.json","type":"application/json","lastModified":1669218601473.7,"size":105425},{"id":"d831e6642c78d3a8476c1865f7ce3c10f1de64d69cd56cfba48406aadd0c7ada07d59557dfdd7ea0c177806faef553a3de5a8fd84c25b610d734440a8ec16cf0","href":"https://static.observableusercontent.com/files/d831e6642c78d3a8476c1865f7ce3c10f1de64d69cd56cfba48406aadd0c7ada07d59557dfdd7ea0c177806faef553a3de5a8fd84c25b610d734440a8ec16cf0","name":"IB.json","type":"application/json","lastModified":1669218601473.7,"size":7089071},{"id":"900202b235688557cc50c0fe66d4c7f687cff72cb53461c3704b93d92f9850abe5e9d0e0b8cc2c7df7d785e61b4cbd91a6e2b1f12b97b9f486f93b5848012786","href":"https://static.observableusercontent.com/files/900202b235688557cc50c0fe66d4c7f687cff72cb53461c3704b93d92f9850abe5e9d0e0b8cc2c7df7d785e61b4cbd91a6e2b1f12b97b9f486f93b5848012786","name":"MC.json","type":"application/json","lastModified":1669218601473.7,"size":1267998},{"id":"215b527adc61467f3f1f8bdfc8a973eab08a46bc17ce64adf3c096fa83c972d1aff1a46ff2de9cb4bf1610573b155893c9e6329daa932963e1ad34b91457774f","href":"https://static.observableusercontent.com/files/215b527adc61467f3f1f8bdfc8a973eab08a46bc17ce64adf3c096fa83c972d1aff1a46ff2de9cb4bf1610573b155893c9e6329daa932963e1ad34b91457774f","name":"AR.json","type":"application/json","lastModified":1669218601473.7,"size":233885},{"id":"4d62506b287043589643de4ca5b8e3527740514c1ab8f20f59318abee1f3b6b36b61f2eb69d9ab689f37c869a52aca9306f1bba89f729c52ae98802c7f901bbb","href":"https://static.observableusercontent.com/files/4d62506b287043589643de4ca5b8e3527740514c1ab8f20f59318abee1f3b6b36b61f2eb69d9ab689f37c869a52aca9306f1bba89f729c52ae98802c7f901bbb","name":"AN@2.json","type":"application/json","lastModified":1669218601473.7,"size":6864865},{"id":"f55377be888ea36890cb72558bf516f988d913cfece204dbf742302c0929dda3fb4f0367ddc11342fdf342d63dd61dd04c9bcb00c2288af90a0b01ea06d64fc0","href":"https://static.observableusercontent.com/files/f55377be888ea36890cb72558bf516f988d913cfece204dbf742302c0929dda3fb4f0367ddc11342fdf342d63dd61dd04c9bcb00c2288af90a0b01ea06d64fc0","name":"CM@1.json","type":"application/json","lastModified":1669218601473.7,"size":2427356},{"id":"52ae4356db81e2b6df9842d636f16c70ef93292d130de0aac99c5c637f68678d9fd997b598ee0cc378e5ecc9f68774874da5365c9827e3d4ecaa5256a933cfb7","href":"https://static.observableusercontent.com/files/52ae4356db81e2b6df9842d636f16c70ef93292d130de0aac99c5c637f68678d9fd997b598ee0cc378e5ecc9f68774874da5365c9827e3d4ecaa5256a933cfb7","name":"NC@1.json","type":"application/json","lastModified":1669218601473.7,"size":2258898},{"id":"f16e8dff6c307c2e9c8dba5f2da5894bc75bad8a54d0c4a6ff7fafe886e7907994bf98aea1ae7a3c1fd0d10c9def95b5b73026361e835447db2fec37acfa0de5","href":"https://static.observableusercontent.com/files/f16e8dff6c307c2e9c8dba5f2da5894bc75bad8a54d0c4a6ff7fafe886e7907994bf98aea1ae7a3c1fd0d10c9def95b5b73026361e835447db2fec37acfa0de5","name":"EX.json","type":"application/json","lastModified":1669218601473.7,"size":71854},{"id":"a3a3541787fe37a6bf4e209431b9dc26cfa10dbc697b1e2f8b12acbc3bc261a0cbec53046ee182fe6c9e9a96d634a3f6e96ece2bbfb8afdbb29e829bd3d07ae9","href":"https://static.observableusercontent.com/files/a3a3541787fe37a6bf4e209431b9dc26cfa10dbc697b1e2f8b12acbc3bc261a0cbec53046ee182fe6c9e9a96d634a3f6e96ece2bbfb8afdbb29e829bd3d07ae9","name":"AS.json","type":"application/json","lastModified":1669218601473.7,"size":1188233},{"id":"8f7f82505859ae5f3e2b79686cb4354426191522ffefc49a5e883dd17083ec8fafde08c09def7e3d418de1893ca894f78a52fef6312efd4376e8b1c5a551befa","href":"https://static.observableusercontent.com/files/8f7f82505859ae5f3e2b79686cb4354426191522ffefc49a5e883dd17083ec8fafde08c09def7e3d418de1893ca894f78a52fef6312efd4376e8b1c5a551befa","name":"CB@1.json","type":"application/json","lastModified":1669218601473.7,"size":684435},{"id":"59fd4e750f2741d5055e13512ff80abb7c10f53d0125cec34cbf96ed000067c8525433eddf76b8fc8b00b7af44218e84e70d4182d8ded801a346e8b9652a2873","href":"https://static.observableusercontent.com/files/59fd4e750f2741d5055e13512ff80abb7c10f53d0125cec34cbf96ed000067c8525433eddf76b8fc8b00b7af44218e84e70d4182d8ded801a346e8b9652a2873","name":"ES_CCAA@1.json","type":"application/json","lastModified":1669218601473.7,"size":29425486},{"id":"a2b7135759b5a7a7503990c36b9baa24080c471af01b382c4ef25eb990abd08471f6aacf036e370823aa4f2d132c3e2ff6f6f247e10a974e210395966e7b7c27","href":"https://static.observableusercontent.com/files/a2b7135759b5a7a7503990c36b9baa24080c471af01b382c4ef25eb990abd08471f6aacf036e370823aa4f2d132c3e2ff6f6f247e10a974e210395966e7b7c27","name":"GA.json","type":"application/json","lastModified":1669218601473.7,"size":5931953},{"id":"7ef9ff6fe6f2344be89a35d1a4b14d2c950ceccfa329af0492c230350187013b1a9674093183553c1e4a1769aadc223277fba53d87fbb13f89ea4e9762d89709","href":"https://static.observableusercontent.com/files/7ef9ff6fe6f2344be89a35d1a4b14d2c950ceccfa329af0492c230350187013b1a9674093183553c1e4a1769aadc223277fba53d87fbb13f89ea4e9762d89709","name":"ML.json","type":"application/json","lastModified":1669218601473.7,"size":21355},{"id":"732ddf5ebb062274c88df185d10903967ff91ef2aba3b17d63c20e2acc5c38d7941159e3d715831b42cecd97d885e33bd69299f4ebd2d30c2b279cbbe25976ab","href":"https://static.observableusercontent.com/files/732ddf5ebb062274c88df185d10903967ff91ef2aba3b17d63c20e2acc5c38d7941159e3d715831b42cecd97d885e33bd69299f4ebd2d30c2b279cbbe25976ab","name":"CT.json","type":"application/json","lastModified":1669218601473.7,"size":281174},{"id":"cc78b884870e58cd55de71d46481ae8f6f4c764d0cccd3375fcbe98eb8e38b61b2d57a490a8c937a2377c2aeb5f45768f38e6ace16b300a25de8a09bac80ab5a","href":"https://static.observableusercontent.com/files/cc78b884870e58cd55de71d46481ae8f6f4c764d0cccd3375fcbe98eb8e38b61b2d57a490a8c937a2377c2aeb5f45768f38e6ace16b300a25de8a09bac80ab5a","name":"RI.json","type":"application/json","lastModified":1669218601473.7,"size":130760},{"id":"2e0de7b0799bc62e3aec2ad0f9b44560d12f63ec32d152a6993ef9b551aa7793412e90996d7f8067c87a9b7f662913147078e024e025d11b7ac08ee546d5ef59","href":"https://static.observableusercontent.com/files/2e0de7b0799bc62e3aec2ad0f9b44560d12f63ec32d152a6993ef9b551aa7793412e90996d7f8067c87a9b7f662913147078e024e025d11b7ac08ee546d5ef59","name":"PV.json","type":"application/json","lastModified":1669280827295.668,"size":7350116}] 2f:{"title":"Spanish Primary Healthcare Pressure Map 2022 | Map & dataset updates","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":true,"hidden":false,"mode":"ojs"},{"id":2435,"value":"'mapDetailedInfo' div","pinned":false,"hidden":false,"mode":"md"},{"id":2162,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2429,"value":"'CSS' div","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$36","pinned":true,"hidden":false,"mode":"html"},{"id":2990,"value":"$37","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":4139,"value":"toggleZoom = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":4128,"value":"// New zoom threshold to toggle points/areas visibility\n// https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/\nzoomThreshold = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":3566,"value":"setDetailedInfo_basic = (data, key) => {\n const area_name = data.properties.area_name;\n const region_name = data.properties.region_name;\n const description = `\n

${area_name}

\n ${region_name.toUpperCase()}\n

\n `;\n return description;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"opacityDuration = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":3291,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":3991,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":4692,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":2470,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":2552,"value":"pointsRad = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":4152,"value":"pointsRadHover = 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":3289,"value":"---\n\n### Detailed charts settings","pinned":false,"hidden":false,"mode":"md"},{"id":3340,"value":"widthLegend = 240","pinned":false,"hidden":false,"mode":"ojs"},{"id":3308,"value":"//marginChart = ({ top: 25, right: 30, bottom: 60, left: 30 })\nmarginChart = ({ top: 25, right: 30, bottom: 70, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3304,"value":"widthChart = 260","pinned":false,"hidden":false,"mode":"ojs"},{"id":3306,"value":"//heightChart = 170\nheightChart = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":4087,"value":"dataEvolution = dataMerge_areas.features.concat(dataMerge_points.features)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3294,"value":"dateRangeDetailedChart = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_pressure)[0],\n (d) => d.date\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3298,"value":"rangeFullSerie_Pressure_mf = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_pressure).flat(),\n (d) => d[\"pressure_mf\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3834,"value":"rangeFullSerie_Ratio_mf = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_ratio).flat(),\n (d) => d[\"ratio_mf\"]\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3621,"value":"rangeFullSerie_Pressure_enf = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_pressure).flat(),\n (d) => d[\"pressure_enf\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3837,"value":"rangeFullSerie_Ratio_enf = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_ratio).flat(),\n (d) => d[\"ratio_enf\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3623,"value":"rangeFullSerie_Pressure_ped = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_pressure).flat(),\n (d) => d[\"pressure_ped\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3840,"value":"rangeFullSerie_Ratio_ped = d3.extent(\n dataEvolution.map((d) => d.properties.evolution_ratio).flat(),\n (d) => d[\"ratio_ped\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3300,"value":"x = d3\n .scaleTime()\n .domain(dateRangeDetailedChart)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3302,"value":"y = d3\n .scaleLinear()\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3314,"value":"xAxis = (svg) =>\n svg\n .attr(\n \"transform\",\n `translate(0,${heightChart - marginChart.bottom})`\n )\n .style(\"color\", colorNeutral(300))\n .call(d3.axisBottom(x).ticks(d3.timeYear.every(1)))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":3316,"value":"yAxis = (svg) =>\n svg\n .attr(\"transform\", `translate(${marginChart.left},0)`)\n .style(\"color\", colorNeutral(300))\n .call(\n d3\n .axisLeft(y)\n .ticks(3)\n .tickFormat((d) => formatIntegersReduced(d))\n )\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2784,"value":"---\n\n### Table settings","pinned":false,"hidden":false,"mode":"md"},{"id":2783,"value":"$3b","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":"function tinyLineChart(dataset, topic, field, colorScale) {\n const dataValues = dataset.map((d) => d[field]);\n const lastItem = dataValues[dataValues.length - 1];\n\n let colorLine;\n if (topic === \"pressure\") {\n colorLine = colorNeutral(800);\n } else if (topic === \"ratio\") {\n colorLine = colorNeutral(300);\n }\n\n const xstart = 0;\n const ystart = 0;\n\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3167,"value":"widthTableColumnCCAA = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":3170,"value":"widthTableColumnName = 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":3173,"value":"widthTableColumnPressureEvolution = tinyWidth + 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3175,"value":"widthTableColumnPressure = 130","pinned":false,"hidden":false,"mode":"ojs"},{"id":3177,"value":"widthTableColumnRatioEvolution = tinyWidth + 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3179,"value":"widthTableColumnRatio = 80","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":5301,"value":"Entendemos como **valores altos** las siguientes referencias:\n- Medicina: a partir de 30 pacientes/día\n- Enfermería: a partir de 20 pacientes/día\n- Pediatría: a partir de 20-25 pacientes/día","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"// Taking both poygons and points datasets into account\n/*dataRange_mf = d3.extent(\n dataMerge_areas.features\n .map((d) => d.properties[`mf_pressure_${yearSelector}`])\n .concat(\n dataMerge_points.features.map(\n (d) => d.properties[`mf_pressure_${yearSelector}`]\n )\n ) // [4.6, 49.6]\n)*/\n\ndataRange_mf = [15, 44] // version 1.0 had [15, 44]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"// Taking both poygons and points datasets into account\n/*dataRange_enf = d3.extent(\n dataMerge_areas.features\n .map((d) => d.properties[`enf_pressure_${yearSelector}`])\n .concat(\n dataMerge_points.features.map(\n (d) => d.properties[`enf_pressure_${yearSelector}`]\n )\n )\n) // returns [3.69, 30.75] */\n\ndataRange_enf = [10, 30] // version 1.0 had [10.3, 26.2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"// Taking both poygons and points datasets into account\n/*dataRange_ped = d3.extent(\n dataMerge_areas.features\n .map((d) => d.properties[`ped_pressure_${yearSelector}`])\n .concat(\n dataMerge_points.features\n .map((d) => d.properties[`ped_pressure_${yearSelector}`])\n .filter((d) => d !== 0)\n )\n) // [0.19, 38.8]\n*/\n\ndataRange_ped = [15, 35] // version 1.0 had [15, 44]","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":3899,"value":"formatIntegersReduced = d3.format(\"~s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"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":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\nheightDesktop = 730","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"height = isMobile ? heightMobile : heightDesktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":2181,"value":"mediaQueryLimit = 900 // previous: 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":5127,"value":"---\n \n### Year selection\nDefine the year of the map.","pinned":false,"hidden":false,"mode":"md"},{"id":5115,"value":"yearSelector = last_year ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5105,"value":"last_year = \"2022\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4937,"value":"---\n \n### Data imports\nTo better maintain this notebook, we have performed all **data** calculations in a **different notebook**, importing all final datasets is here. ","pinned":false,"hidden":false,"mode":"md"},{"id":4880,"value":"import {\n dataMerge_areas,\n dataMerge_points,\n resumeData\n} from \"@civio/754-buscador-atencion-primaria-pre-dataset-2-0@latest\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4948,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4890,"value":"dataMerge_points","pinned":true,"hidden":false,"mode":"ojs"},{"id":4909,"value":"Inputs.table(dataMerge_points.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5265,"value":"Inputs.table(\n dataMerge_points.features.map((d) => d.properties),\n {\n columns: [\n \"area_name\",\n \"area_code\",\n //\"data_type\",\n \"region_name\",\n \"mf_pressure_2022\",\n \"ped_pressure_2022\",\n \"enf_pressure_2022\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4942,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4920,"value":"Inputs.table(dataMerge_areas.features.map((d) => d.properties))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4935,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4903,"value":"resumeData","pinned":true,"hidden":false,"mode":"ojs"},{"id":4925,"value":"Inputs.table(resumeData)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}