2e:null 2f:["$","title",null,{"children":"A jugar con los notebooks | ADRI 👨🏻‍💻 | Observable"}] 34: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(); }35: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); }36: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); }37: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}]38:[{"id":"4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","href":"https://static.observableusercontent.com/files/4ed2fb66808cce5e526da6c6bf57634bf4e4b3274267ce5eb6838c130f82c653ef4ee3930e65b97234108efc1c2961dc05fa010dac7a068897a7ab1b91adcfec","name":"datos.json","type":"application/json","lastModified":1588777778099.184,"size":201290}] 32:{"id":"12f33d058237ef96","slug":"a-jugar-con-los-notebooks","title":"A jugar con los notebooks","thumbnail":"ebe9573bd6524b38a4545d354343bca70fbc4ea90bec3575d37b397ef8e453a6","access_level":"public","create_time":"$D2020-05-06T15:09:38.099Z","update_time":"$D2021-12-04T10:22:59.071Z","view_time":null,"first_public_time":"$D2020-05-06T16:27:57.023Z","has_unpublished_edits":null,"fork":{"id":"a785c74cbfbf2ab2","slug":"a-jugar-con-los-notebooks","title":"A jugar con los notebooks","owner":{"id":"f69d350b474cbc9b","login":"xaquingv","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"9a82911992d867f3","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":"starter_2024"},"version":440,"publish_version":440,"role":null,"authored":false,"authors":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null}],"members":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A jugar con los notebooks","cells":[{"id":0,"value":"md`# A jugar con los notebooks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"viewof day = Scrubber(dates.slice(0, dates.length), {\n delay: 150,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md `## Funciones útiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"something = isSomething(12)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md `## Datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"dates = Array.from(dataByDate, ([key, value]) => key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"hospLatest = dataLatest.sort((a,b) => b.Hospitalizados - a.Hospitalizados)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"dataByDate = d3.group(\n parsed,\n d=> d.FECHA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"dataByRegion = d3.group(\n parsed,\n d=> d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"raw = FileAttachment(\"datos.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md `## Librerias y datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"projection = projs.geoConicConformalSpain()\n .fitSize([width, width], topojson.feature(es, es.objects.provinces))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"number = d3.format(',.2~f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"colors = d3.scaleOrdinal()\n .domain(['recuperados','fallecidos','casos'])\n .range(['#25c45b', '#c9166a','#ff9500'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"projs = require('d3-composite-projections')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"