{
callxAxis;
callyAxis;
const groups = svg
.selectAll("g.country")
.data(byCountry)
.join("g")
.attr("class", "country")
.attr("stroke", darkGray)
.on("mouseenter", function() {
d3.selectAll("circle")
.attr("opacity", 0.5)
.attr("stroke", darkGray)
d3.selectAll(".abbrev")
.attr("opacity", 0.5)
.attr("stroke", "none")
d3.selectAll(this.childNodes)
.attr("stroke", darkGray)
.attr("opacity", 1)
});
const circle = groups.selectAll("circle")
.data(d =>[(d[1].has("MEN") && d[1].get("MEN")),
(d[1].has("WOMEN") && d[1].get("WOMEN"))])
.join("circle")
.attr("class", (d) => "circle " + d[0].Country)
.attr("cx", (d) => xScale(d[0].Value/60))
.attr("cy", (d) => yScale(d[1].Value/60))
.attr("r", 4)
.attr("fill", d => colorScale(d[1].SEX))
.attr("opacity", 1)
.attr("stroke", darkGray)
callLegend
legendLabel1;
legendLabel2;
sepLine
menAnn;
womenAnn;
title;
callTooltips;
svg
.on("click", function() {
d3.selectAll("circle")
.attr("opacity", 1)
.attr("stroke", darkGray)
d3.selectAll(".abbrev")
.attr("opacity", 1)
.attr("stroke", "none")
});
return svg.node();
}