Published
Edited
Jan 31, 2022
2 stars
Also listed in…
selection
excessDeaths = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-miterlimit", 1);
svg
.append("path")
.attr("fill", "grey")
.attr("fill-opacity", 0.4)
.attr("d", area(contextData));
svg
.append("path")
.attr("fill", "orange")
.attr("fill-opacity", 0.4)
.attr("d", area(data));
svg
.append('rect')
.attr('x', 0)
.attr('y', y(0))
.attr('fill', 'white')
.attr('width', width)
.attr('height', 200);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(yAxisRight);
svg.append("g").call(grid);
svg
.append("path")
.attr("fill", "none")
.attr('stroke', 'grey')
.attr('stroke-width', 1.5)
// .attr("fill-opacity", 0.4)
.attr("d", line(contextData));
svg
.append("path")
.attr("fill", "none")
.attr('stroke', 'orange')
.attr('stroke-width', 1.5)
.attr("d", line(data));
svg
.append('path')
.attr("fill", "grey")
.attr("fill-opacity", 0.15)
.attr("d", p95area(contextData));
svg
.append('path')
.attr("fill", "grey")
.attr("fill-opacity", 0.15)
.attr("d", p95area(data));
return svg.node();
}
area = d3
.area()
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.value))
.curve(d3.curveCardinal)
p95area = d3
.area()
.x(d => x(d.date))
.y0(d => y(d.fitted_low))
.y1(d => y(d.fitted_high))
.curve(d3.curveCardinal)
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, ",d"))
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.append("tspan")
.text(data.metric)
)
.call(g =>
g
.append("text")
.attr("x", -margin.left)
.attr("y", 15)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y)
)
d3.min(contextData, d => d.fitted_low)
y = d3
.scaleLinear()
.domain([minValue, maxValue])
.rangeRound([height - margin.bottom, margin.top])
.clamp(true)
x = d3
.scaleUtc()
.domain([d3.min(contextData, d => d.date), d3.max(data, d => d.date)])
.rangeRound([margin.left, width - margin.right])
.clamp(true)
data = {
let retval = new Array();
for (var i = 0; i < dataEurostat.length; i++) {
const entry = dataEurostat[i];
const fittedEntry = dataPosterior.find(d => d.doy == entry.doy);
retval.push({
value: ((entry.deaths - fittedEntry.fitted) / fittedEntry.fitted) * 100,
date: entry.date,
fitted_low: (fittedEntry['fitted.lb'] / fittedEntry.fitted - 1) * 1000,
fitted_high: (fittedEntry['fitted.ub'] / fittedEntry.fitted - 1) * 1000
});
}
retval.y = "↑ Postotno odstupanje od prosjeka";
retval.metric = "%";
return retval;
}
contextData = {
let retval = new Array();
for (var i = 0; i < contextDataEurostat.length; i++) {
const entry = contextDataEurostat[i];
const fittedEntry = dataPosterior.find(d => d.doy == entry.doy);
retval.push({
value: ((entry.deaths - fittedEntry.fitted) / fittedEntry.fitted) * 100,
date: entry.date,
fitted_low: (fittedEntry['fitted.lb'] / fittedEntry.fitted - 1) * 1000,
fitted_high: (fittedEntry['fitted.ub'] / fittedEntry.fitted - 1) * 1000
});
}
retval.y = "↑ Postotno odstupanje od prosjeka";
retval.metric = "%";
return retval;
}
dataEurostat = {
let retval = d3.csvParse(
await FileAttachment("data_data_eurostat-2-1-1-3@1.csv").text(),
d3.autoType
);
retval = retval.filter(d => d.date >= new Date(2019, 11, 30));
return retval;
}
contextDataEurostat = {
let retval = d3.csvParse(
await FileAttachment("data_eurostat@1.csv").text(),
d3.autoType
);
retval = retval.filter(
d => d.date >= new Date(d1) && d.date <= new Date(2020, 0, 1)
);
return retval;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dataPosterior = Object.assign(
d3.csvParse(
await FileAttachment("outputs_data_posterior.csv").text(),
d3.autoType
)
)
d3format = require("d3-format@1")
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.
