Public
Edited
Apr 24, 2023
Insert cell
Insert cell
Insert cell
dataviz = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

const path = svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#ddd")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(data.countries)
.join("path")
.attr("d", (d) => line(d.values.map((el, i) => (el == 0 ? el[i - 1] : el))))
.attr("class", (d) => d.code.toLowerCase());

svg.select(".wld, .euu").raise();

svg.selectAll(".eas").raise().classed("poi", true);

svg.call(hover, path);

svg
.append("text")
.attr("class", "legend")
.attr("y", y(31.8))
.attr("x", width - margin.right + 5)
.attr("font-weight", "bold")
.style("fill", "rgb(251 0 0 / 83%)")
.text("EU");

svg
.append("text")
.attr("class", "legend")
.attr("y", y(24.58))
.attr("x", width - margin.right + 5)
.text("World Mean");

svg.selectAll(`.${sc}`).style("stroke", "black").style("stroke-width", "2px");
svg.selectAll(`.${sc}`).raise();

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sc = countryCode[selectedCountry].toLowerCase()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more