Triangles

triangles.js

$(document).ready(function() {

  ////Width and height
  var margin = {top: 20, right: 20, bottom: 160, left: 40},
      width = $("#flat-triangles").width() - margin.left - margin.right,
      height = 1000 - margin.top - margin.bottom;

  //Create SVG element
  var svg = d3.select("#flat-triangles")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
        
  var acreageThreshold = 0; //not greater than 5000

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

    //Filter Data base on acreage size (acreageThreshold)
    data = jQuery.grep(data, function(d, index) {
      var is_viewable = d.acres >= acreageThreshold;
      return is_viewable;
    });
    
    //Convert strings to numbers
    data.forEach(function(d) {
      d.resort_name = d.resort_name;
      d.acres = +d.acres;
      d.vertical = +d.vertical
      d.summit = +d.summit
      d.base = +d.base
    });

    //Setup fill color
    var cValue = function(d) { return d.state;},
      color = d3.scale.category20();
  
    //Draw Triangles
    svg.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr('d', function(d, i) { 
      var x = (d.acres)/11, 
          y = 400, 
          p = (d.acres)/20,
          f = (((d.summit * 10)-((d.acres/20)+(d.summit*10)))/2),
          j = -(d.vertical/30),
          l;
        return "M " + x +" "+ y + " l "+p+" 0 l "+f+" "+j+" z";})
        .style("fill", function(d) { return color(cValue(d));})
        .attr("opacity", .7)
        .attr("class", "ball")
        .attr("stroke", "black")
        .attr("stroke-width", .3)
        .on("mouseover", function(){d3.select(this).style("stroke-width", 2);})
        .on("mouseout", function(){d3.select(this).style("stroke-width", .3);})
        .on("click", function(){d3.select(this).style("fill", "orange");});
       
    //On button click arrange triangles flat Y axis
    d3.selectAll("#tri-acres")
      .on("click", function () {
        svg.selectAll(".ball")
          .transition()            
          .delay(0)            
          .duration(2000)
          .attr('d', function(d, i) { 
            var x = (d.acres)/11, 
                y = 400, 
                p = (d.acres)/20,
                f = (((d.summit * 10)-((d.acres/20)+(d.summit*10)))/2),
                j = -(d.vertical/30),
                l;
                return "M " + x +" "+ y + " l "+p+" 0 l "+f+" "+j+" z"
          ;})
    });  

    //On button click arrange triangles flat Y axis
    d3.selectAll("#tri-vertical")
      .on("click", function () {
        svg.selectAll(".ball")
          .transition()            
          .delay(0)            
          .duration(2000)
          .attr('d', function(d, i) { 
            var x = (d.vertical)/6, 
                y = 400, 
                p = (d.acres)/20,
                f = (((d.summit * 10)-((d.acres/20)+(d.summit*10)))/2),
                j = -(d.vertical/30),
                l;
                return "M " + x +" "+ y + " l "+p+" 0 l "+f+" "+j+" z"
          ;})
    }); 

    //On button click arrange triangles by summit height
    d3.selectAll("#tri-summit")
      .on("click", function () {
        svg.selectAll(".ball")
          .transition()            
          .delay(0)            
          .duration(2000)
          .attr('d', function(d, i) { 
            var x = (d.acres)/11, 
                y = (d.summit)/16, 
                p = (d.acres)/20,
                f = (((d.summit * 10)-((d.acres/20)+(d.summit*10)))/2),
                j = -(d.vertical/30),
                l;
                return "M " + x +" "+ y + " l "+p+" 0 l "+f+" "+j+" z"
          ;})
    });  
  });  
});