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(); }