D3 Examples - Radial Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  //Ref: https://bl.ocks.org/bricedev/8aaef92e64007f882267
var width = 960,
    height = 500,
    barHeight = height / 2 - 40;
​
var formatNumber = d3.format("s");
​
var svg = d3.select('body').append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
  
d3.csv("data.csv", function(error, data) {
    console.log(data);
  var extent = d3.extent(data, function(d) { return d.value; });
  var barScale = d3.scale.linear()
      .domain(extent)
      .range([0, barHeight]);
  var keys = data.map(function(d,i) { return d.name; });
  var numBars = data.length;
​
  var arc = d3.svg.arc()
      .startAngle(function(d,i) { return (i * 2 * Math.PI) / numBars; })
      .endAngle(function(d,i) { return ((i + 1) * 2 * Math.PI) / numBars; })
      .innerRadius(0);
  /*
  var segments = svg.selectAll("path")
                    .data(data)
                    .enter()
                    .append("path")
          .each(function(d) { d.outerRadius = 0; })
          .style("fill", "#ffffff")
          .style("stroke", "#000000")
          .attr("d", arc);
  */
  var segments = svg.selectAll("path")
                    .data(data)
                    .enter()
                    .append("path")
          .style("fill", "#ffffff")
          .style("stroke", "#000000")
          .attr("d", function(d, index) {
              d.outerRadius = barScale(+d.value);
              return arc(d, index);
          });
  /*
  segments.transition().ease("elastic").duration(1000).delay(function(d,i) {return (25-i)*100;})
          .attrTween("d", function(d,index) {
            var i = d3.interpolate(d.outerRadius, barScale(+d.value));
            return function(t) { d.outerRadius = i(t); return arc(d,index); };
          });
  */
  
  // Labels
  var labelRadius = barHeight * 1.025;
​
  var labels = svg.append("g")
      .classed("labels", true);
​
  labels.append("def")
        .append("path")
        .attr("id", "label-path")
        .attr("d", "m0 " + -labelRadius + " a" + labelRadius + " " + labelRadius + " 0 1,1 -0.01 0");
​
  labels.selectAll("text")
        .data(keys)
      .enter().append("text")
        .style("text-anchor", "middle")
        .append("textPath")
        .attr("xlink:href", "#label-path")
        .attr("startOffset", function(d, i) {return i * 100 / numBars + 50 / numBars + '%';})
        .text(function(d) {return d; });
  
});
</script>
    