toSort = Object.values(OWiD)
testEntries = Object.entries(OWiDdata)
data = toSort.sort(function(a, b){
return b.peakDeaths - a.peakDeaths;
}).slice(0,20)
d3.extent(data[19]['data'], d => d.date)
d3.max(data, d => d.peakDeaths)
d3.max(OWiDdata.ABW.data, d => d.total_deaths)
viewof key = html`<select name='param'>
<option value='total_deaths'>Total deaths</option>
<option value='total_cases'>Total cases</option>
</select>`
chart = {
const svg = d3.select(DOM.svg(width, height));
const bar = svg.append('g');
bar.append('g')
.call(xAxisBar);
bar.append('g')
.call(yAxisBar);
bar.selectAll('rect')
.data(data)
.join('rect')
.attr('x', d => xBar(0))
.attr('y', (d, i) => yBar(i))
.attr('width', d => xBar(d.peakDeaths) - xBar(0))
.attr('height', yBar.bandwidth())
.attr('fill', 'purple')
.on('mouseover', function(d) {
d3.select(this).attr('fill', 'steelblue');})
.on('mouseout', function(d) {
d3.select(this).attr('fill', 'purple');})
.on('click', function(e, d, i){
drawLineChart(d);
});
const lineChart = svg.append('g')
.attr('transform', `translate(0,${heightBar+padding})`);
lineChart.append('g')
.call(xAxisLine);
lineChart.append('g')
.call(yAxisLine);
lineChart.append('text') //country name
.attr('id', 'title')
.attr('x', width - margin.right)
.attr('y', margin.top +15)
.attr('text-anchor', 'end')
.attr('font-size', '15px')
.attr('font-weight', 'bold')
.attr('font-family', 'sans-serif');
function drawLineChart(d) {
lineChart.selectAll('path').remove(); //remove current line, if one exists
lineChart.select('#title') //country name
.text(d.location);
lineChart.append('path')
.datum(d['data'])
.transition()
.attr('stroke', 'purple')
.attr('stroke-width', 1.5)
.attr('fill', 'none')
.attr('d', line(key));
}
return svg.node();
}
testLine = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', heightLine);
svg.append('g')
.call(xAxisLine);
svg.append('g')
.call(yAxisLine);
svg.append('path')
.datum(data[0]['data'])
.attr('stroke', 'purple')
.attr('stroke-width', 1.5)
.attr('fill', 'none')
.attr('d', line);
return svg.node();
}
testCountry = data[0].data
d3.max(testCountry, d => d.total_deaths)
testCountry.data
yAxisBar = g => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(yBar).tickFormat(i => data[i].location).tickSizeOuter(0))
xAxisBar = g => g
.attr('transform', `translate(0,${margin.top})`)
.call(d3.axisTop(xBar))
.call(g => g.select('.domain').remove())
.call(g => g.select('.tick:first-of-type text').clone()
.attr('x', -2)
.attr('y', -20)
.attr('text-anchor', 'start')
.attr('font-weight', 'bold')
.text("Total deaths"))
yBar = d3.scaleBand()
.domain(d3.range(20))
.range([margin.top, heightBar - margin.bottom])
.padding(0.3);
xBar = d3.scaleLinear()
.domain([0, data[0].peakDeaths]).nice()
.range([margin.left, width - margin.right]);
yLine = d3.scaleLinear()
.domain([0, d3.max(data, d => {
if(key == 'total_deaths'){
return d.peakDeaths;
} else if (key == 'total_cases'){
return d.peakCases;
}
})]).nice()
.range([heightLine - margin.bottom, margin.top])
d3.max(data, d => d.peakCases)
xLine = d3.scaleUtc()
.domain(d3.extent(data[19]['data'], d => d.date)).nice()
.range([margin.left, width - margin.right])
yAxisLine = g => g
.attr('id', 'yAxisLine')
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yLine))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(lineTitle))
lineTitle = {
if(key == "total_deaths"){
return "Total deaths";
} else if(key == "total_cases"){
return "Total cases";
};
}
xAxisLine = g => g
.attr("transform", `translate(0, ${heightLine - margin.bottom})`)
.call(d3.axisBottom(xLine))
data[0].data
line = key => {return d3.line()
.defined(d => !isNaN(d[key]))
.x(d => xLine(d.date))
.y(d => yLine(d[key]))}
height = heightBar + heightLine + padding;
padding = 20;
heightBar = 500;
heightLine = 300;
width = 900;
margin = ({top: 30, right: 30, bottom: 30, left: 125});
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.
