Radial Bar Chart

radial_bar.js

$(document).ready(function() {

  var radialElement = $("#radial");
  var outerWidth = radialElement.width();
  var outerHeight = radialElement.width()+200;
  var margin = { left: 0, top: 88, right: 0, bottom: 88 };
  var radiusMax = radialElement.width()/3 ;

  var sliceSizeColumn = "acres";
  var resortNameColumn = "resort_name"
  var stateColor = "state";

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;

  var svg = d3.select("#radial").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var colorScale = d3.scale.category20c ();
  var angleScale = d3.scale.linear();

  var pie = d3.layout.pie();
  var arc = d3.svg.arc();

  var angleRadian = (360 / (2 * Math.PI));

  var tooltip = d3.select("body").append("div") 
    .attr("class", "tooltip")       
    .style("opacity", 0);

  //View by acreage 
  var acreageThreshold = 1000;

  d3.csv("/ski_resort_acres_three.csv", function(error, data) {

    data = jQuery.grep(data, function(d, index) {
      var is_viewable = (d.acres >= acreageThreshold);
      return is_viewable;
    });

    data.forEach(function(d) {
      d.acres = +d.acres;
      d.state = d.state;
      return d;
    });
  
    var sortFunction = function(a, b) { return d3.descending(b.state, a.state)|| d3.descending(b.acres, a.acres); };
    data.sort(sortFunction).map(function(d) { return d.resort_name; });

    var centerPadding = 32;
    var axisPadding = 32;

    if (acreageThreshold >= 5000) {
      centerPadding = 1;
      axisPadding = 80;
    } else if (acreageThreshold >= 4000 && acreageThreshold < 5000) {
      centerPadding = 2;
      axisPadding = 110;
    } else if (acreageThreshold >= 3000 && acreageThreshold < 4000) {
      centerPadding = 4;
      axisPadding = 70;
    } else if (acreageThreshold >= 2000 && acreageThreshold < 3000) {
      centerPadding = 8;
      axisPadding = 60;
    } else if (acreageThreshold >= 1000 && acreageThreshold < 2000) {
      centerPadding = 16;
      axisPadding = 60;
    } else if (acreageThreshold >= 500 && acreageThreshold < 1000) {
      centerPadding = 24;
      axisPadding = 50;
    }

    // Pad data from center
    for (var i = 0; i < centerPadding; i++) {
      data.unshift({acres: 0});
    }
 
    colorScale.domain(data.map(function (d){ return d[stateColor]; }));
    pie.value(function(d) { return d[sliceSizeColumn]; })

    angleScale
      .domain([0, 5000])
      .range([0, Math.PI]);

    var axes = [
      { acres: 0 },
      { acres: 1000 },
      { acres: 2000 },
      { acres: 3000 },
      { acres: 4000 },
      { acres: 5000 },
      { acres: 6000 },
      { acres: 7000 },
      { acres: 8000 },
    ];

    var ga = svg.append("g")
      .attr("class", "a axis")
      .selectAll("g")
      .data(axes)
      .enter().append("g")
      .attr("transform", function(d) { return "rotate(" + ((angleScale(d.acres) * angleRadian)-90) + ")"; });
  
    ga.append("line")
      .attr("x2", radiusMax - axisPadding)
      .attr("transform", "translate(" + axisPadding + ", 0)")
      .attr("opacity", 0.1)

    ga.append("text")
      .attr("x", radiusMax + 6)
      .attr("dy", ".35em")
      .style("text-anchor", function(d) { return d.acres > 5000 && d.acres > 0 ? "end" : null; })
      .style("opacity", 0.6)
      .attr("transform", function(d) { return d.acres > 5000 && d.acres > 0 ? "rotate(180 " + (radiusMax + 6) + ",0)" : null; })
      .text(function(d){
           return addCommas(d.acres);
      });


    var pieData = pie(data);
    pieData.forEach(function (d){
      d.startAngle = 0;
      if (d.value <  1) {
        d.endAngle = angleScale(d.value) 
      } else {
        d.endAngle = angleScale(d.value)
      }
    });

    svg.attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");
    svg.selectAll("path")
      .data(pieData)
      .enter().append("path")
      .attr("d", function (d, i){
        arc.innerRadius(function(d) { 
          return i / (pieData.length) * radiusMax;
        })
        .outerRadius(function(d) { 
          return (i + .3) / (pieData.length) * radiusMax;
        });
        return arc(d);
      })
      .attr("fill", function (d){ return colorScale(d.data[stateColor]); })
      .on("mouseover", function(d) {
        bar = d3.select(this)
        allBars = d3.selectAll("path")
       tooltip.transition()    
          .duration(100)    
          .style("opacity", 1)
        allBars.transition()    
          .duration(100)    
          .style("opacity", .3)
        bar.transition()    
          .duration(100)    
          .style("opacity", 1);   
        tooltip.html(d.data.resort_name + "<br/>"  + addCommas(d.data.acres) + " ac")  
          .style("left", (d3.event.pageX) + "px")   
          .style("top", (d3.event.pageY - 28) + "px");  
      })          
      .on("mouseout", function(d) {   
       tooltip.transition()    
          .duration(200)    
          .style("opacity", 0); 
        allBars.transition()    
          .duration(1000)    
          .style("opacity", 1)
        bar.transition()    
          .duration(200)    
          .style("opacity", 1); 
      });
   });
});