leg = g => g .call(g => g.selectAll("mydots") .data(races) .join("circle") .attr("transform", `translate(10, 10)`) .attr("cx", (d,i)=> i < 3 ? i*170 : (i-3) * 170) .attr("cy", (d,i)=> i < 3 ?0:20) .attr("r", 7) .style("fill", d=> color(d))) .call(g => g.selectAll("mylabels") .data(races) .join("text") .attr("font-family", "sans-serif") .attr("transform", `translate(10, 10)`) .attr("x", (d,i)=> i < 3 ? 20 + i*170 : 20 + (i-3) * 170) .attr("y", (d,i)=> i < 3 ?0:20) .style("fill", d=> color(d)) .text(d =>d) .attr("text-anchor", "left") .style("alignment-baseline", "middle")) //.style("opacity", 1) .call(g => g.selectAll("mycitydots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 240)`) .attr("cx", (d,i)=> i < 3 ? 20: 0) .attr("cy", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .attr("r", 7) .style("fill", d=> color(d))) // .style("opacity", 1) .call(g => g.selectAll("mycitylabels") .data(["", "","","","City-level", ""]) .join("text") .attr("font-family", "sans-serif") .attr("transform", `translate(10, 240)`) .attr("x", (d,i)=> 30) .attr("y", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .style("fill", "black") .text(d =>d) .attr("text-anchor", "left") .style("alignment-baseline", "middle")) // .style("opacity", 1) .call(g => g.selectAll("mystatedots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 240)`) .attr("cx", (d,i)=> width/4 + (i < 3 ? 20: 0)) .attr("cy", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .attr("r", 7) .style("opacity", 0.5) .style("fill", d=> color(d))) .call(g => g.selectAll("mystatelabels") .data(["", "","","","State-level", ""]) .join("text") .attr("font-family", "sans-serif") .attr("transform", `translate(10, 240)`) .attr("x", (d,i)=> width/4 + 30) .attr("y", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .style("fill", "black") .text(d =>d) .attr("text-anchor", "left") .style("opacity", 0.5) .style("alignment-baseline", "middle"))