Scatter plots with dart-board circle boundaries

[Kenny Lee]

Hi all,

I have a some data points with x and y values that I need to fit into a dart-board-like chart.

The points which fits into the smallest circle are in green and in the range of -1 to 1 for both x and y.

I am able to draw the typical scatter plot with the x and y axes, but have no idea how to draw those dart-board circles.

Attached below is a mock image of my final goal .

Cheers,

Ken

[Kenny Lee]

Managed to produce the code for this. Turns out to be straight-forward.

//Create SVG element

var plot = d3.select(".scatter-plot")

.append("svg")

.attr("width", w)
.attr("height", h);

//Create dashed circles

for (i = 125; i >= 0; i-=25) {

plot.append("circle")

          .attr("cx", w/2)

          .attr("cy", h/2)

          .attr("r", i)

          .style("stroke", "black")

          .style("stroke-dasharray", "5,5")

          .style("stroke-width", "2")

          .style("fill", "white");

}