Radial Column Chart

radial_column.js

$(document).ready(function() {

  var centerRadial = $("#radial-column");

  var outerWidth = centerRadial.width();
  var outerHeight = centerRadial.width()+500;
  var margin = { left: 0, top: 88, right: 0, bottom: 88 };

  var stateColor = "state";

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

  var svg = d3.select("#radial-column").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight)
    .append("g")
    .attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");

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

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

  //View by index

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

    data.forEach(function(d) {
      d.acres = +d.acres;
      d.summit = +d.summit;
      d.base = +d.base;
      d.state = d.state;
      return d;
    });

    var centerPadding = outerWidth / 4

    var y = d3.scale.ordinal().rangeRoundBands([0, 0], .7  );
  
    var sortFunction = function(a, b) { return d3.descending(b.state, a.state)|| d3.descending(b.resort_name, a.resort_name); };
    data.sort(sortFunction).map(function(d) { return d.resort_name; });

    colorScale.domain(data.map(function (d){ return d[stateColor]; }));

    svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", 0)
      .attr("height", function(d){ return d.acres/12; })
      .attr("y", centerPadding)
      .attr("width", 2)
      .attr("fill", function (d){ return colorScale(d[stateColor]); })
      .attr("transform", function(d,i) { return "rotate(" + ((i)-225) + ")"; })
      .on("mouseover", function(d) {
        bar = d3.select(this)
        allBars = d3.selectAll("rect")
       tooltip.transition()    
          .duration(100)    
          .style("opacity", 1)
        allBars.transition()    
          .duration(100)    
          .style("opacity", .3)
        bar.transition()    
          .duration(100)    
          .style("opacity", 1);   
        tooltip.html(d.resort_name + "<br/>"  + addCommas(d.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); 
      });


  svg.selectAll(".text")
      .data(data)
      .enter().append("text")
       .attr("class", "radial-center")
      .attr("x", centerPadding-2)
      .attr("y", 0)
      .style("opacity", 0.4)
      .style("text-anchor", function(d,i) { return i ? "end" : null; })
      .attr("transform", function(d,i) { return "rotate(" + (((i)-135)) + ")"; })
      .text(function(d){
           return (d.resort_name).substring(0, d.resort_name.length - 4);
      });
   });
});