Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
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();
}
sc = countryCode[selectedCountry].toLowerCase()
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.
