31:Taf0,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", "#777") .attr("stroke-width", ".08em") .attr("x1", d => x(d3.min(keys.slice(0,2), k => d[k]))) .attr("x2", d => x(d3.max(keys.slice(0,2), k => d[k]))) g.append("line") .attr("stroke", "#ddd") .attr("stroke-width", ".06em") .attr("x1", d => x(d3.min(keys.slice(1,3), k => d[k]))) .attr("x2", d => x(d3.max(keys.slice(1,3), k => d[k]))) .filter(function(d) { return d.abr === "ARG"; }) .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,d]) => k=="disponibles"?colorLine(d.disponibles-d.vx100):color(k)) .attr("opacity", "0.8") .attr("r", ([k]) => circleSize(k)); g.append("g") .selectAll("line") .data(d => d3.cross(keys, [d])) .join("line") .attr("stroke","gray") .attr("stroke-width",1) .attr("x1", x(0)) .attr("x2", x(0)) .attr("y1", 3) .attr("y2", -3); 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.slice(0,2), k => d[k])) + 6) .text((d, i) => number(d3.max(keys.slice(0,2), 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()); }32:T814,table = { const rows = Math.ceil(width / 240), padding = width * .005; const tileSize = 139 / 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') .attr('class', "cajitas") .style('width', `${tileSize}%`) .style('display', 'inline-block') .style('background', '#f8f8f8') .style('margin', `0 ${padding}px ${padding}px 0`) .style( 'padding', `${padding}px ${padding}px ${padding}px ${padding}px` ); facets .append('h4') .style('font-size', '.8em') .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].dx100 )}(+${number( d[d.length - 1].dx100 - d[d.length - 2].dx100 )})` // 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.1 * chartHeight + padding * 2 + 20]); const chartsConf = chartsTop.append('g'); drawChart(chartsConf, chartWidth, 2.2 * chartHeight, padding); return container.node(); }33: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(); }34:T523,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 dosis = { value: data[0].una, label: 'personas con 1 dosis', key: 'dosis' }; const doubleDosis = { value: data[0].nVacunados, label: 'personas vacunadas', key: 'inmunes' }; const board = container .selectAll('div') .data([dosis, doubleDosis]) .join('div') .style('width', '100px') .style('padding', '1.5em') .style('padding-top', '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(); }35:Tc67,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)), d3.max(vaccination, d => Math.abs(d.disponibles)) ]); 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.dx100)) .y1(h) .curve(d3.curveStepBefore); const line2 = d3 .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.dx100)) .curve(d3.curveStepBefore); const line3 = d3 .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.disponibles)) .curve(d3.curveStepBefore); const line4 = d3 .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.ux100)) .curve(d3.curveStepBefore); const line5 = d3 // 3eras dosis .line() .x(d => xScale(d.fecha)) .y(d => yScale(d.dosis3)) .curve(d3.curveStepBefore); const xAxis = d3.axisBottom(xScale); 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'); g.append('path') // cantidad disponibles .attr('d', d => { yScale.domain([0, max]); return line3(d); }) .attr('stroke', "silver") .attr('fill', 'none'); g.append('path') // .attr('d', d => { yScale.domain([0, max]); return line4(d); }) .attr('stroke', "#ff8878") .attr('fill', 'none'); g.append('path') // dosis3 .attr('d', d => { yScale.domain([0, max]); return line5(d); }) .attr('stroke', "#aa8878") .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:T6ae,popArg = [ { cod_ine: "2", CCAA: "CABA", abr: "CABA", Pob: 3075646}, { cod_ine: "6", CCAA: "Buenos Aires", abr: "BsAs", Pob: 17541141}, { cod_ine: "10", CCAA: "Catamarca", abr: "Catamarca", Pob: 415438}, { cod_ine: "14", CCAA: "Córdoba", abr: "Córdoba", Pob: 3760450}, { cod_ine: "18", CCAA: "Corrientes", abr: "Corrientes", Pob: 1120801}, { cod_ine: "22", CCAA: "Chaco", abr: "Chaco", Pob: 1204541}, { cod_ine: "26", CCAA: "Chubut", abr: "Chubut", Pob: 618994}, { cod_ine: "30", CCAA: "Entre Ríos", abr: "E.Ríos", Pob: 1385961}, { cod_ine: "34", CCAA: "Formosa", abr: "Formosa", Pob: 605193}, { cod_ine: "38", CCAA: "Jujuy", abr: "Jujuy", Pob: 770881}, { cod_ine: "42", CCAA: "La Pampa", abr: "La Pampa", Pob: 358428}, { cod_ine: "46", CCAA: "La Rioja", abr: "La Rioja", Pob: 393531}, { cod_ine: "50", CCAA: "Mendoza", abr: "Mendoza", Pob: 1990338}, { cod_ine: "54", CCAA: "Misiones", abr: "Misiones", Pob: 1261294}, { cod_ine: "58", CCAA: "Neuquén", abr: "Neuquén", Pob: 664057}, { cod_ine: "62", CCAA: "Río Negro", abr: "R.Negro", Pob: 747610}, { cod_ine: "66", CCAA: "Salta", abr: "Salta", Pob: 1424397}, { cod_ine: "70", CCAA: "San Juan", abr: "S.Juan", Pob: 781217}, { cod_ine: "74", CCAA: "San Luis", abr: "S.Luis", Pob: 508328}, { cod_ine: "78", CCAA: "Santa Cruz", abr: "S.Cruz", Pob: 365698}, { cod_ine: "82", CCAA: "Santa Fe", abr: "Santa Fe", Pob: 3536418}, { cod_ine: "86", CCAA: "Santiago del Estero", abr: "S.d.Estero", Pob: 978313}, { cod_ine: "90", CCAA: "Tucumán", abr: "Tucumán", Pob: 1694656}, { cod_ine: "94", CCAA: "Tierra del Fuego", abr: "T.d.Fuego", Pob: 173432}, { cod_ine: "", CCAA: "Totales", abr: "ARG", Pob: 45376763} ]37:[] 2f:{"title":"Vacunación en Argentina","cells":[{"id":0,"value":"md`# Vacunación en Argentina`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"leyenda = swatches({\n color: d3.scaleOrdinal(\n [\"Una dosis\", \"Vacunación completa\", \"Bajo Stock\", \"Stock\"],\n ['#446078', '#25c45b', 'red', 'silver']\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"colorLine = d3\n .scaleLinear()\n .domain([0.2,0.3])\n.clamp(true)\n .range(['red', 'silver'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"table_header = html`

Progresión por Provincia

Ordenados según porcentaje de población vacunada. La variación es respecto al último informe

Colores: primera dosis - vacunación completa - dosis disponibles - aplicaciones totales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"credits = html`

Datos de vacunación extraídos del dataset de Covidstats Y la visualización en cuadrícula está forkeada y adaptada de https://observablehq.com/@adrimaqueda/tracking-vacunacion-espana, que a su vez toma cosas de este notebook de Xaquin G.V.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$34","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].ux100 - a[a.length - 1].ux100\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"margin = ({ top: 30, right: 35, bottom: 0, left: 40 })","pinned":false,"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 = [\"dx100\", \"vx100\", \"disponibles\"]","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+50, 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\",\"disponibles\"])\n .range(['#446078', '#25c45b', 'silver'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2831,"value":"circleSize = d3\n .scaleOrdinal()\n .domain([\"ux100\", \"vx100\",\"disponibles\"])\n .range(['0.23rem', '0.23rem', '0.2rem'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"height = clean.length * 21","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 disponibles: v[0].disponibles - v[0].vx100\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.ex100 = d.entregadas / d.Pob;\n d.dx100 = d.primeradosis / d.Pob;\n d.vx100 = d.vacuna_completa / d.Pob;\n d.disponibles = Object.entries(vacunasLoaded).filter(e=>e[1].denominacion == d.ccaa)[0][1]\n .fechas.filter(ee=>ee.fecha.slice(0,10) == d3.timeFormat(\"%Y-%m-%d\")(d.fecha))[0];\n d.disponibles = d.disponibles?d.disponibles.distribuidas/d.Pob:Object.entries(vacunasLoaded).filter(e=>e[1].denominacion == d.ccaa)[0][1].distOrigin/d.Pob\n d.fecha = new Date(d.fecha);\n d.una = d.administradas;\n d.ux100 = d.una / d.Pob;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"vacunasLoadedFixed = Object.keys(vacunasLoaded).forEach(d=>{\n var distrTot = 0;\n vacunasLoaded[d].fechas.forEach(e=>{\n distrTot += e.distribuidas;\n e.distribuidas = distrTot;\n })\n vacunasLoaded[d].distOrigin = d3.min(vacunasLoaded[d].fechas,ee=>ee.distribuidas);\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2722,"value":"vacunasLoaded = fetch(\"https://observable-cors.glitch.me/\" + \"https://covidstats.com.ar/ws/vacunadosmonitor/simple\", {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n}).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2644,"value":"Object.values(vacunasLoaded).forEach(d=>{\n var acumuladaPrimera =0, acumuladaSegunda =0, acumuladaTercera = 0;\n Object.values(d.fechas).forEach(e=>{\n acumuladaPrimera += e.dosis1;\n e.dosis1 = acumuladaPrimera;\n acumuladaSegunda += e.dosis2;\n e.dosis2 = acumuladaSegunda;\n acumuladaTercera += e.dosisadicional + e.dosisrefuerzo;\n e.dosis3 = acumuladaTercera;\n\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2589,"value":"data = d3.range((dates.length-1) * 24).map((d,i)=>{\n return {\n \"ccaa\" : vacunasLoaded[nroProvincias[i%24]].denominacion,\n \"fecha\" : dates[Math.floor(i/24)],\n \"abr\" : popArg.find(dd => dd.CCAA === vacunasLoaded[nroProvincias[i%24]].denominacion).abr,\n \"Pob\" : popArg.find(dd => dd.CCAA === vacunasLoaded[nroProvincias[i%24]].denominacion).Pob,\n \"test\": Math.floor(i/24),\n \"administradas\" : vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis1+vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis2,\n \"primeradosis\" : vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis1,\n \"segundadosis\" : vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis2,\n \"terceradosis\" : vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis3,\n\n \"vacuna_completa\" : vacunasLoaded[nroProvincias[i%24]].fechas[Math.floor(i/24)].dosis2\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2591,"value":"nroProvincias = Object.keys(vacunasLoaded).map((key)=>key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"dates = d3\n .scaleUtc()\n .domain(d3.extent(vacunasLoaded[2].fechas, d => new Date(d.fecha)))\n .ticks(d3.utcDay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2583,"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"}