31:T770,chart = { const svg = d3 .create("svg") .attr("height", height) .attr("width", myWidth) .style("overflow", "visible"); svg.append("g").call(xAxis); const group = svg .append("g") .selectAll("g") .data(wrangledData) .join("g") .attr("class", "group") .attr("id", (d) => d.id); if (serviceSelector === "Pensiones") { group .attr("transform", (d, i) => `translate(0,${yIMV(d.lugar)})`) .transition("unbrekeable") // Naming the transition so it never breaks .duration(1000) .attr("transform", (d, i) => `translate(0,${yPensiones(d.lugar)})`); } if (serviceSelector === "Ingreso Mínimo Vital") { group .attr("transform", (d, i) => `translate(0,${yPensiones(d.lugar)})`) .transition("unbrekeable") // Naming the transition so it never breaks .duration(1000) .attr("transform", (d, i) => `translate(0,${yIMV(d.lugar)})`); } const provinceName = group .append("text") .text((d) => provinceSelected ? `${d.lugar} - ${d.municipio} ${d.nota}` : d.lugar ) .attr("x", provinceSelected ? 0 : margin.left - 5) .attr("y", provinceSelected ? 12 : 5) .attr("font-size", 9) .style("text-anchor", provinceSelected ? "start" : "end") .style("alignment-baseline", "middle") .style("fill", colorNeutral(800)); const provinceCells = group .selectAll("rect") .data((d) => d.data) .join("rect") .attr("x", (d, i) => xScale(d.fecha)) .attr("width", xScale.bandwidth() - 1) .attr("height", cellHeight - 1) .attr("y", provinceSelected ? 20 : 0) .attr("fill", (d) => missedDays.includes(d.fecha) ? "#e8e8e8" : d.min_delay !== undefined ? colorScale(d.min_delay) : "#444" ) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .on("mousemove", onMouseMove); return svg.node(); }32:Tbd6,css = htl.html` `33:T419,function onMouseOver(event, d, i) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; d3.selectAll(".group").transition().duration(100).style("opacity", 0.15); d3.select("#" + this.parentNode.id) .transition() .duration(100) .style("opacity", 1) .style("font-weight", "bold"); d3.select(this).attr("stroke", "black"); tooltip .style("visibility", "visible") .html( `

${ d.dia } de marzo${clockEmoji(d.hora)} ${ d.hora + 1 }h

${ missedDays.includes(d.fecha) ? "Sin información

" : d.min_delay === undefined ? "No había citas disponibles

" : tooltipText(d) }` ); }34:T798,function cleanData(datos) { //servicio const servicio = datos[0].servicio; //datos totales o filtrados const data = provinceSelected ? datos.filter((d) => d.province_name === provinceSelector) : datos; //sacamos el menor para cada oficina/provincia en cada scrapeo const min_delay = d3 .flatGroup( data, (d) => (provinceSelected ? d.office_code : d.province_name), (d) => d.run_datetime ) .map((d) => ({ lugar: d[0], fecha: d[1], min_delay: d3.min(d[2], (d) => +d.min_delay), address: provinceSelected ? d[2][0].office_address : null })); //agrupamos por oficina/provincia y calculamos el orden const groupedData = d3 .groups(min_delay, (d) => d.lugar) .map((d) => ({ lugar: d[0], data: blankList.map((dd) => ({ ...dd, min_delay: d[1].find((x) => x.fecha === dd.fecha)?.min_delay })), address: d[1][0].address, municipio: d[1][0].office_location, order: d[1].filter((d) => d.min_delay === undefined).length * (maxDelay * 1.5) + d3.sum(d[1], (d) => d.min_delay) })); //filtramos la lista de provincias sin las de País Vasco y Navarra const provincias = servicio !== "Pensiones" ? nameList.filter((d) => !excludedProvinces.includes(d)) : nameList; //hacemos lista con todas las provincias/oficinas aunque no salgan const fullListData = d3 .map(provinceSelected ? officesList : provincias, (d) => ({ lugar: d, id: d.toLowerCase().replace(".", "").replace(" ", "-"), data: groupedData.find((dd) => provinceSelected ? dd.address === d : dd.lugar === d )?.data || blankList, order: groupedData.find((dd) => provinceSelected ? dd.address === d : dd.lugar === d )?.order || maxValue })) .sort((a, b) => d3.descending(a.order, b.order)); return fullListData; }35:T915,wrangledData = { //select the service const serviceData = rawData.filter((d) => d.servicio === serviceSelector); //and the full data or the data filtered by province const data = provinceSelected ? serviceData.filter((d) => d.province_name === provinceSelector) : serviceData; //extract the minimum delay for each province/office on each time value const min_delay = d3 .flatGroup( data, (d) => (provinceSelected ? d.office_code : d.province_name), (d) => d.run_datetime ) .map((d) => ({ lugar: d[0], fecha: d[1], min_delay: d3.min(d[2], (d) => +d.min_delay), address: provinceSelected ? d[2][0].office_address : null })); //group by province/office and calculate the order for the graph const groupedData = d3 .groups(min_delay, (d) => d.lugar) .map((d) => ({ lugar: d[0], data: blankList.map((dd) => ({ ...dd, min_delay: d[1].find((x) => x.fecha === dd.fecha)?.min_delay })), address: d[1][0].address, order: d[1].filter((d) => d.min_delay === undefined).length * (maxDelay * 1.5) + d3.sum(d[1], (d) => d.min_delay) })); //filter the province list depending on the service selected const provincias = serviceSelector !== "Pensiones" ? nameList.filter((d) => !excludedProvinces.includes(d)) : nameList; //merge the full office list with the ones in our dataset const fullListData = d3 .map(provinceSelected ? officesList : provincias, (d, i) => ({ lugar: d, municipio: provinceSelected ? dict_municipios.find( (m) => m.input === offices.find((dd) => d === dd.address1)?.location ).output : "", nota: provinceSelected ? offices.find((dd) => d === dd.address1)?.note : "", id: provinceSelected ? "oficina-" + i : d.toLowerCase().replaceAll(".", "").replaceAll(" ", "-"), data: groupedData.find((dd) => provinceSelected ? dd.address === d : dd.lugar === d )?.data || blankList, order: groupedData.find((dd) => provinceSelected ? dd.address === d : dd.lugar === d )?.order || maxValue })) .sort((a, b) => d3.descending(a.order, b.order)); return fullListData; }36:T9af,cleanProvincesNames = [ { input: "A CORUNA", output: "A Coruña" }, { input: "ALACANT", output: "Alicante" }, { input: "ALBACETE", output: "Albacete" }, { input: "ALMERIA", output: "Almería" }, { input: "ASTURIAS", output: "Asturias" }, { input: "AVILA", output: "Ávila" }, { input: "BADAJOZ", output: "Badajoz" }, { input: "BARCELONA", output: "Barcelona" }, { input: "BIZKAIA", output: "Bizkaia" }, { input: "BURGOS", output: "Burgos" }, { input: "CACERES", output: "Cáceres" }, { input: "CADIZ", output: "Cádiz" }, { input: "CANTABRIA", output: "Cantabria" }, { input: "CASTELLO", output: "Castellón" }, { input: "CEUTA", output: "Ceuta" }, { input: "CIUDAD REAL", output: "Ciudad Real" }, { input: "CORDOBA", output: "Córdoba" }, { input: "CUENCA", output: "Cuenca" }, { input: "GIPUZKOA", output: "Gipuzkoa" }, { input: "GIRONA", output: "Girona" }, { input: "GRANADA", output: "Granada" }, { input: "GUADALAJARA", output: "Guadalajara" }, { input: "HUELVA", output: "Huelva" }, { input: "HUESCA", output: "Huesca" }, { input: "ILLES BALEARS", output: "Baleares" }, { input: "JAEN", output: "Jaén" }, { input: "LA RIOJA", output: "La Rioja" }, { input: "LAS PALMAS", output: "Las Palmas" }, { input: "LEON", output: "León" }, { input: "LLEIDA", output: "Lleida" }, { input: "LUGO", output: "Lugo" }, { input: "MADRID", output: "Madrid" }, { input: "MALAGA", output: "Málaga" }, { input: "MELILLA", output: "Melilla" }, { input: "MURCIA", output: "Murcia" }, { input: "NAVARRA", output: "Navarra" }, { input: "OURENSE", output: "Ourense" }, { input: "PALENCIA", output: "Palencia" }, { input: "PONTEVEDRA", output: "Pontevedra" }, { input: "S. C. DE TENERIFE", output: "S. C. de Tenerife" }, { input: "SALAMANCA", output: "Salamanca" }, { input: "SEGOVIA", output: "Segovia" }, { input: "SEVILLA", output: "Sevilla" }, { input: "SORIA", output: "Soria" }, { input: "TARRAGONA", output: "Tarragona" }, { input: "TERUEL", output: "Teruel" }, { input: "TOLEDO", output: "Toledo" }, { input: "VALENCIA", output: "Valencia" }, { input: "VALLADOLID", output: "Valladolid" }, { input: "ZAMORA", output: "Zamora" }, { input: "ZARAGOZA", output: "Zaragoza" }, { input: "ÁRABA/ÁLAVA", output: "Álava" }, { input: "Araba/Álava", output: "Álava" }, { input: "Illes Balears", output: "Baleares" }, { input: "Santa Cruz de Tenerife", output: "S. C. de Tenerife" } ]37: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: "Ουκρανία" } })38:[{"id":"094bc9057a21821ed6fd94289b0ca83194f16945d22a27e95dc5d0ce3ca9e6a365c76cb09448698ffe0b833992424739ca30f418eb9a1ad6a374ada7fc87879b","href":"https://static.observableusercontent.com/files/094bc9057a21821ed6fd94289b0ca83194f16945d22a27e95dc5d0ce3ca9e6a365c76cb09448698ffe0b833992424739ca30f418eb9a1ad6a374ada7fc87879b","name":"civio.svg","type":"image/svg+xml","lastModified":1679654172265.149,"size":1823},{"id":"eb269a095a6f38fcf204e95897953922361c63a3699a461abb8ffcb8c69272a9d5d4e5f474263042582a2fe0069ace46b59eca26d5658302fe23f1302b54d4d9","href":"https://static.observableusercontent.com/files/eb269a095a6f38fcf204e95897953922361c63a3699a461abb8ffcb8c69272a9d5d4e5f474263042582a2fe0069ace46b59eca26d5658302fe23f1302b54d4d9","name":"municipios_lista.csv","type":"text/csv","lastModified":1680003876084.938,"size":3978},{"id":"e9bbe0f27b2f011b9349403cc1993542de939f1bdb07c54107f68c5c55a614d4ea906db0ee33aded13784cdfaa5fb39fdf4b249164d819d2b23961ebfbf44a9f","href":"https://static.observableusercontent.com/files/e9bbe0f27b2f011b9349403cc1993542de939f1bdb07c54107f68c5c55a614d4ea906db0ee33aded13784cdfaa5fb39fdf4b249164d819d2b23961ebfbf44a9f","name":"dict_municipios@1.json","type":"application/json","lastModified":1680006845368.34,"size":17123},{"id":"03593edf9550264e41c00413a94b613177f46bd2278dd8e408b82eb037c1f59ce70207414f8dc68b8e6f7d68e6ddfda0dde1a3fa2bfcc6aec279353e1edf67c7","href":"https://static.observableusercontent.com/files/03593edf9550264e41c00413a94b613177f46bd2278dd8e408b82eb037c1f59ce70207414f8dc68b8e6f7d68e6ddfda0dde1a3fa2bfcc6aec279353e1edf67c7","name":"min_delay@10.csv","type":"text/csv","lastModified":1680020920890.683,"size":2167545},{"id":"76198d307997f20afe25ecb17a8ef7b3ceacf6783e0c3ed3854127d3290d68b3926db9bbfe60b7662dab57792b73892cf8f3e1bfcdf543bf65528f3820195799","href":"https://static.observableusercontent.com/files/76198d307997f20afe25ecb17a8ef7b3ceacf6783e0c3ed3854127d3290d68b3926db9bbfe60b7662dab57792b73892cf8f3e1bfcdf543bf65528f3820195799","name":"officesFiltered@9.csv","type":"text/csv","lastModified":1680076021281.663,"size":52512}] 2f:{"title":"Heatmap closest appointment for social services","cells":[{"id":0,"value":"# Heatmap closest appointment for social services","pinned":false,"hidden":false,"mode":"md"},{"id":2365,"value":"Each cell is an attempt of our bot to get an appointment. The color varies according to the difference in days between the day of the scrape and the day of the first available appointment. The provinces are ordered from worst to best, according to the number of days with available appointments and the delay of each appointment.\n.\n\n\n**Article published in Civio (31/03/23):**\n\n- Spanish version: [Las colas invisibles de la Seguridad Social: ni un robot consigue encontrar cita previa](https://civio.es/2023/03/30/cita-previa/)\n\n\n----","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n format: (x, i) =>\n html`${x}`,\n value: \"es\" // 👈🏻 Default value\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n format: (x, i) =>\n html`${x}`,\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"viewof escalas = Inputs.select(testColores, {\n label: \"Escalas\",\n format: (x) => x[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"chartContainer = htl.html`

Cuánto tardas en conseguir cita previa (si la hay) según el día de consulta

${heatmapTitle}

${colorLegend}

${chart}${footnotes}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"heatmapTitle = htl.html`

En ${\n provinceSelected ? provinceSelector : \"todas las provincias de España\"\n} para ${serviceSelector}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"viewof serviceSelector = Inputs.radio([\"Pensiones\", \"Ingreso Mínimo Vital\"], {\n label: \"Elige una prestación\",\n format: (x, i) =>\n html`${x}`,\n value: \"Pensiones\",\n disabled: excludedProvinces.includes(provinceSelector)\n ? [\"Ingreso Mínimo Vital\"]\n : \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"viewof provinceSelector = Inputs.select([\"España\", ...nameList], {\n label: \"Selecciona una provincia\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"colorLegend = htl.html`

${Legend(\n colorScale,\n {\n title: \"Días hasta la primera cita disponible\"\n }\n)}${Swatches(\n d3.scaleOrdinal(\n [\"No hay ninguna cita disponible\", \"Sin información\"],\n [\"#444444\", \"#e8e8e8\"]\n )\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"footnotes = htl.html`

${\n serviceSelector !== \"Pensiones\" && !provinceSelected\n ? provincesAnnotation\n : \"\"\n}

Para más información sobre los datos consultar metodología

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"provincesAnnotation = htl.html`

No aparecen en el gráfico las provincias de País Vasco y Navarra ya que no se gestionan las citas a través de la página de la Seguridad Social

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"function tooltipText(d) {\n return `\n${d.min_delay} ${\n d.min_delay === 1 ? \"día\" : \"días\"\n }
hasta la primera cita disponible\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"clockEmoji = d3.scaleOrdinal().domain([0, 8, 16]).range([\"🕐\", \"🕘\", \"🕔\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n d3.selectAll(\".group\")\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"font-weight\", \"normal\");\n\n d3.selectAll(\"rect\").attr(\"stroke\", \"none\");\n\n tooltip.style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function onMouseMove(event, d, i) {\n let tooltipWidth = tooltip.node().offsetWidth;\n let tooltipHeight = tooltip.node().offsetHeight;\n\n tooltip\n .style(\"top\", function () {\n return `${\n event.clientY < tooltipHeight + 10\n ? event.pageY + 10\n : event.pageY - tooltipHeight - 10\n }px`;\n })\n .style(\"left\", function () {\n return `${\n event.pageX + 10 < width * 0.33\n ? event.pageX\n : event.pageX + 10 < width * 0.66\n ? event.pageX - tooltipWidth / 2\n : event.pageX - tooltipWidth\n }px`;\n })\n .style(\"pointer-events\", \"none\")\n .style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function onMouseClick(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"rawData = {\n const raw = await FileAttachment(\"min_delay@10.csv\").csv({ typed: true });\n\n const clean = raw\n .map((d) => ({\n ...d,\n servicio: d.servicio === \"IMV\" ? \"Ingreso Mínimo Vital\" : \"Pensiones\",\n province_name: cleanProvincesNames.find(\n (dd) => dd.input === d.province_name\n )?.output\n }))\n .filter((d) => d.office_address !== \"NA\");\n\n return clean;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"imvData = rawData.filter((d) => d.servicio === \"Ingreso Mínimo Vital\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"pensionesData = rawData.filter((d) => d.servicio === \"Pensiones\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"filteredService = rawData.filter((d) => d.servicio === serviceSelector)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"cleanIMV = cleanData(imvData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"cleanPensiones = cleanData(pensionesData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"//municipios 0 citas\nmunicipios_oficina.filter(\n (d) => !municipios_lista.map((d) => d.office_location).includes(d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2262,"value":"municipios_lista = FileAttachment(\"municipios_lista.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2248,"value":"municipios_oficina = [...new Set(offices.map((d) => d.location))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"dataOficinas = {\n const group = d3\n .flatGroup(\n pensionesData,\n (d) => d.office_code,\n (d) => d.run_datetime\n )\n .map((d) => ({\n lugar: d[0],\n fecha: d[1],\n provincia: d[2][0].province_name,\n min_delay: d3.min(d[2], (d) => +d.min_delay),\n address: d[2][0].office_address\n }));\n\n const min = d3\n .groups(group, (d) => d.lugar)\n .map((d) => ({\n lugar: d[0],\n provincia: d[1][0].provincia,\n data: blankList.map((dd) => ({\n ...dd,\n min_delay: d[1].find((x) => x.fecha === dd.fecha)?.min_delay\n })),\n address: d[1][0].address\n }))\n .map((d) => ({\n ...d,\n order:\n d.data.filter((d) => d.min_delay === undefined).length *\n (maxDelay * 1.5) +\n d3.sum(d.data, (d) => d.min_delay),\n citas: d.data.filter((x) => x.min_delay !== undefined).length\n }));\n return min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2187,"value":"dataOficinas","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"oficinasIMV = [...new Set(imvData.map((d) => d.office_address))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2338,"value":"oficinasPensiones = [...new Set(pensionesData.map((d) => d.office_address))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2174,"value":"oficinasLista = [...new Set(offices.map((d) => d.address1))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"//oficinas en dataset no en la lista\noficinasIMV.filter((d) => !oficinasLista.includes(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"//oficinas en la lista que no están en el dataset\n[\n ...new Set(\n offices\n .filter((d) => !excludedProvinces.includes(d.province))\n .map((d) => d.address1)\n )\n].filter((d) => !oficinasIMV.includes(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2340,"value":"//oficinas en la lista que no están en el dataset\noficinasLista.filter((d) => !oficinasPensiones.includes(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1232,"value":"yPensiones = d3\n .scaleBand()\n .domain(cleanPensiones.map((d) => d.lugar))\n .rangeRound([margin.top, height])\n .paddingInner(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"yIMV = d3\n .scaleBand()\n .domain(cleanIMV.map((d) => d.lugar))\n .rangeRound([margin.top, height])\n .paddingInner(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"xAxis = (svg) =>\n svg\n .attr(\"transform\", `translate(0,${margin.top - 3})`)\n .call(d3.axisTop().scale(xScale))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .style(\"opacity\", (d, i) =>\n isMobile\n ? i % 21 === 0\n ? 1\n : 0\n : i % 21 === 0\n ? 1\n : i % 3 === 0\n ? 1\n : 0\n )\n .text((d) =>\n new Date(convertDateFormat(d)).toLocaleString(undefined, {\n month: \"short\",\n day: \"numeric\"\n })\n )\n )\n .call((g) =>\n g\n .selectAll(\".tick line\")\n .style(\"opacity\", (d, i) => (i % 21 === 0 ? 1 : i % 3 === 0 ? 1 : 0.2))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"xScale = d3\n .scaleBand()\n .domain(dayList)\n .range(provinceSelected ? [0, myWidth] : [margin.left, myWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":761,"value":"blankList = dayList.map((d) => ({\n fecha: d,\n min_delay: undefined,\n dia: +d.slice(6, 8),\n hora: +d.slice(9, 11)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"dayList = [...new Set(rawData.map((d) => d.run_datetime))]\n .concat(missedDays)\n .sort((a, b) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"missedDays = [\"20230313_16\", \"20230319_16\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"function convertDateFormat(date) {\n const year = date.slice(0, 4);\n const month = date.slice(4, 6);\n const day = date.slice(6, 8);\n\n return `${year}-${month}-${day}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"cellHeight = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"maxValue = dayList.length * maxDelay * 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"extentDelay = d3.extent(\n wrangledData.flatMap((d) => d.data),\n (d) => d.min_delay\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"maxDelay = d3.max(rawData, (d) => d.min_delay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"provinceSelected = provinceSelector !== \"España\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"officesList = offices\n .filter((d) => d.province === provinceSelector)\n .map((d) => d.address1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"offices = {\n const raw = await FileAttachment(\"officesFiltered@9.csv\").csv();\n\n const clean = raw\n .map((d) => ({\n ...d,\n province:\n cleanProvincesNames.find((dd) => dd.input === d.province)?.output ||\n d.province,\n location: getLocation(d.address2)\n }))\n .filter((d) => !d.note.includes(\"(Cerrado temporalmente)\"))\n .filter(\n (d) =>\n !d.note.includes(\n \"(Cerrado temporalmente desde el 15/07/2021, excepto atención telefónica con cita previa)\"\n )\n );\n return clean;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"function getLocation(address) {\n const splitIndex = address.match(/\\d+/).index;\n const location = address.slice(0, splitIndex - 1);\n\n return location;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"nameList = [...new Set(rawData.map((d) => d.province_name))].sort((a, b) =>\n a.localeCompare(b, \"es\", { ignorePunctuation: true })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1923,"value":"excludedProvinces = [\"Navarra\", \"Álava\", \"Gipuzkoa\", \"Bizkaia\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2272,"value":"dict_municipios = FileAttachment(\"dict_municipios@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"// es-ES format\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dataLocale = ({\n es: {\n title: \"\",\n source:\n 'Fuente: Eurostat'\n },\n en: {\n title: \"\",\n source:\n 'Fuente: Eurostat'\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"height = provinceSelected\n ? wrangledData.length * 3 * cellHeight + margin.top\n : wrangledData.length * cellHeight + margin.top","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"margin = ({ top: 30, right: 50, bottom: 50, left: 70 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 This 320 is just for testing. On production the devideSelection will always be \"desktop\", so it will take the Math.min(width, maxWidth) as expected","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"isMobile = myWidth < mediaQueryLimit || deviceSelection === \"mobile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"iframeHeight = chartContainer.clientHeight + 10 // Adding extra 10px for safety ;)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":1417,"value":"testColores = [\n [\"d3.interpolateYlOrBr\", d3.interpolateYlOrBr],\n [\"d3.interpolateYlOrRd\", d3.interpolateYlOrRd],\n // [\"d3.interpolateInferno\", d3.interpolateInferno],\n // [\"d3.interpolateMagma\", d3.interpolateMagma],\n // [\"d3.interpolateCividis\", d3.interpolateCividis],\n // [\"d3.interpolatePlasma\", d3.interpolatePlasma]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"colorScale = d3\n .scaleSequential(escalas[1])\n // .domain([...extentDelay].reverse())\n .domain([0, 28])\n// .range()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"colores = ({\n backgroundColor: colors.main.lightYellow,\n selectedService: colors.main.blue\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"civioLogo = await FileAttachment(\"civio.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md"},{"id":1742,"value":"**Use case-1**: Ejemplo código Lugo: \n1. Selecciono \"Lugo\" en el selector y copio/pego el snippet que sale abajo 👇🏻.\n2. Borro el parámetro de `?lang=es` y lo sustituyo a mano por el de `?provinceSelector=Lugo`\n3. Testeo el código fuera en un index.html para ver si la altura está bien y si oculta el selector de provincia.\n4. Correcto! ✔️\n\n```\n

\n \n

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1750,"value":"**Use case-2**: Ejemplo código gráfico completo: \n1. No selecciono nada en ningún selector y copio/pego el snippet que sale abajo 👇🏻.\n2. Testeo el código fuera en un index.html para ver si todo ok.\n3. Correcto! ✔️\n\n\n```\n

\n \n

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1762,"value":"**Use case-3**: Ejemplo código para Zamora y solo el servicio de PENSIONES: \n1. Selecciono \"Zamora\" en un selector y PENSIONES en el otro y copio/pego el snippet que sale abajo 👇🏻.\n2. Borro el parámetro de `?lang=es` y lo sustituyo a mano por `?provinceSelector=Zamora&serviceSelector=PENSIONES`\n3. Testeo el código fuera en un index.html para ver si la altura está bien y si oculta ambos selectores.\n4. Correcto! ✔️\n\n```\n

\n \n

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"{\n //variables to generate the code\n const variables = {\n url: \"https://graphs.civio.es/posts/cita-previa-seguridad-social/heatmap-cita-mas-cercana/\", // URL at Civio's repository `civio-graphs`.\n heightDesktop: 405, //not necessary if there is only one height\n heightMobile: iframeHeight,\n mediaQuery: mediaQueryLimit, //breakpoint\n\n lang: languageSelector,\n //province: provinceSelector,\n\n variableHeight: true //if there are two heights -> true, if there is only one -> false\n };\n\n return md`~~~html\n${codeToExportIframe(\n variables.url,\n variables.heightDesktop,\n variables.heightMobile,\n variables.mediaQuery,\n\n variables.lang,\n //variables.province,\n\n variables.variableHeight\n)}\n~~~\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}