We create visual and data-driven stories for
@nzz – and build tools that power them.
min = 20 // We start at the 20th death
maxDay = d3.max(data.map(d => d.Tag))
conf = {
return {
countries: [
{ label: "Italien", color: "#7385ff", offsetX: -25, offsetY: 12 },
{ label: "Südkorea", color: "#7dd1c3", offsetX: -35, offsetY: -12 },
{ label: "USA", color: "#e0904f", offsetY: 0 },
{ label: "Deutschland", color: "#b6b6be", offsetY: -12, offsetX: -45 },
{ label: "Schweiz", color: "#c73530" },
{ label: "Spanien", color: "#ebbd22", offsetY: -12, offsetX: -15 },
{ label: "Frankreich", color: "#38A650", offsetY: -12, offsetX: -85 },
{ label: "Grossbritannien", color: "#AD4BAC", offsetY: 10, offsetX: -110 }
],
// I tried using logScale.ticks(3), but that proved rather unsatisfactory
labels: [20, 100, 1000, 10000, 100000]
};
}
mwConf = {
return {
width: 380,
height: 310,
left: 60,
bottom: 25
};
}
cwConf = {
return {
width: 637,
height: 422,
left: 60,
bottom: 25
};
}
logChartDeathsCW = svgToCanvas(await LogDeathsCW(), 3)
dayScale = d3
.scaleLinear()
.domain([0, maxDay])
.nice()
data = {
let d = d3.csvParse(
await FileAttachment("log-chart-dead-2020-07-09.csv").text()
);
d.map(day => {
Object.keys(day).forEach(country => {
if (day[country] == "NA") {
day[country] = null;
} else {
day[country] = parseInt(day[country]);
}
});
return day;
});
return d;
}
import {svgToCanvas} from "@jonasoesch/nzz-utils"
getLabelXAxisAt = (y, spec) => svg`<g>
<text transform="translate(${xScale(
0,
spec
)},${y})" style="font-family: GTAmerica-Regular, GTAmericaRegular, 'GT America'; font-size: 14px">Tage seit dem Auftreten des 20. Falls</text>
</g>`
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.
