Published
Edited
Dec 9, 2020
md`# Covid race po županijama
Podaci: koronavirus.hr (do 2020-12-09)`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);
svg
.append("text")
.style("font", `bold 12px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr('fill', 'lightgrey')
.attr("x", width - 6)
.attr("y", margin.top + barSize * n + 10)
.attr("dy", "0.32em")
.text("Autor: @velimirgasp");
svg
.append("text")
.style("font", `bold 12px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr('fill', 'lightgrey')
.attr("x", width - 6)
.attr("y", margin.top + barSize * n + 22)
.attr("dy", "0.32em")
.text("Podaci: koronavirus.hr");
yield svg.node();
for (const keyframe of keyframes) {
const transition = svg
.transition()
.duration(duration)
.ease(d3.easeLinear);
// Extract the top bar’s value.
x.domain([0, keyframe[1][0].value]);
updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);
invalidation.then(() => svg.interrupt());
await transition.end();
}
}
duration = 250
function bars(svg) {
let bar = svg
.append("g")
.attr("fill-opacity", 0.6)
.selectAll("rect");
return ([date, data], transition) =>
(bar = bar
.data(data.slice(0, n), d => d.name)
.join(
enter =>
enter
.append("rect")
.attr("fill", color)
.attr("height", y.bandwidth())
.attr("x", x(0))
.attr("y", d => y((prev.get(d) || d).rank))
.attr("width", d => x((prev.get(d) || d).value) - x(0)),
update => update,
exit =>
exit
.transition(transition)
.remove()
.attr("y", d => y((next.get(d) || d).rank))
.attr("width", d => x((next.get(d) || d).value) - x(0))
)
.call(bar =>
bar
.transition(transition)
.attr("y", d => y(d.rank))
.attr("width", d => x(d.value) - x(0))
));
}
function labels(svg) {
let label = svg
.append("g")
.style("font", "bold 12px var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.selectAll("text");
return ([date, data], transition) =>
(label = label
.data(data.slice(0, n), d => d.name)
.join(
enter =>
enter
.append("text")
.attr(
"transform",
d =>
`translate(${x((prev.get(d) || d).value)},${y(
(prev.get(d) || d).rank
)})`
)
.attr("y", y.bandwidth() / 2)
.attr("x", -6)
.attr("dy", "-0.25em")
.text(d => d.name)
.call(text =>
text
.append("tspan")
.attr("fill-opacity", 0.7)
.attr("font-weight", "normal")
.attr("x", -6)
.attr("dy", "1.15em")
),
update => update,
exit =>
exit
.transition(transition)
.remove()
.attr(
"transform",
d =>
`translate(${x((next.get(d) || d).value)},${y(
(next.get(d) || d).rank
)})`
)
.call(g =>
g
.select("tspan")
.tween("text", d =>
textTween(d.value, (next.get(d) || d).value)
)
)
)
.call(bar =>
bar
.transition(transition)
.attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`)
.call(g =>
g
.select("tspan")
.tween("text", d => textTween((prev.get(d) || d).value, d.value))
)
));
}
formatNumber = d3.format(",d")
function axis(svg) {
const g = svg.append("g").attr("transform", `translate(0,${margin.top})`);
const axis = d3
.axisTop(x)
.ticks(width / 160)
.tickSizeOuter(0)
.tickSizeInner(-barSize * (n + y.padding()));
return (_, transition) => {
g.transition(transition).call(axis);
g.select(".tick:first-of-type text").remove();
g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "white");
g.select(".domain").remove();
};
}
function ticker(svg) {
const now = svg
.append("text")
.style("font", `bold ${barSize-12}px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr('fill', 'lightgrey')
.attr("x", width - 6)
.attr("y", margin.top + barSize * (n - 0.45))
.attr("dy", "0.32em")
.text(formatDate(keyframes[0][0]));
return ([date], transition) => {
transition.end().then(() => now.text(formatDate(date)));
};
}
keyframes = {
const keyframes = [];
let ka, a, kb, b;
for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {
for (let i = 0; i < k; ++i) {
const t = i / k;
keyframes.push([
new Date(ka * (1 - t) + kb * t),
rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)
]);
}
}
keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);
return keyframes;
}
function rank(value) {
const data = Array.from(names, name => ({ name, value: value(name) }));
data.sort((a, b) => d3.descending(a.value, b.value));
for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);
return data;
}
names.values()
k = 10
nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)
prev = new Map(
nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a]))
)
next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))
color = {
const scale = d3.scaleOrdinal(d3.schemeTableau10);
if (data.some(d => d.name !== undefined)) {
const countyByName = new Map(data.map(d => [d.name, d.name]));
scale.domain(Array.from(countyByName.values()));
return d => scale(countyByName.get(d.name));
}
return d => scale(d.name);
}
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
y = d3
.scaleBand()
.domain(d3.range(n + 1))
.rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
.padding(0.1)
margin = ({ top: 16, right: 6, bottom: 6, left: 0 })
barSize = 48
data = {
let input = JSON.parse(await FileAttachment('poZupanijama@1.json').text());
let retval = new Array();
let delta = 14;
for (var i = 0; i < input.length; i = i + delta) {
var element = input[i];
let date = d3.timeParse('%Y-%m-%d %H:%M')(element.Datum);
element.PodaciDetaljno.forEach(zupanija => {
retval.push({
date: date,
name: zupanija.Zupanija,
value:
(zupanija.broj_zarazenih / populations[zupanija.Zupanija]) * 100000
});
});
}
return retval.reverse();
}
JSON.parse(await FileAttachment('poZupanijama@1.json').text())
populations = {
return {
"Grad Zagreb": 783135,
"Splitsko-dalmatinska": 454087,
"Zagrebačka ": 314184,
"Osječko-baranjska": 309155,
"Primorsko-goranska": 297676,
Istarska: 207650,
"Vukovarsko-srijemska": 183866,
"Sisačko-moslavačka": 179126,
Varaždinska: 177268,
Zadarska: 167715,
"Brodsko-posavska": 161605,
"Krapinsko-zagorska": 134333,
Karlovačka: 132673,
"Bjelovarsko-bilogorska": 122788,
"Dubrovačko-neretvanska": 121514,
"Koprivničko-križevačka": 117284,
Međimurska: 113748,
"Šibensko-kninska": 111488,
"Virovitičko-podravska": 87196,
"Požeško-slavonska": 80264,
"Ličko-senjska": 52950
};
}
n = 10
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.