31:T46e,overall = { const container = d3.select(html`

`) .style('font-family', 'sans-serif') .style('width', `${width}px`) .style('text-align', 'center') const confirmedCases = {value: d3.sum(dataLatest, d => d.Hospitalizados), label: 'hospitalizados', key:'casos'}; const deathsCases = {value: d3.sum(dataLatest, d => d.Fallecidos), label: 'fallecidos', key:'fallecidos'}; const recoveredCases = {value: d3.sum(dataLatest, d => d.Recuperados), label: 'personas recuperadas', key:'recuperados'}; const board = container.selectAll('div') .data([confirmedCases, deathsCases, recoveredCases]) .join('div') .style('width', '100px') .style('padding', '0 1em') .style('line-height', 1.2) .style('font-size', '.9em') .style('color', '#808080') .style('display', 'inline-block') .style('text-align', 'center') .style('vertical-align','top') .style('border-right','1px dotted #BDBDBD') .html(d => { return `${number(d.value)}
${d.label}` }) return container.node(); }32: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); }33: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); }34: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}]35:[{"id":"4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","href":"https://static.observableusercontent.com/files/4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","name":"datos.json","type":"application/json","lastModified":1588777778099.184,"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":369,"value":"md `El primer caso de coronavirus en España fue un paciente alemán que se encontraba de vacaciones en la Gomera. Se detectó el 31 de enero, pero hasta el 24 de febrero no se detectaron los primeros casos en la península. Las primeras comunidades con infectados por coronavirus fueron la Comunidad de Madrid, Cataluña y la Comunidad Valenciana.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof day = Scrubber(dates.slice(0, dates.length), {\n delay: 150,\n loop: false\n})","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 drawShaded(svg, data, 'Hospitalizados');\n tooltip(svg, '.hoverPath', data, 'descHospitalizados');\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$33","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md `## Funciones útiles`","pinned":false,"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":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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"parsed = raw.map(d => {\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":407,"value":"number = d3.format(',.2~f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"colors = d3.scaleOrdinal()\n .domain(['recuperados','fallecidos','casos'])\n .range(['#25c45b', '#c9166a','#ff9500'])","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":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":"$W35","stdlib":"1","titling":"auto"}