table = { const rows = Math.ceil(width / 240), padding = width * .01; const tileSize = 100/rows - 3; const chartWidth = width * (tileSize/100) const chartHeight = chartWidth * .25; const container = d3.select(html`

`) .style('font-family', 'sans-serif'); const facets = container.selectAll('div') .data(dataFacets.show) .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].country); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `${number(d[d.length - 1].confirmed)} confirmed cases` ); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `${number(d[d.length - 1].recovered)} recovered` ); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `${number(d[d.length - 1].deaths)} deaths` ); const chartsTop = facets.append('svg') .attr("viewBox", [0, -1, chartWidth, 2 * chartHeight + padding * 2 + 1]); const chartsConf = chartsTop.append('g') const chartsDR = chartsTop.append('g') drawChart(chartsConf, 'confirmed', '#ff9500', chartWidth, 2 * chartHeight, padding); drawStack(chartsDR, chartWidth, 2 * chartHeight, padding); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `+${number(d[d.length - 1].new)} new cases on ${d[d.length - 1].date}` ); const chartsNew = facets.append('svg') .attr("viewBox", [0, -1, chartWidth, chartHeight + padding * 2 + 1]); drawChart(chartsNew, 'new', '#808080', chartWidth, chartHeight, padding); return container.node(); }