Public
Edited
Nov 28, 2023
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)
.on("mouseover", function(event, d) {
let text = d.properties.name
const mean_homo = d.properties.data.get(year)[0].mean_homo
text = text + "\nAcceptability: " + 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")
})
//.transition().duration(500)
.attr("fill", d => d.properties.data?.get(year)
? cScale(d.properties.data.get(year)[0].mean_homo)
: "lightgrey")
return svg.node()
}
data = d3.csvParse(await FileAttachment("Interpolated_Data_Cleaned.csv").text(), d => {
if (d.country === "United States") {
d.country = "United States of America"
}
return {
country: d.Country,
year: +d.Year,
wave: +d.Wave,
country_code: +d.Country_Code,
mean_homo: +d.mean_homo }
} )
{for (let i = 0; i < data.length; i++) {
data[i].Year += cars[i] + "<br>";
}}
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.
