3D Triangles

thee_d_triangles.js

$(document).ready(function() {

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

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

  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.resort_name = d.resort_name;
      d.acres = +d.acres;
      d.vertical = +d.vertical
      d.summit = +d.summit
      d.base = +d.base
      d.blue_acres = +d.blue_acres
      d.green_acres = +d.green_acres
      d.black_acres = +d.black_acres
    });

  // setup fill color
    var cValue = function(d) { return d.state;},
      color = d3.scale.category20();
  
    //Creates blue triangle
    svg.selectAll(".blue")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "blue")
      .attr('d', function(d, i) { 
      var x = (d.blue_acres)/5, //x coordinates
          y = (d.summit)/18, //y coordinates
          baseWidth = (d.blue_acres)/20,
          topAngle = -(d.blue_acres/20)/2,
          triHeight = -(d.vertical/30),
          l;
        return "M " + x +" "+ y + " l "+baseWidth+" 0 l "+topAngle+" "+triHeight+" z";})
        .style("fill","steelblue")
        .attr("opacity", .7)

    //Creates green triangle
    svg.selectAll(".green")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "green")
      .attr('d', function(d, i) { 
      var x = ((d.blue_acres)/5)-(d.green_acres/20), //x coordinates
          y = ((d.summit)/18),  //y coordinates
          baseWidth = (d.green_acres)/20,
          topAngle = d.blue_acres/40,
          triHeight = -(d.vertical/30),
          l;
        return "M " + x +" "+ y + " l "+baseWidth+" 0 l "+topAngle+" "+triHeight+" z";})
        .style("fill", "green")
        .attr("opacity", .7);

    //Creates black triangle
    svg.selectAll(".black")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "black")
      .attr('d', function(d, i) { 
      var x = (d.blue_acres/5) + (d.blue_acres)/20, //x coordinates
          y = ((d.summit)/18),  //y coordinates
          baseWidth = (d.black_acres)/20,
          topAngle = (-d.black_acres/20) - (d.blue_acres/40),
          triHeight = -(d.vertical/30)+20,
          l;
        return "M " + x +" "+ y + " l "+baseWidth+" -20 l "+topAngle+" "+triHeight+" z";})
        .style("fill", "black")
        .attr("opacity", .7);
  });  
});