euScatter = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("rect")
.attr("x", vaxScale(0))
.attr("y", gdpY.range()[1])
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom)
.attr("fill", "#f9f9f9");
svg
.append("text")
.attr("x", width / 2)
.attr("y", 20)
.attr("opacity", 0.8)
.attr("font-size", 22)
.attr("text-anchor", "middle")
.text(title);
svg
.append("foreignObject")
.attr("font-size", 14)
.attr("opacity", 0.9)
.attr("width", width - margin.right - margin.left)
.attr("height", 100)
.attr("x", vaxScale(0))
.attr("y", 30)
.text(explanation);
svg
.append("path")
.attr("fill", "#ccc")
.attr("fill-opacity", 0.15)
.attr("stroke", "none")
.attr("d", area(intervalData));
svg
.append("path")
.datum(correlationLineData)
.attr("stroke", "#333")
.attr("opacity", 0.4)
.attr("stroke-dasharray", "8,8")
.attr("stroke-width", 1.5)
.attr("d", corrLine);
svg
.append("rect")
.attr("x", 0)
.attr("y", height - margin.bottom)
.attr("width", width)
.attr("height", 200)
.attr("fill", "white");
svg.append("g").call(xGrid);
svg.append("g").call(yGrid);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("path").datum();
svg
.selectAll(".flags")
.data(combinedData)
.enter()
.append("text")
.attr("font-size", (d) => populationScale(d.population))
.attr("opacity", 0.8)
.attr("x", (d) => vaxScale(d.vaxRate))
.attr("y", (d) => gdpY(d.gdp))
.text((d) => emojiMap.get(d.code));
return svg.node();
}
title = "Why are vaccination rates correlated with economic prosperity?"
explanation = "The chart shows EU countries scattered according to vaccination rates and median equalised net income. Flag size correlates to respective population sizes. The dotted line represents regression, with a grey area indicating the 95% confidence interval. One can notice a significant correlation between the observed variables and the clustering of countries along the 'iron curtain' lines."
correlationLineData = [
[vaxScale.domain()[0], predict(vaxScale.domain()[0])],
[vaxScale.domain()[1], predict(vaxScale.domain()[1])]
]
yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.style("stroke-width", 1)
.call(d3.axisLeft(gdpY))
.call((g) => g.select(".domain").remove())
.call((g) => g.select(".tick:last-of-type text").append("tspan").text(" €"))
.call((g) =>
g
.append("text")
.attr("x", 5)
.attr("y", margin.top + 15)
.attr("fill", "#000")
.attr("opacity", 0.5)
.attr("font-size", 12)
// .attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Median equivalised net income")
)
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(vaxScale).ticks(width / 100))
.call((g) => g.select(".domain").remove())
.call((g) => g.select(".tick:last-of-type text").append("tspan").text("%"))
.call((g) =>
g
.append("text")
.attr("x", width - margin.right - 5)
.attr("y", -10)
.attr("fill", "#000")
.attr("opacity", 0.5)
.attr("font-size", 12)
// .attr("font-weight", "bold")
.attr("text-anchor", "end")
.text("Percentage of population vaccinated with at least one dose")
)
yGrid = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(gdpY).tickSize(-width + margin.left + margin.right))
.call((g) => g.select(".domain").remove())
.call((g) => g.selectAll("text").remove())
.call((g) => g.selectAll("line").attr("stroke", "white"))
xGrid = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(
d3.axisBottom(vaxScale).tickSize(-height + margin.top + margin.bottom)
)
.call((g) => g.select(".domain").remove())
.call((g) => g.selectAll("text").remove())
.call((g) => g.selectAll("line").attr("stroke", "white"))
predict = linearRegression(confidenceData)
interval = confidenceInterval(confidenceData, predict)
emojiMap = new Map(countryEmoji.map((key) => [key.alpha3, key.flag]))
gdpDataMap = new Map(gdpData.map((key) => [key.code, key.gdp]))
countryNameMap = new Map(gdpData.map((key) => [key.code, key.country]))
countryEmojiMap = countryEmoji.map
format = d3.format(".1%")
gdpY = d3
.scaleLinear()
.domain([0, 40000])
.range([height - margin.bottom, margin.top])
austriaRed = "#ED2939"
inactiveOpacity = 0.2
inactiveColor = 'grey'
height = 800
wrangled = {
let retval = [];
euCountries
.map((d) => d["iso-3"])
.forEach((country) => {
const countryData = grouped.get(country);
const lastNonNull = countryData
.filter((x) => x["people_vaccinated"] != null)
.slice(-1)
.pop();
var countryName = country;
// if (countryName == "OWID_EUN") countryName = euAutName;
retval.push({
name: countryName,
value: lastNonNull["people_vaccinated"] / lastNonNull["population"],
population: lastNonNull["population"]
});
});
return retval.sort((a, b) => a.value - b.value);
}
findWithAttr = (array, attr, value) => {
for (var i = 0; i < array.length; i += 1) {
if (array[i][attr] === value) {
return i;
}
}
return -1;
}
vaxScale = d3
.scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right])
euCountries = [
...d3.csvParse(
await FileAttachment("countryCodes@1.csv").text(),
d3.autoType
),
{ country: "EU", "iso-3": "OWID_EUN" }
]
gdpData = d3.csvParse(
await FileAttachment("gdp-per-capita-worldbank@2.csv").text(),
d3.autoType
)
grouped = d3.group(data, d => d.iso_code)
data = d3.csvParse(
await FileAttachment("owid-covid-data (1)@1.csv").text(),
d3.autoType
)
margin = ({ top: 100, right: 100, bottom: 30, left: 80 })
import { countryEmoji } from "@mattdzugan/making-maps-out-of-emojis";
d3 = require("d3@6", "d3-regression")
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.
