Published
Edited
Jan 7, 2022
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const startGroup = svg.append("g").attr("transform", `translate(300,0)`);
startGroup
.append("text")
.attr("text-anchor", "end")
.attr("y", height - 10)
.attr("font-weight", 700)
.text(d3.timeFormat("%B %d, %Y")(startDate));
for (var i = 0; i < connections.length; i++) {
const d = connections[i];
startGroup
.append("line")
.attr("stroke", "black")
.attr("opacity", d.name == "Croatia" ? 1 : 0.1)
.attr("x1", 0)
.attr("x2", 300)
.attr("y1", y(d.start))
.attr("y2", y(d.end));
}
for (var i = 0; i < start.length; i++) {
const d = start[i];
startGroup
.append("circle")
.attr("r", 3)
.attr("cx", 0)
.attr("opacity", d.name == "Croatia" ? 1 : 0.1)
.attr("cy", y(d.rate));
startGroup
.append("text")
.attr("alignment-baseline", "middle")
.attr("dx", -5)
.attr("y", y(d.rate))
.attr("stroke-linejoin", "round")
.attr("stroke-width", 5)
.attr("text-anchor", "end")
.attr("stroke", "white")
.text(`${d.name} ${d3.format(",.2r")(d.rate)}`);
startGroup
.append("text")
.attr("alignment-baseline", "middle")
.attr("dx", -5)
.attr("y", y(d.rate))
.attr("text-anchor", "end")
.attr("opacity", d.name == "Croatia" ? 1 : 0.2)
.text(`${d.name} ${d3.format(",.2r")(d.rate)}`);
}
const endGroup = svg.append("g").attr("transform", `translate(600,0)`);
endGroup
.append("text")
.attr("y", height - 10)
.attr("font-weight", 700)
.text(d3.timeFormat("%B %d, %Y")(new Date(2022, 0, 1)));
for (var i = 0; i < end.length; i++) {
const d = end[i];
endGroup
.append("circle")
.attr("r", 3)
.attr("cx", 0)
.attr("opacity", d.name == "Croatia" ? 1 : 0.1)
.attr("cy", y(d.rate));
endGroup
.append("text")
.attr("alignment-baseline", "middle")
.attr("dx", 5)
.attr("y", y(d.rate))
.attr("stroke-linejoin", "round")
.attr("stroke-width", 5)
.attr("stroke", "white")
.text(`${d.name} ${d3.format(",.2r")(d.rate)}`);
endGroup
.append("text")
.attr("alignment-baseline", "middle")
.attr("dx", 5)
.attr("y", y(d.rate))
.attr("opacity", d.name == "Croatia" ? 1 : 0.2)
.text(`${d.name} ${d3.format(",.2r")(d.rate)}`);
}
return svg.node();
}
connections = {
let retval = [];
for (var i = 0; i < start.length; i++) {
let d = start[i];
let startIndex = start.indexOf(d);
let endIndex = end.indexOf(end.find((endD) => endD.name == d.name));
retval.push({
name: d.name,
start: start[startIndex].rate,
end: end[endIndex].rate
});
}
return retval;
}
y = d3
.scaleLinear()
.domain([0, max])
.range([height - 30, 30])
height = 1200
max = d3.max(end, (d) => d.rate)
end.push(end.splice(endIndex, 1)[0])
start
end = endGroup.map((d) => {
return {
name: d.location,
rate: d.total_deaths_per_million
};
})
endIndex = end.indexOf(endCroatia)
endCroatia = end.find((d) => d.name == "Croatia")
endGroup = data.filter(
(d) =>
d.date > new Date(2022, 0, 1) &&
d.date < new Date(2022, 0, 2) &&
d.total_deaths_per_million !== null
)
start.push(start.splice(startIndex, 1)[0])
startIndex = start.indexOf(startCroatia)
startCroatia = start.find((d) => d.name == "Croatia")
start = startGroup.map((d) => {
return {
name: d.location,
rate: d.total_deaths_per_million
};
})
startGroup = data.filter(
(d) =>
d.date > new Date(2020, 5, 1) &&
d.date < new Date(2020, 5, 2) &&
d.total_deaths_per_million !== null
)
item = data.find((d) => d.iso_code == "ALB" && d.date > startDate)
startDate = new Date(2020, 5, 1)
data = d3.csvParse(
await FileAttachment("owid-covid-data@1.csv").text(),
d3.autoType
)
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.
