chart = {
const svg = d3.create("svg").attr("viewBox", `0, 0, ${width}, ${height}`)
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
svg.selectAll("path")
.data(countries.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "#111")
.attr("stroke-width", 0.5)
.attr("fill", d => d.properties.data?.get(year)
? cScale(d.properties.data.get(year)[0].mean_homo)
: "lightgrey")
.on("mouseover", function(event, d) {
let text = d.properties.name
const mean_homo = d.properties.data.get(year)[0].mean_homo
showToolTip(text, [event.pageX, event.pageY])
})
.on("mousemove", function(event) {
d3.select(".tooltip")
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px")
})
.on("mouseout", function() {
d3.select(".tooltip").style("visibility", "hidden")
})
return svg.node()
}
cScale = d3.scaleSqrt()
.domain([
d3.min(data, d => d.mean_homo),
0,
d3.max(data, d => d.mean_homo)])
.range([-1, 0, 1])
.interpolate((a, b) => a < 0
? t => d3.interpolateReds(1-t)
: t => d3.interpolateBlues(t))
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.
