I'm a dataviz passionate that have been working in the field since 2009. I co-founded OneTandem (www.onetandem.com), where I help turning complex data into engaging visual narratives. PhD in Computer Science and Digital Communication
overlap = 4
height = data.series.length * 17
margin = ({top: 40, right: 20, bottom: 30, left: 120})
x = d3.scaleTime()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(data.series.map(d => d.name))
.range([margin.top, height - margin.bottom])
z = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
.range([0, -overlap * y.step()])
d3.max(data.series, d => d3.max(d.values))
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(0).tickPadding(4))
.call(g => g.select(".domain").remove())
area = d3.area()
.curve(d3.curveBasis)
.defined(d => !isNaN(d))
.x((d, i) => x(data.dates[i]))
.y0(0)
.y1(d => z(d))
line = area.lineY1()
data = {
const rawData = await d3.csv("https://covid.ourworldindata.org/data/owid-covid-data.csv", d3.autoType);
// map that will allow us to sort the 'series' array
const totalCases = new Map(d3.groups(rawData, d => d.location).map(d => [d[0], d3.max(d[1], p => p.total_cases)]))
// the dataset also contains aggregated data of continents and others that needs to be removed
const data = rawData.filter(d => d.continent != null).filter(d => totalCases.get(d.location) != undefined)
const dates = Array.from(d3.group(data, d => +d.date).keys()).sort(d3.ascending).filter(d => new Date(d) > startingDate);
return {
dates: dates.map(d => new Date(d)),
series: (d3.groups(data, d => d.location).map(([name, values]) => {
const value = new Map(values.map(d => [+d.date, d.new_cases_smoothed_per_million]));
return {name: name + " - " + format(totalCases.get(name)), values: dates.map(d => value.get(d) == null ? 0 : value.get(d)), total_cases: totalCases.get(name)};
})).sort((a, b) => (b.total_cases - a.total_cases )).slice(0, numCountries)
};
}
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.
