Published
Edited
Nov 30, 2020
1 fork
import { databyday } from "@fil/ncov2019-data"
import { tdeath } from "@fil/ncov2019-data"
tdeath
deathsByDate = {
return tdeath.sort(function(a, b) {
var keyA = new Date(a.date);
var keyB = new Date(b.date);
// Compare the 2 dates
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
}
deaths = {
let allDeaths = [];
deathsByDate.forEach(function(countryDay) {
for (let i = 0; i < countryDay.cases; i++) {
allDeaths.push({
country: countryDay.country,
date: countryDay.ymd,
dateClass: 'day' + countryDay.ymd.split('-').join(''),
countryClass: countryDay.country.split(' ').join('')
});
}
});
return allDeaths;
}
cleanData = {
let cleanData = [];
databyday.forEach(function(day) {
//flat list of country names
let countryCollector = [];
//list of country data objects
let countryDayData = [];
let allDeaths = 0;
for (const [key, value] of Object.entries(day)) {
if (typeof value == 'number') {
allDeaths += value;
}
let splitCountryName = key.split(":")[0];
if (countryCollector.indexOf(splitCountryName) == -1) {
//country is new country
countryCollector.push(splitCountryName);
countryDayData.push({ name: splitCountryName, deaths: value });
} else {
//country is country we have placed already
let countryIndex = countryCollector.indexOf(splitCountryName);
countryDayData[countryIndex].deaths += value;
}
}
let eachDay = countryDayData.shift().deaths;
let dataobj = {
date: eachDay,
totalDeaths: allDeaths,
countries: countryDayData
};
cleanData.push(dataobj);
});
return cleanData;
}
totalDeaths = deaths.length
width = 800
columns = 150
rows = Math.ceil(totalDeaths / skip / columns)
perCircle = width / columns
height = perCircle * rows
radius = perCircle / 2
skip = 500
visualizedDataset = {
let reducedData = [];
for (let i = 0; i < totalDeaths; i = i + skip) {
reducedData.push(deaths[i]);
}
return reducedData;
}
myCell = {
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', '#222');
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('stroke-width', 1);
svg.selectAll('.' + d.dateClass).attr('fill', 'white');
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();
}
d3 = require("d3@5")
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.
