Question

Random Data

var data = [53245];
  var data2 = [28479, 234234];
  var data3 = [19697];
  var data4 = [41123,12313];

Width & Height of canvas

  var w = 960,
      h = 500,
      r = Math.min(w, h) / 2,
      donut = d3.layout.pie().sort(null),

Here is where i decide how big I wish a arc to be

arc = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-2).endAngle(-1.34),
arc2 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-1.34).endAngle(-0.68),
arc3 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-0.68).endAngle(-0.02),
arc4 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-0.02).endAngle(0.64), 
arc5 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(0.64).endAngle(1.3),
arc6 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(1.3).endAngle(1.96),

I have tried using transform, but my shape sits upside down. I would like it to be an arc not a U shape.

var svg = d3.select("body").append("svg:svg")
    .append("svg:g")
      .attr("transform", "translate(700,400) scale(1, -1)");

The paths for color etc

  var arcs = svg.selectAll("path")
      .data(donut(data))
         .enter().append("svg:path")
            .attr("fill", function(d, i) { return 'blue'; })
            .attr("d", arc)
      .data(donut(data2))
          .enter().append("svg:path")
              .attr("fill", function(d, i) { return 'green'; })
              .attr("d", arc2)
      .data(donut(data3))
          .enter().append("svg:path")
              .attr("fill", function(d, i) { return 'pink'; })
              .attr("d", arc3)
      .data(donut(data4))
          .enter().append("svg:path")
              .attr("fill", function(d, i) { return 'black'; })
              .attr("d", arc4)

     .data(donut(data4))
          .enter().append("svg:path")
            .attr("fill", function(d,i) {return 'yellow';})
            .attr("d",arc5)

     .data(donut(data4))
          .enter().append("svg:path")
            .attr("fill", function(d,i) {return 'orange';})
            .attr("d",arc6)

Answer 1

I’ve solved it myself:

.attr("transform", "translate(700,450) rotate(180) scale(-1, -1)")

Simply added rotate & changed the scale 🙂