// Quick charting tool for helping with infographics
//
// Japanese fan chart
// values are positive numbers [0, 100].


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  innerRadius: 23,
  thicknessRange: [10, 147],
  colorRange: ['#0a88ff', '#004e8e']
};

d3.csv('chart_data.csv', function (json) {
  var data = sanitize(json);
  drawChart(data);
});

function sanitize(data) {
  data.forEach(function (d) {
    if (d.value > 100) {
      d.value = 100;
    }
    if (d.value < 0) {
      d.value = 0;
    }
  })
  
  data.sort(function (a, b) {
    return (a.value === b.value? 0 : (a.value > b.value ? -1 : 1));
  });
  return data;
}

function drawChart(chartData) {
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
  .attr('transform', 'translate(357, 269)');

  var arc = d3.svg.arc()
  .innerRadius(config.innerRadius);

  var dataSize = chartData.length;
  var PI = 3.1416;
  var segmentAngle = (2 * PI / dataSize);
  var valueDomain = [0, 100];

  var segmentThicknessScale = d3.scale.linear()
  .domain(valueDomain)
  .range(config.thicknessRange);

  var colorScale = d3.scale.linear()
  .domain(valueDomain)
  .interpolate(d3.interpolateRgb)
  .range(config.colorRange);
  var colorScale1 = d3.scale.category20();

  var opacityScale = d3.scale.linear()
  .domain(valueDomain)
  .range([0.5, 1]);

  var g = gRoot.selectAll('g.arc')
  .data(chartData)
  .enter()
  .append('g')
  .attr('class', 'arc');

  g.append('svg:path')
    .attr('d', function (d, i) {
    arc
      .outerRadius(config.innerRadius + segmentThicknessScale(d.value))
      .startAngle(i * segmentAngle)
      .endAngle((i + 1) * segmentAngle);
    return arc();
  })
    .style('fill', function (d) {
    return colorScale(d.value);
  })
    .style('fill-opacity', function (d) {
    return opacityScale(d.value);
  })
    .style('stroke-width', 2)
    .style('stroke-opacity', 0.216)
    .style('stroke', 'white');
}