31:T4d7,over = { const container = d3 .select( html`

${d3.timeFormat( "%A, %e de %B de %Y" )(clean[0].fecha)}

` ) .style('width', `300px`) .style('margin', `auto`) .style('text-align', 'center') .style('padding-top', ".5em") .style('border', '2px solid #BDBDBD'); const data = clean.filter(d => d.ccaa === "Totales"); const doubleDosis = { value: data[0].nVacunados, label: 'personas vacunadas', key: 'inmunes' }; const board = container .selectAll('div') .data([doubleDosis]) .join('div') .style('width', '300px') //.style('padding', '1.5em') .style('padding-top', '1em') .style('padding-bottom', '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('vertical-align', 'middle') .html(d => { return `${d.value.toLocaleString( undefined )}
${d.label}`; }); return container.node(); }32:T43e,progress = { const ProgressIndicator = d3.select(html`

`); const percentVaccinated = clean.filter(d => d.ccaa === "Totales")[0].vx100; const ancho = width; const avance = (percentVaccinated * ancho) / 100; const board = ProgressIndicator.html(d => { return ` Población que ha recibido 2 dosis `; }); return ProgressIndicator.node(); }33:T8b9,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); const g = svg .append("g") .attr("text-anchor", "end") .selectAll("g") .data(clean) .join("g") .attr("transform", (d, i) => `translate(0,${y(d.ccaa)})`); g.append("line") .attr("stroke", "#aaa") .attr("stroke-width", ".08em") .attr("x1", d => x(d3.min(keys, k => d[k]))) .attr("x2", d => x(d3.max(keys, k => d[k]))) .filter(function(d) { return d.abr === "ESP"; }) .attr("stroke-width", ".16em"); g.append("g") .selectAll("circle") .data(d => d3.cross(keys, [d])) .join("circle") .attr("cx", ([k, d]) => x(d[k])) .attr("fill", ([k]) => color(k)) .attr("opacity", "0.8") .attr("r", ".25em"); g.append("text") .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-weight", "400") .attr("font-size", ".7rem") .attr("x", margin.left / 2 - 20) .text((d, i) => d.abr) .filter(function(d) { return d.abr === "ESP"; }) .attr("font-weight", "800"); g.append("text") .attr("dy", "0.35em") .attr("font-size", ".6em") .attr("x", d => x(d3.min(keys, k => d[k])) - 6) .text((d, i) => number(d3.min(keys, k => d[k]))) .filter(function(d) { return d.abr === "ESP"; }) .attr("font-weight", "800"); g.append("text") .attr("dy", "0.35em") .attr("font-size", ".6em") .attr("x", d => x(d3.max(keys, k => d[k])) + 6) .text((d, i) => number(d3.max(keys, k => d[k]))) .attr("text-anchor", "start") .filter(function(d) { return d.abr === "ESP"; }) .attr("font-weight", "800"); const ytitle = svg .append("text") .attr("y", margin.top) .attr("x", -2) .style("font", "10px Roboto, sans-serif") .style("font-weight", "bold") .style("text-anchor", "start") .text("↓ % vacunados"); const xtitle = svg .append("text") .attr("y", 8) .attr("x", width / 2 - 18) .style("margin", "auto") .style("font", "10px Roboto, sans-serif") .style("font-weight", "bold") .style("text-anchor", "start") .text("% población con..."); return Object.assign(svg.node()); }34:T71d,table = { const rows = Math.ceil(width / 240), padding = width * .01; const tileSize = 100 / rows - 3; const chartWidth = width * (tileSize / 100); const chartHeight = chartWidth * .3; const container = d3.select(html`

`); const facets = container .selectAll('div') .data(timeProgress) .join('div') .style('width', `${tileSize}%`) .style('display', 'inline-block') .style('background', '#f8f8f8') .style('margin', `0 ${padding}px ${padding}px 0`) .style( 'padding', `${padding * 2}px ${padding}px ${padding}px ${padding}px` ); facets .append('h4') .style('font-size', '.9em') .html(d => d[d.length - 1].ccaa) .filter(function(d) { return d[d.length - 1].ccaa === "Totales"; }) .text("España"); facets .append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .style('line-height', 1.2) .html( d => `${number( d[d.length - 1].ux100 )} población con una dosis` ); facets .append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 3) .style('line-height', 1.2) .html( d => `${number( d[d.length - 1].vx100 )} (+${number( d[d.length - 1].vx100 - d[d.length - 2].vx100 )}) población vacunada` ); const chartsTop = facets .append('svg') .attr("viewBox", [0, -1, chartWidth, 2 * chartHeight + padding * 2 + 12]); drawChart(chartsTop, chartWidth, 2 * chartHeight, padding); return container.node(); }35:T894,function drawChart(svg, w, h, padding) { yScale.range([h, 0]); xScale.range([1, w]); const max = d3.max([ d3.max(vaccination, d => Math.abs(d.vx100)), d3.max(vaccination, d => Math.abs(d.ux100)) ]); const line = d3 .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.vx100)) .curve(d3.curveStepBefore); const area = d3 .area() .x(d => xScale(d.fecha)) .y0(d => yScale(d.vx100)) .y1(h) .curve(d3.curveStepBefore); const area2 = d3 .area() .x(d => xScale(d.fecha)) .y0(d => yScale(d.ux100)) .y1(h) .curve(d3.curveStepBefore); const line2 = d3 .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.ux100)) .curve(d3.curveStepBefore); const xAxis = d3.axisBottom(xScale).ticks(3); const yAxis = d3.axisRight(yScale).ticks(3, ".0%"); const g = svg.append('g'); g.append('path') .attr('d', d => { yScale.domain([0, max]); return area(d); }) .attr('fill', "#25c45b") .attr('fill-opacity', .55); g.append('path') .attr('d', d => { yScale.domain([0, max]); return line(d); }) .attr('stroke', "#25c45b") .attr('fill', 'none'); g.append('path') .attr('d', d => { yScale.domain([0, max]); return area2(d); }) .attr('fill', "#446078") .attr('fill-opacity', .2); g.append('path') .attr('d', d => { yScale.domain([0, max]); return line2(d); }) .attr('stroke', "#446078") .attr('fill', 'none'); const xa = g .append("g") .call(xAxis) .attr('transform', `translate(${0},${h})`); xa.select(".domain").remove(); xa.selectAll(".tick text").attr('fill', '#999'); xa.selectAll(".tick line").attr('stroke', '#999'); const ya = g .append("g") .call(yAxis) .attr('transform', `translate(${0},${0})`); ya.select(".domain").remove(); ya.selectAll(".tick text") .attr('fill', '#999') .attr("x", 0) .attr("dy", -4) .each(function(d) { if (d === 0) { this.remove(); } }); ya.selectAll(".tick line") .attr('stroke', '#999') .each(function(d) { if (d === 0) { this.remove(); } }); }36:T52b,pop = [ { cod_ine: "01", CCAA: "Andalucía", abr: "AND", Pob: 8414240 }, { cod_ine: "02", CCAA: "Aragón", abr: "ARA", Pob: 1319291 }, { cod_ine: "03", CCAA: "Asturias", abr: "AST", Pob: 1022800 }, { cod_ine: "04", CCAA: "Baleares", abr: "BAL", Pob: 1149460 }, { cod_ine: "05", CCAA: "Canarias", abr: "CAN", Pob: 2153389 }, { cod_ine: "06", CCAA: "Cantabria", abr: "CTB", Pob: 581078 }, { cod_ine: "07", CCAA: "Castilla y León", abr: "CyL", Pob: 2399548 }, { cod_ine: "08", CCAA: "Castilla-La Mancha", abr: "CLM", Pob: 2032863 }, { cod_ine: "09", CCAA: "Cataluña", abr: "CAT", Pob: 7675217 }, { cod_ine: "10", CCAA: "Com. Valenciana", abr: "VAL", Pob: 5003769 }, { cod_ine: "11", CCAA: "Extremadura", abr: "EXT", Pob: 1067710 }, { cod_ine: "12", CCAA: "Galicia", abr: "GAL", Pob: 2699499 }, { cod_ine: "13", CCAA: "Madrid", abr: "MAD", Pob: 6663394 }, { cod_ine: "14", CCAA: "Murcia", abr: "MUR", Pob: 1493898 }, { cod_ine: "15", CCAA: "Navarra", abr: "NAV", Pob: 654214 }, { cod_ine: "16", CCAA: "País Vasco", abr: "PVA", Pob: 2207776 }, { cod_ine: "17", CCAA: "La Rioja", abr: "LRJ", Pob: 316798 }, { cod_ine: "18", CCAA: "Ceuta", abr: "CEU", Pob: 84777 }, { cod_ine: "19", CCAA: "Melilla", abr: "MEL", Pob: 86487 }, { cod_ine: "", CCAA: "Totales", abr: "ESP", Pob: 47332614 } ]37:[] 2f:{"title":"Vacunación en España","cells":[{"id":0,"value":"md`# Vacunación en España`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"leyenda = swatches({\n color: d3.scaleOrdinal(\n [\"Una dosis\", \"Pauta completa\"],\n ['#446078', '#25c45b']\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"table_header = html`

Progresión por comunidad autónoma

Ordenados según porcentaje de población vacunada. La variación es respecto al último informe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"credits = html`

Datos de vacunación extraídos del dataset del proyecto Tracking COVID-19 vaccination in Spain de la Visualization for Transparency Foundation. Y aquí su tracker.

Y la cuadrícula está adaptada de este notebook de Xaquin G.V.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"md`--------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"timeProgress = {\n const byCountry = Array.from(\n d3.group(vaccination, d => d.ccaa),\n\n ([key, value]) => value\n );\n\n return byCountry.sort(\n (a, b) => b[b.length - 1].vx100 - a[a.length - 1].vx100\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1506,"value":"xScale = d3.scaleTime().domain(d3.extent(vaccination, d => d.fecha))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"yScale = d3.scaleLinear().domain([0, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"keys = [\"ux100\", \"vx100\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"y = d3\n .scalePoint()\n .domain(clean.map(d => d.ccaa))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(.7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"x = d3\n .scaleLinear()\n .domain([\n d3.min(clean, d => d3.min(keys, k => d[k])) - .002,\n d3.max(clean, d => d3.max(keys, k => d[k]))\n ])\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(6, \"%\"))\n .call(g =>\n g\n .selectAll(\".tick line\")\n .clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y2\", height - margin.bottom)\n )\n .call(g => g.selectAll(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.x)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"color = d3\n .scaleOrdinal()\n .domain([\"ux100\", \"vx100\"])\n .range(['#446078', '#25c45b'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"height = clean.length * 21","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"margin = ({ top: 30, right: 35, bottom: 0, left: 70 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"clean = Array.from(\n d3.rollup(\n vaccLatest,\n v => {\n return {\n ccaa: v[0].ccaa,\n abr: v[0].abr,\n ex100: v[0].ex100,\n dx100: v[0].dx100,\n vx100: v[0].vx100,\n nDosis: +v[0].administradas,\n nVacunados: +v[0].vacuna_completa,\n fecha: v[0].fecha,\n una: v[0].una,\n ux100: v[0].ux100\n };\n },\n d => d.ccaa\n ),\n ([key, value]) => value\n).sort((a, b) => b.vx100 - a.vx100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"vaccLatest = {\n const data = Array.from(\n d3.group(vaccination, d => d.fecha),\n ([key, value]) => value\n );\n\n return data[data.length - 1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"vaccination = data.map(d => {\n d.abr = pop.find(dd => dd.CCAA === d.ccaa).abr;\n d.pobl = pop.find(dd => dd.CCAA === d.ccaa).Pob;\n d.ex100 = d.entregadas / d.pobl;\n d.dx100 = d.administradas / d.pobl;\n d.vx100 = d.vacuna_completa / d.pobl;\n d.fecha = new Date(d.fecha);\n d.una = d.administradas - d.vacuna_completa * 2;\n d.ux100 = d.una / d.pobl;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/fndvit/covid-vaccination-tracker/main/app/public/data.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"number = d3.format(\".2%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2566,"value":"d3.timeFormatDefaultLocale(esp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"esp = d3.json(\n \"https://raw.githubusercontent.com/d3/d3-time-format/master/locale/es-ES.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}