D3 cyclic chords

by wittnl

JavaScript

var w = 300,
    h = 300,
    center = { x: w/2, y: h/2 };

var r0 = Math.min(w, h) * .41,
    r1 = r0 * 1.1;
 
 var fill = d3.scale.ordinal()
     .domain(d3.range(4))
     .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

var l1 = ["Foo"];
var l2 = ["Bar", "Baz", "Bar", "Baz", "Buzz"];

var theta = 2 * Math.PI / (l2.length + 1);

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

var root = svg.selectAll("circle")
                .data(l1)
                .enter()
                .append("circle")
                .attr("cx", center.x)
                .attr("cy", center.y)
                .attr("r", 30);

var children = svg.selectAll("circle")
                .data(l2)
                .enter()
                .append("circle")
                .attr('cx', function(d, i) { return center.x - (100 * Math.cos(i * theta)); })
                .attr('cy', function(d, i) { return center.y - (100 * Math.sin(i * theta)); })
                .attr("r", 10);

var pie2 = d3.layout.pie()
    .value(function(d) { return 1; } );

  var arcs2 = svg.selectAll("g.slice2")
      .data(pie2)
          .enter().append("svg:g")
      .attr("class", "slice2");

  arcs2.append("svg:path")
      .attr("fill", function(d) {return d.data.color; } )
      .style("fill-opacity", .25)
      .style("stroke", "White")
      .attr("stroke-width", "2")
      .attr("d", arc2);