arcs stacked around

by Igor Cuckovic

JavaScript

// total 92, 30 orange, 62 gray, first orange

var r = 182 / 2;
var p = Math.PI * 2;

var totalDays = 92,
    currentDay = 30;

var w = 200,
    h = 200,
    data = d3.range(totalDays),
    data1 = d3.range(currentDay),
    angle = d3.scale.ordinal().domain(data).rangeBands([0, 2 * Math.PI]),
    angle1 = d3.scale.ordinal().domain(data1).rangeBands([0, (2 * Math.PI) * currentDay / totalDays]);

var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");



var arc1 = d3.svg.arc()
    .innerRadius(r - 10)
    .outerRadius(r)
    .startAngle(function(d) { return angle1(d); })
    .endAngle(function(d) { return angle1(d) + angle1.rangeBand() / 1.5; });

vis.selectAll("path")
    .data(data1)
  .enter().append("path")
    .attr("d", arc1)
    .attr("fill", "orange");


var arc = d3.svg.arc()
    .innerRadius(r - 10)
    .outerRadius(r)
    .startAngle(function(d) { return angle(d); })
    .endAngle(function(d) { return angle(d) + angle.rangeBand() / 1.5; });

vis.selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("d", arc)
    .attr("fill", "lightgrey");