CODEWITHSUNDEEP
d3.jsgeometry
Atikah Mohamad
Atikah Mohamad

Reputation: 71

d3 Generate overlapping circles

I'd like to generate a diagram like in the pic below. Everything (the circles) are static except for the point representing Q1, Q2, etc. This is my first time using D3 and have looked through Scott Murray's tutorials (http://alignedleft.com/tutorials/).

question plotting http://dahlia.net78.net/evaluation.png

So far I've only managed to come up with the purple circles. 

var dataset = [ 280, 230, 180, 130, 80, 30 ];

var w = 600;
var h = 600;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", 300)
   .attr("cy", 300)
   .attr("r", function(d) { return d; })
   .attr("fill","mediumpurple")
   .attr("stroke","black")
   .attr("stroke-width",1);

I'm not sure how to continue and generate the overlapping circles. Anyone can point me in the right direction? Thanks.

Upvotes: 1

Views: 1077

Answers (1)

Pablo Navarro
Pablo Navarro

Reputation: 8264

You can use groups for each group of circles. Please note that svg doesn't have layers, the circles are drawn in order.

var gPurple = svg.append('g');

gPurple.selectAll('circle')
    // your code here, you can also add the text

var gLeft = svg.append('g')
    // draw left circles here 

// add the white circle, above all the others
gPurple.append('circle')

Upvotes: 1

Related Questions