Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
chart = {
const svg = d3
.create("svg")
.style("width", width + "px")
.style("height", height + "px")
.style("font", "12px sans-serif");
svg.append("g").call(xAxis);
const group = svg.append("g");
const country = group
.selectAll("g")
.data(data)
.join("g")
.attr(
"transform",
(d, i) => `translate(${margin.left}, ${i * (barHeight + 5)})`
);
country
.append("line")
.attr("x1", 0)
.attr("x2", width - margin.right - margin.left)
.attr("y1", barHeight)
.attr("y2", barHeight)
.attr("stroke", "#ccc")
.attr("stroke-width", 0.5);
country
.selectAll("rect")
.data((d) => d[1].filter((el) => el.nuclear_weapons_tests > 0))
.join("rect")
.attr("x", (d) => x(new Date(d.Year + "")))
.attr("y", 0)
.attr("width", barWidth)
.attr("height", barHeight)
.attr("stroke-width", 0.5)
.style("fill", (d) => colorScale(d.nuclear_weapons_tests))
.on("mousemove", nodeMouseOver)
.on("mouseout", nodeMouseOut);
country
.append("text")
.attr("y", barHeight / 2 - 5)
.text((d) => d3.sum(d[1], (i) => i.nuclear_weapons_tests))
.style("font-weight", "bold");
country
.append("text")
.attr("y", barHeight / 2 + 10)
.text((d) => (d[0] === "Russia" ? "russia" : d[0]));
function nodeMouseOver(event, d) {
let x = event.pageX + 18;
let y = event.pageY;
x > width - 200 ? (x = x - 218) : x;
toolTip
.style("left", x + "px")
.style("top", y + 2 + "px")
.style("display", "block")
.html(
`<strong>${d.Entity}</strong><br>Year: ${d.Year}<br>Tests: ${d.nuclear_weapons_tests}`
);
}
function nodeMouseOut(event, d) {
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.
