COVID-19 One Death, One PixelCOVID-19 Canvas One Death, One PixelMoment of Silence
COVID-19 SVG One Death, One Circle
chart = {
let svg = d3
.create('svg')
.attr("width", width)
.attr('height', height)
.attr('id', 'mainViz');
let bg = svg
.append('rect')
.attr("width", width)
.attr('height', height)
.attr('fill', '#28343e');
let deathCircs = svg
.selectAll('.deathCircles')
.data(visualizedDataset)
.enter()
.append('circle')
.attr('cx', (d, i) => (i % columns) * perCircle + radius)
.attr('cy', (d, i) => Math.floor(i / columns) * perCircle + radius)
.attr('r', radius)
.attr('class', d => d.dateClass + " " + d.countryClass + " deathCircles")
.attr('fill', '#aaa')
// .attr('stroke', 'white')
.on('mouseover', function(d) {
svg.selectAll('.' + d.countryClass).attr('fill', 'white');
// svg.selectAll('.' + d.dateClass).attr('fill', 'blue');
d3.select('#legend').text(d.country + " " + d.date);
})
.on('mouseout', function(d) {
let mousedClass = d3
.selectAll('.deathCircles')
.attr('stroke-width', 0)
.attr('fill', '#aaa');
d3.select('#legend').text('');
});
return svg.node();
}
deathsByCountry = groupBy(deaths, 'country')
groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
visualizedDataset = {
let reducedData = [];
for (let i = 0; i < totalDeaths; i = i + skip) {
reducedData.push(deaths[i]);
}
return reducedData;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
