Radial Bar Chart - Part 2

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <script>
    draw('dataRfIntentIndex.csv');
  </script>
</body>

</html>

function draw(csv) {
  "use strict";

  var margin = 0,
    width = 600,
    height = 600,
    maxBarHeight = height / 2 - (margin + 70);

  var innerRadius = 0.1 * maxBarHeight; // innermost circle

  var svg = d3.select('body')
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("class", "chart")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var defs = svg.append("defs");

  var gradients = defs
    .append("linearGradient")
    .attr("id", "gradient-chart-area")
    .attr("x1", "50%")
    .attr("y1", "0%")
    .attr("x2", "50%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

  gradients.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#EDF0F0")
    .attr("stop-opacity", 1);

  gradients.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#ACB7BE")
    .attr("stop-opacity", 1);

  gradients = defs
    .append("linearGradient")
    .attr("id", "gradient-questions")
    .attr("x1", "50%")
    .attr("y1", "0%")
    .attr("x2", "50%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

  gradients.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#F6F8F9")
    .attr("stop-opacity", 1);

  gradients.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#D4DAE0")
    .attr("stop-opacity", 1);

  gradients = defs
    .append("radialGradient")
    .attr("id", "gradient-bars")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("cx", "0")
    .attr("cy", "0")
    .attr("r", maxBarHeight)
    .attr("spreadMethod", "pad");

  gradients.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#F3D5AA");

  gradients.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", "#F4A636");

  gradients.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#AF4427");

  svg.append("circle")
    .attr("r", maxBarHeight + 70)
    .classed("category-circle", true);

  svg.append("circle")
    .attr("r", maxBarHeight + 40)
    .classed("question-circle", true);

  svg.append("circle")
    .attr("r", maxBarHeight)
    .classed("chart-area-circle", true);

  svg.append("circle")
    .attr("r", innerRadius)
    .classed("center-circle", true);

  d3.csv(csv, function(error, data) {

    var cats = data.map(function(d, i) {
      return d.category_label;
    });

    var catCounts = {};
    for (var i = 0; i < cats.length; i++) {
      var num = cats[i];
      catCounts[num] = catCounts[num] ? catCounts[num] + 1 : 1;
    }
    // remove dupes (not exactly the fastest)
    cats = cats.filter(function(v, i) {
      return cats.indexOf(v) == i;
    });
    var numCatBars = cats.length;

    var angle = 0,
      rotate = 0;

    data.forEach(function(d, i) {
      // bars start and end angles
      d.startAngle = angle;
      angle += (2 * Math.PI) / numCatBars / catCounts[d.category_label];
      d.endAngle = angle;

      // y axis minor lines (i.e. questions) rotation
      d.rotate = rotate;
      rotate += 360 / numCatBars / catCounts[d.category_label];
    });

    /* bars */
    var arc = d3.svg.arc()
      .startAngle(function(d, i) {
        return d.startAngle;
      })
      .endAngle(function(d, i) {
        return d.endAngle;
      })
      .innerRadius(innerRadius);

    var bars = svg.selectAll("path.bar")
      .data(data)
      .enter().append("path")
      .classed("bars", true)
      .each(function(d) {
        d.outerRadius = innerRadius;
      })
      .attr("d", arc);

    bars.transition().ease("elastic").duration(1000).delay(function(d, i) {
        return i * 100;
      })
      .attrTween("d", function(d, index) {
        var i = d3.interpolate(d.outerRadius, x_scale(+d.value));
        return function(t) {
          d.outerRadius = i(t);
          return arc(d, index);
        };
      });

    var x_scale = d3.scale.linear()
      .domain([0, 100])
      .range([innerRadius, maxBarHeight]);


    var y_scale = d3.scale.linear()
      .domain([0, 100])
      .range([-innerRadius, -maxBarHeight]);

    svg.selectAll("circle.x.minor")
      .data(y_scale.ticks(10))
      .enter().append("circle")
      .classed("gridlines minor", true)
      .attr("r", function(d) {
        return x_scale(d);
      });

    // question lines
    svg.selectAll("line.y.minor")
      .data(data)
      .enter().append("line")
      .classed("gridlines minor", true)
      .attr("y1", -innerRadius)
      .attr("y2", -maxBarHeight - 40)
      .attr("transform", function(d, i) {
        return "rotate(" + (d.rotate) + ")";
      });

    // category lines
    svg.selectAll("line.y.major")
      .data(cats)
      .enter().append("line")
      .classed("gridlines major", true)
      .attr("y1", -innerRadius)
      .attr("y2", -maxBarHeight - 70)
      .attr("transform", function(d, i) {
        return "rotate(" + (i * 360 / numCatBars) + ")";
      });
  });
}

/* Styles go here */

body {
    font: 8px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

/* hide y axis */
.axis .tick line, .axis path {
    display: none;
}

.category-circle {
    fill: #F4A636;
}

.question-circle {
    fill: url(#gradient-questions);
}

.chart-area-circle {
    stroke: #fff;
    stroke-width: 3px;
    fill: url(#gradient-chart-area);
}

.center-circle {
    fill: #fff;
}

.bars {
    fill: url(#gradient-bars);
}

.gridlines {
    fill: none;
    stroke: #fff;
}

.minor {
    stroke-width: 1px
}

.major {
    stroke-width: 6px
}

.question-label-arc {
    /*fill: white;
    stroke: #AAAAAA;
    fill: url(#gradient-questions);*/
}

.category-label-text {
    font-weight: bold;
    font-size: 14px;
    fill: #fff;
}

.question-labels {
    text-anchor: middle;
    font-weight: bold;
    fill: #3e3e3e;
}

.category-labels {
    text-anchor: middle;
    font-weight: bold;
    font-size: 14px;
    fill: #fff;
}

category_label,question_label,value
Learn,Educate Self,96
Learn,Research,89
Learn,Keep Informed,79
Have Fun,Pass Time,100
Have Fun,Be Entertained,82
Have Fun,Escape,66
Socialize,Connect,92
Socialize,Share,86
Socialize,Discuss,76
Socialize,Be Part of a Community,72
Express Yourself,Opine,62
Express Yourself,Entertain Others,48
Express Yourself,Emote,44
Express Yourself,Be Creative,42
Advocate,Influence Others,56
Advocate,Activate Support,52
Advocate,Join a Cause,26
Do Business,Work,69
Do Business,Manage Finances,30
Do Business,Sell,19
Shop,Purchase,33
Shop,Compare,28