31:T4a8,function drawShaded(svg, data, value){ const color = scaleColor(data, value); const path = d3.geoPath(); svg.selectAll('path') .data(topojson.feature(es, es.objects.autonomous_regions).features) .join('path') .attr("fill", d => { const datum = data.find(dd => dd.id === d.id)[value] return datum === null ? "#DCDCDC" : color(datum) }) .attr("d", path.projection(projection)); //Border of the autonomous_regions svg.append("path") .datum(topojson.mesh(es, es.objects.autonomous_regions, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); //Selectable path svg.selectAll('hoverPath') .data(topojson.feature(es, es.objects.autonomous_regions).features) .join('path') .attr('class', 'hoverPath') .attr("fill-opacity", 0) .attr("stroke", "#000") .attr("stroke-width", 2) .attr("opacity", 0) .attr("d", path); //Border of the provinces // svg.append("path") // .datum(topojson.mesh(es, es.objects.provinces, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "white") // .attr("stroke-opacity", .5) // .attr("d", path); }32:T819,function drawSymbol(svg, data, value){ const size = scaleSize(data, value); const path = d3.geoPath(); const centroids = topojson .feature(es, es.objects.autonomous_regions) .features .map((feature) => path.centroid(feature)); svg.selectAll('path') .data(topojson.feature(es, es.objects.autonomous_regions).features) .join('path') .attr("fill", "#DCDCDC") .attr("d", path.projection(projection)); //Border of the autonomous_regions svg.append("path") .datum(topojson.mesh(es, es.objects.autonomous_regions, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); //Circles on top of borders of autonomous_regions svg.selectAll('circle') .data(topojson.feature(es, es.objects.autonomous_regions).features) .join('circle') .attr('cx', d => { const x = path.centroid(d)[0]; return x; }) .attr('cy', d => { const y = path.centroid(d)[1]; return y; }) .attr('r', d => { const datum = data.find(dd => dd.id === d.id)[value]; return datum === null ? 0 : size(datum); }) .attr("fill", "#0066AA") .attr("fill-opacity", .3) .attr("stroke", "#0066AA"); //Selectable circles svg.selectAll('.hoverCircle') .data(topojson.feature(es, es.objects.autonomous_regions).features) .join('circle') .attr('cx', d => { const x = path.centroid(d)[0]; return x; }) .attr('cy', d => { const y = path.centroid(d)[1]; return y; }) .attr('r', d => { const datum = data.find(dd => dd.id === d.id)[value]; return datum === null ? 0 : size(datum); }) .attr('class', 'hoverCircle') .attr("fill-opacity", 0) .attr("stroke", "#000") .attr("stroke-width", 2) .attr("opacity", 0); //Border of the provinces // svg.append("path") // .datum(topojson.mesh(es, es.objects.provinces, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "white") // .attr("stroke-opacity", .5) // .attr("d", path); }33:T4aa,dict = [{"code":"AN","id":"01", "name": "Andalucía", "pop": 8414240}, {"code":"AR","id":"02", "name": "Aragón", "pop": 1319291}, {"code":"AS","id":"03", "name": "Asturias", "pop": 1022800}, {"code":"IB","id":"04", "name": "Islas Baleares", "pop": 1149460}, {"code":"CN","id":"05", "name": "Canarias", "pop": 2153389}, {"code":"CB","id":"06", "name": "Cantabria", "pop": 581078}, {"code":"CM","id":"08", "name": "Castilla-La Mancha", "pop": 2032863}, {"code":"CL","id":"07", "name": "Castilla y León", "pop": 2399548}, {"code":"CT","id":"09", "name": "Cataluña", "pop": 7675217}, {"code":"CE","id":"18", "name": "Ceuta", "pop": 84777}, {"code":"VC","id":"10", "name": "Comunidad Valenciana", "pop": 5003769}, {"code":"EX","id":"11", "name": "Extremadura", "pop": 1067710}, {"code":"GA","id":"12", "name": "Galicia", "pop": 2699499}, {"code":"MD","id":"13", "name": "Madrid", "pop": 6663394}, {"code":"ML","id":"19", "name": "Melilla", "pop": 86487}, {"code":"MC","id":"14", "name": "Murcia", "pop": 1493898}, {"code":"NC","id":"15", "name": "Navarra", "pop": 654214}, {"code":"PV","id":"16", "name": "País Vasco", "pop": 2207776}, {"code":"RI","id":"17", "name": "La Rioja", "pop": 316798}]34:[{"id":"4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","href":"https://static.observableusercontent.com/files/4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","name":"datos.json","type":"application/json","lastModified":1588684335234.872,"size":201290}] 2f:{"title":"A jugar con los notebooks","cells":[{"id":0,"value":"md`# A jugar con los notebooks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof day = Scrubber(dates.slice(0, dates.length), {\n delay: 150,\n loop: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md `En el mapa de abajo se muestran el número de ${viewof value.bind(html``)} por comunidad autónoma`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"spain = {\n const p = projection;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", width * .9);\n \n const data = dataByDate.get(day);\n \n drawSymbol(svg, data, value);\n tooltip(svg, '.hoverCircle', data, 'descHospitalizados');\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"md `Hay ${dataLatest.filter(d => d.Hospitalizados > 5000).length} comunidades con más de 5.000 hospitalizados: ${dataLatest.filter(d => d.Hospitalizados > 5000).map(d => d.name).join(', ')}\n\n${dataLatest.sort((a,b) => b.cambioHospitalizados - a.cambioHospitalizados).slice(0,3).map(d => d.name).join(', ')} son las comunidades que han registrado el mayor número de hospitalizados en las últimas 24 horas.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md `${dataLatest.sort((a,b) => b['PCR+'] - a['PCR+']).slice(0,10).map(d => d.name).join(', ')} son las comunidades con más tests, ${dataLatest.slice(dataLatest.length - 3,dataLatest.length).map(d => d.name).join(', ')} las que menos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md `${dataLatest.sort((a,b) => b.Fallecidos - a.Fallecidos).slice(0,10).map(d => d.name).join(', ')} son las comunidades con más fallecidos, ${dataLatest.slice(dataLatest.length - 3,dataLatest.length).map(d => d.name).join(', ')} las que menos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md `${dataLatest.slice(0,10).map(d => d.name).join(', ')} son las comunidades con más hospitalizados, ${dataLatest.slice(dataLatest.length - 3,dataLatest.length).map(d => d.name).join(', ')} las que menos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"function tooltip(svg,shape,data,value) {\n \n const tooltip = svg.append(\"g\");\n \n svg\n .selectAll(shape)\n .on(\"mouseover\", function(d) {\n const string = data.find(dd => dd.id === d.id)[value]\n tooltip.call(\n callout,\n string\n );\n d3.select(this)\n .attr(\"opacity\", 1)\n })\n .on(\"mousemove\", function() {\n tooltip.attr(\n \"transform\",\n `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})`\n );\n })\n .on(\"mouseout\", function() {\n tooltip.call(callout, null);\n d3.select(this)\n .attr(\"opacity\", 0)\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md `## Funciones útiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"mapaEuropa = europe","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"something = isSomething(12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"function isSomething(value) {\n let result;\n switch(true) {\n case value < 0:\n result = 'This is sooo tiny';\n break;\n \n case value <= 10:\n result = 'This is small';\n break;\n \n case value <= 20:\n result = 'This is biggish';\n break;\n \n case value <= 30:\n result = 'This is sooo big';\n break;\n \n default: result = 'No idea what this is ...';\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"function scaleColor(data, value) {\n const min = d3.min(data, d => d[value]);\n const max = d3.max(data, d => d[value]);\n \n const color = d3.scaleSequential()\n .interpolator(d3.interpolateBlues)\n .domain([min, max]);\n \n return color;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"function scaleSize(data, value) {\n const min = d3.min(data, d => d[value]);\n const max = d3.max(data, d => d[value]);\n \n const color = d3.scaleSqrt()\n .domain([min, max])\n .range([2, 60]);\n \n return color;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md `## Datos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof value = new View('Hospitalizados')","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"dates = Array.from(dataByDate, ([key, value]) => key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"hospLatest = dataLatest.sort((a,b) => b.Hospitalizados - a.Hospitalizados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"dataLatest = {\n const data = Array.from(d3.group(\n parsed,\n d=> d.FECHA),\n ([key, value]) => value);\n \n return data[data.length - 1]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"dataByDate = d3.group(\n parsed,\n d=> d.FECHA)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"dataByRegion = d3.group(\n parsed,\n d=> d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"parsedWithNew = Array.from(dataByRegion, ([key, value]) => value).map(d => d.map((dd,i) => {\n dd.cambioHospitalizados = (i > 0)?dd.Hospitalizados - d[i - 1].Hospitalizados:0;\n return dd;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"parsed = raw.map((d,i) => {\n d.id = dict.find(dd => dd.code === d.CCAA).id;\n d.name = dict.find(dd => dd.code === d.CCAA).name;\n d.descHospitalizados = (d.Hospitalizados === null) ? 'Sin datos' : `${d.name}\n${d.Hospitalizados} hospitalizados\na ${d.FECHA}`;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"raw = FileAttachment(\"datos.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md `## Librerias y datos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"es = fetch(\"https://unpkg.com/es-atlas@0.2.0/es/municipalities.json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"projection = projs.geoConicConformalSpain()\n .fitSize([width, width], topojson.feature(es, es.objects.provinces))","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"projs = require('d3-composite-projections')","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"import {View} from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"import {europe} from '@xaquingv/covid-19-outbreak-in-maps-and-charts'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = {\n const d3 = await require(\"d3-array@^2.2\", \"d3-shape@1\", \"d3-axis@1\", \"d3-format@1\", \"d3-random@1\", \"d3-scale@2\", \"d3-random@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-brush\",\"d3-zoom\",\"d3-interpolate\", \"d3-transition@1\", \"d3-scale-chromatic@1\", \"d3-geo@1\", \"d3-time-format\", \"d3-geo-projection@2\", \"d3-force@1\");\n d3.bin = d3.histogram;\n d3.area = d3.area;\n return d3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}