Radial Lollipop Chart

radial_lollipop.js

$(document).ready(function() {

  var centerRadial = $("#radial-bubble");
  var outerWidth = centerRadial.width();
  var outerHeight = centerRadial.width()+200;
  var margin = { left: 0, top: 0, right: 0, bottom: 0 };

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

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

  var stateColor = "state";
  var colorScale = d3.scale.category20c ();

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

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

    data.forEach(function(d) {
      d.acres = +d.acres;
      d.vertical = +d.vertical;
      return d;
    });

    var centerPadding = outerWidth / 4

    var radialPlacement = function(d, i) { return "rotate(" + (i-180) + ")"; }
    var radialText = function(d,i) { return "rotate(" + (i-90) + ")"; }

    var stateSort = function(a, b) { return d3.descending(b.state, a.state)|| d3.descending(b.resort_name, a.resort_name); };
    var acresSort = function(a, b) { return d3.descending(a.acres, b.acres); };
    var verticalSort = function(a, b) { return d3.descending(a.vertical, b.vertical); };

    data.sort(stateSort ).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("height", function(d){ return (d.vertical/15); })
      .attr("y",centerPadding)
      .attr("width", 1)
      .style("opacity", 0.6)
      .attr("fill", function (d){ return colorScale(d[stateColor]); })
      .attr("transform", radialPlacement);

    svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) { return Math.sqrt(d.acres)/5; })
      .attr("cy", function(d){ return (d.vertical/15) + centerPadding; })
      .attr("fill", function (d){ return colorScale(d[stateColor]); })
      .style("opacity", .6)
      .style("stroke-opacity", .3) 
      .attr("transform", radialPlacement)
      .on("mouseover", function(d) {
        circle = d3.select(this)
        tooltip.transition()    
          .duration(20)    
          .style("opacity", 1)
        circle.transition()    
          .duration(100)    
          .style("opacity", 1)
          .style("stroke-opacity", 1)   
        tooltip.html(d.resort_name + "<br/>"  + addCommas(d.acres) + " ac /   " + addCommas(d.vertical) + " ft")  
          .style("left", (d3.event.pageX) + "px")   
          .style("top", (d3.event.pageY-28) + "px");  
      })          
      .on("mouseout", function(d) {   
        tooltip.transition()    
          .duration(500)    
          .style("opacity", 0) 
        circle.transition()    
          .duration(200)    
          .style("opacity", .6)
          .style("stroke-opacity", .3) 
      });

    svg.selectAll(".radial-center")
      .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", radialText)
      .text(function(d){
           return (d.resort_name).substring(0, d.resort_name.length - 4);
      });


    d3.selectAll("#bubble-state")
      .on("click", function () {

        var transition = svg.transition().duration(750),
            delay = function(d, i) { return i * 5 ; };

        svg.selectAll(".dot")
          .sort(stateSort);

        svg.selectAll(".bar")
           .sort(stateSort);

        svg.selectAll(".radial-center")
          .sort(stateSort);

        transition.selectAll(".radial-center")
          .delay(delay)
          .attr("transform", radialText);

        transition.selectAll(".dot")
          .delay(delay)
          .attr("transform", radialPlacement);

        transition.selectAll(".bar")
          .delay(delay)
          .attr("transform", radialPlacement);

      });



     d3.selectAll("#bubble-acres")
      .on("click", function () {

        var transition = svg.transition().duration(750),
            delay = function(d, i) { return i * 5 ; };

        svg.selectAll(".dot")
          .sort(acresSort);

        svg.selectAll(".bar")
           .sort(acresSort);

        svg.selectAll(".radial-center")
          .sort(acresSort);

        transition.selectAll(".radial-center")
          .delay(delay)
          .attr("transform", radialText);

        transition.selectAll(".dot")
          .delay(delay)
          .attr("transform", radialPlacement);

        transition.selectAll(".bar")
          .delay(delay)
          .attr("transform", radialPlacement);

      });


      d3.selectAll("#bubble-vertical")
      .on("click", function () {

        var transition = svg.transition().duration(750),
            delay = function(d, i) { return i * 5 ; };

        svg.selectAll(".dot")
          .sort(verticalSort);

        svg.selectAll(".bar")
           .sort(verticalSort);

        svg.selectAll(".radial-center")
          .sort(verticalSort);

        transition.selectAll(".radial-center")
          .delay(delay)
          .attr("transform", radialText);

        transition.selectAll(".dot")
          .delay(delay)
          .attr("transform", radialPlacement);

        transition.selectAll(".bar")
          .delay(delay)
          .attr("transform", radialPlacement);

      });

   });

});