Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
{
const svg = d3
.create("svg")
.style("width", width + "px")
.style("height", height + "px")
.attr("viewBox", [0, 0, width, height])
.style("font", "12px sans-serif");
const group = svg.append("g").attr("stroke-linejoin", "round");
group
.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", (d, i) => {
return mapData[d.id] && mapData[d.id][year]
? colorScale(mapData[d.id][year])
: "#ccc";
})
.attr("class", "country")
.on("mousemove", nodeMouseOver)
.on("mouseout", nodeMouseOut);
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "#333")
.attr("opacity", "0.2")
.attr("d", path(d3.geoGraticule().step([20, 20])()));
function nodeMouseOver(event, d) {
let x = event.pageX + 18;
let y = event.pageY;
x > width - 200 ? (x = x - 170) : x;
toolTip
.style("left", x + "px")
.style("top", y + 2 + "px")
.style("display", "block")
.html(
`<strong>${
d.properties.NAME
}</strong><br>Year: <strong>${year}</strong><br>Population: <strong>${mapData[
d.id
][year].toLocaleString()}</strong>`
);
}
function nodeMouseOut() {
toolTip.style("display", "none");
}
return svg.node();
}
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.
