Published
Edited
Apr 30, 2020
Insert cell
md`todo:
* flags for countries
* show datapoints?
* some examples of better visuzlisations
* linear plot
* histogram
* treemap
* show it as a network
* replicate this graph? https://www.youtube.com/watch?v=54XLXg4fYsc
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataType
Insert cell
Insert cell
md`Surprised? I was.

In many domains, the nature of the trend is more important than the effect it has. When the effect matters, log plots are quite misleading. The cost of human lives is not ${tex `\log(n)`}.

How can we do better?
`
Insert cell
// function hover(svg, path) {

// svg
// .on('mousemove', moved)
// .on('mouseenter', entered)
// .on('mouseleave', left)
// const dot = svg.append('g')
// .attr('display', 'none');
// dot.append('circle')
// .attr('r', 2.5)
// dot.append('text')
// .attr('font-family', 'sans-serif')
// .attr('font-size', 10)
// .attr('text-anchor', 'middle')
// .attr('y', -8)
// function moved() {
// d3.event.preventDefault();
// const ym = y.invert(d3.event.layerY);
// const xm = x.invert(d3.event.layerX);
// const i1 = d3.bisectLeft(flat_filtered_data.map
// }
// }
Insert cell
["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
Insert cell
chart.update(yType === "linear" ? yLinear : yLog)
Insert cell
line = y => d3.line()
.x(d => x(d.dateRep))
.y(d => y(d[dataType]));
Insert cell
x = d3.scaleUtc()
.domain(d3.extent(flat_filtered_data, d=>d.dateRep))
.range([margin.left, width - margin.right])
Insert cell
yLinear = d3.scaleLinear()
.domain(d3.extent(flat_filtered_data, d=>d[dataType]))
.range([height - margin.bottom, margin.top])
Insert cell
yLog = d3.scaleLog()
.base(10)
.domain([10, d3.max(flat_filtered_data, d=>d[dataType])])
.range([height - margin.bottom, margin.top])
.clamp(true)
Insert cell
color = d3.scaleOrdinal()
.domain(filtered_data.map(x=>x[0]))
.range(d3.schemeCategory10)
Insert cell
filtered_data
Insert cell
xAxis = g => g
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
Insert cell
yAxis = (g, y, format) => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.selectAll('.tick line').clone()
.attr('stroke-opacity', 0.2)
.attr('x2', width - margin.left - margin.right))
.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('cases'))
Insert cell
yTickPosition = (g, y) => g.selectAll(".tick")
.attr("transform", d => `translate(0,${(isNaN(y(d)) ? yLinear(d) : y(d)) + 0.5})`)
Insert cell
Insert cell
Insert cell
Insert cell
raw_data = {
let ab = await FileAttachment("COVID-19-geographic-disbtribution-worldwide (6).xlsx").arrayBuffer();
let ab8 = new Uint8Array(ab);
let workbook = xlsx.read(ab8, {type: 'array', cellText:'false', cellDates:'true'});
let sheet = workbook.Sheets[workbook.SheetNames[0]];
let json_data = xlsx.utils.sheet_to_json(sheet);
return json_data;
}
Insert cell
Insert cell
country_groups_sorted_date =
d3.rollups(
raw_data,
v => v.sort((a,b) => d3.ascending(a.dateRep, b.dateRep)),
d => d.geoId
);
Insert cell
Insert cell
function extendCumValues(arr, key){
let cum = d3.cumsum(arr, x=>x[key]);
arr.forEach((v,i) => {
v[`cum${key}`] = cum[i]
});
}
Insert cell
country_groups_sorted_data_extra_fields = {
country_groups_sorted_date.forEach((d) => {
extendCumValues(d[1], 'deaths');
extendCumValues(d[1], 'cases');
})
return country_groups_sorted_date;
}
Insert cell
Insert cell
top_countries = country_groups_sorted_data_extra_fields
.map(x=>[x[0], x[1][x[1].length-1][dataType]])
.sort((a,b)=>d3.descending(a[1], b[1]))
.slice(0,10)
.map(x=>x[0])
Insert cell
Insert cell
filtered_data = country_groups_sorted_date.filter(x=>top_countries.includes(x[0]))
Insert cell
Insert cell
flat_filtered_data = filtered_data.flatMap(x=>x[1])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xlsx = require('xlsx@0.15.6/dist/xlsx.full.min.js')
Insert cell
flag = require('country-code-emoji@1.0.0/lib/index.umd.js')
Insert cell

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.
Learn more