Designer at Critical TechWorks
Published
Edited
Sep 8, 2021
1 star
svgScatterplot = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.call((axis) =>
axis
.append("text")
.text("Athletes (Total)")
.style("fill", "black")
.attr("transform", `translate( ${iwidth}, -10)`)
.style("text-anchor", "end")
);
g.append("g")
.call(d3.axisLeft(y))
.call((axis) =>
axis
.append("text")
.text("Medals (Total)")
.style("fill", "black")
.style("text-anchor", "middle")
.attr("y", -15)
);
const voronoi = d3.Delaunay.from(
sort_mData2,
(d) => x(d.Athletes),
(d) => y(d.Medals)
).voronoi([0, 0, iwidth, iheight]); // ensures voronoi is limited to the chart area
g.append("g")
.attr("class", "voronoiWrapper")
.selectAll("path")
.data(sort_mData2)
.join("path")
.attr("opacity", 0.9)
//.attr("stroke", "#ff1493") // Hide overlay
.attr("fill", "none")
.style("pointer-events", "all")
.attr("d", (d, i) => voronoi.renderCell(i))
.on("mouseover", (d, i) => {
svg
.append("g")
.attr("class", "tooltip")
.attr(
"transform",
`translate(${x(d.Athletes) + margin.left},${
y(d.Medals) + margin.top
})`
)
.call(
popover,
`${d.Country}
${d.Athletes} Athletes
${d.Medals} Medals
`
);
//append a new circle on top of the x and y of the voronoi wraper intersections
g.append("circle")
.attr("class", "selected-country")
.attr("transform", `translate(${x(d.Athletes)},${y(d.Medals)})`)
.attr("fill", "#e8b923FF")
.attr("stroke", "#e8b923FF")
.attr("r", 6);
})
.on("mouseout", () => {
svg.selectAll(".tooltip").remove();
svg.selectAll(".selected-country").remove();
});
//Circles of Medals/athletes
g.append("g")
.selectAll(".medal")
.data(sort_mData2)
.join("circle")
.attr("class", "medal")
.attr("cx", (d) => x(d.Athletes))
.attr("cy", (d) => y(d.Medals))
.attr("fill", "#e8b92360")
.attr("stroke", "#e8b923FF")
.attr("r", 4);
return svg.node();
}
//.attr("cx", (d) => x(d.Athletes) + margin.left)
//.attr("cy", (d) => y(d.Medals))
d3 = require("d3@5", "d3-delaunay@5")
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.
