landline map

gistfile1.txt

propublica.views.FrackMap = propublica.View.extend({
  id : "frack",

  render : function() {


var frackdata = {
  "LA":[14986, 37499, 400594, 1242678, 2088306, 2130551, "Louisiana"],
  "NM":[54020, 57462, 60590, 71867, 93071, 127548 , "New Mexico"],
  "OK":[83015, 204474, 327805, 406143, 449167, 503329, "Oklahoma"],
  "TX":[1264725, 1769610, 2018450, 2302950, 3066435, 3662933, "Texas"],
  "WY":[3897, 4776, 4055, 5519, 4755, 9252, "Wyoming"],
  "AL":[0, 0, 0, 0, 0, 0, "Alabama"],
  "AZ":[0, 0, 0, 0, 0, 0, "Arizona"],
  "AR":[84049, 265729, 510554, 769679, 935237, 1021484, "Arkansas"],
  "CA":[129488, 119215, 102027, 95505, 94349, 55344, "California"],
  "CO":[138335, 164334, 180310, 195131, 211488, 228796, "Colorado"],
  "FL":[0, 0, 0, 0, 0, 0, "Florida"],
  "IL":[0, 0, 0, 0, 0, 0, "Illinois"],
  "IN":[0, 0, 0, 0, 0, 0, "Indiana"],
  "KS":[0, 0, 0, 0, 0, 0, "Kansas"],
  "KY":[0, 0, 0, 0, 0, 0, "Kentucky"],
  "MD":[0, 0, 0, 0, 0, 0, "Maryland"],
  "MI":[136367, 131119, 125614, 119984, 113736, 107822, "Michigan"],
  "MS":[0, 0, 0, 0, 0, 0, "Mississippi"],
  "MO":[0, 0, 0, 0, 0, 0, "Missouri"],
  "MT":[14587, 14509, 13957, 12937, 13101, 15619, "Montana"],
  "NE":[0, 0, 0, 0, 0, 0, "Nebraska"],
  "NV":[0, 0, 0, 0, 0, 0, "Nevada"],
  "NY":[0, 0, 0, 0, 0, 0, "New York"],
  "ND":[7046, 18554, 35450, 65060, 114998, 218873, "North Dakota"],
  "OH":[14, 17, 13, 11, 2540, 12773, "Ohio"],
  "OR":[0, 0, 0, 0, 0, 0, "Oregon"],
  "PA":[1, 9757, 89074, 399452, 1068288, 2042632, "Pennsylvania"],
  "SD":[0, 0, 0, 0, 0, 0, "South Dakota"],
  "TN":[0, 0, 0, 0, 0, 0, "Tennessee"],
  "UT":[0, 0, 0, 0, 0, 1333, "Utah"],
  "VA":[19100, 19468, 18284, 16433, 18501, 17212, "Virginia"],
  "WV":[40515, 53436, 71540, 113773, 227012, 141071, "West Virginia"]
};


var calcChange = function(data, index) {
  if (data != undefined) {
    if (index > 0) {
        var prevYear = data[index-1]
        var newYear = data[index]
        if (newYear == 0 && prevYear == 0) {
          var change = 0;
        } else {
          var change = (newYear - prevYear)/prevYear;
        }
        var percentChange = change * 100;
        return percentChange
      } else {

        return 0
      }
  } else {
    return 999999999
  }

};

var calcDiff = function(data, index) {
    if (data != undefined) {
      return data
    } else {
      return 999999999
    }

};

var colorDiff = function(num){

  if (num == 999999999) {
    num = '#e7e7e7'
  } else if (num > 0 && num <1000){
    num = "#efeecc"
  } else if (num > 1000 && num <2000){
    num = "#ddd29d"
  } else if (num > 2000 && num <30000){
    num = "#c79f5b"
  } else if (num > 30000 && num <400000){
    num = "#c07123"
  } else {
    num = '#e7e7e7'
  }
  return num

};


var colorit = function(num){
  if (num == 999999999) {
    num = '#e7e7e7'
  } else if (num < 0){
    num = "#60a69f"
  } else if (num > 0 && num < 150){
    num = '#fcae91'
  } else if (num > 149 && num < 300){
    num = '#fb6a4a'
  } else if (num > 299){
    num = '#a50f15'
  } else {
    num = '#fee5d9'
  }
  return num
};




var drawMap = function(index, suffix){


  var bar = $(".bar");
  var totals = $(".bar-totals");
  var barCont = $(".bar-container")
  barCont.hover(function(){
    $(this).find(bar).addClass("active");
    $(this).find(totals).addClass("active");

  },
  function(){
    $(this).find(totals).removeClass("active");
    $(this).find(bar).removeClass("active");
  });

  $("#states" + suffix).html("");
  var paper = Raphael("states"+ suffix, 140, 105);
  propublica.map().continental().asSVG(140, 105, function(svg, it){
    var checkedData = frackdata[it.key];
    var idx = index-1;
    var newData = calcDiff(checkedData, idx)

    var path = paper.path(svg).attr('fill', colorDiff(newData[idx]) || "#f1f1f1").attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');

    $(".bar" + "." + it.key).hover(function(){
      path.attr({"fill": "#444"});
    },
    function(){
      path.attr({"fill": colorDiff(newData)});
    });

    path.hover(function(){
      var currentId = it.key;
      $("." + currentId).addClass("active");
      path.attr({"fill": "#444"}); // adds hover color
    },
    function(){
      path.attr({"fill": colorDiff(newData)}); //sets colors by matching state abbrev to colors
      bar.removeClass("active");
      totals.removeClass("active");
    });
    path.click(function(){

    });

  });



  $("#alaska" + suffix).html("");
  var alaska = Raphael("alaska"+ suffix, 40, 40);
  propublica.map().alaska().asSVG(40, 40, function(svg, it){
    var checkedData = (frackdata[it.key]);
    var idx = index-1;
    var newData = calcChange(checkedData, idx)
   var alaskaPath = alaska.path(svg).attr('fill', colorit(newData)).attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');

    $(".bar" + "." + it.key).hover(function(){
      alaskaPath.attr({"fill": "#444"});
    },
    function(){
      alaskaPath.attr({"fill": colorit(newData)});
    });

    alaskaPath.hover(function(){
      var currentId = it.key;
      $("." + currentId).addClass("active");
      alaskaPath.attr({"fill": "#444"});
    },
    function(){
      alaskaPath.attr({"fill": colorit(newData)});
      bar.removeClass("active");
      totals.removeClass("active");
    });

    alaskaPath.click(function(){

    });

  });

  $("#hawaii" + suffix).html("");
  var hawaii = Raphael("hawaii"+ suffix, 92, 92);
  propublica.map().hawaii().asSVG(92, 92, function(svg, it){
    var checkedData = (frackdata[it.key]);
    var idx = index-1;
    var newData = calcChange(checkedData, idx)
   var hawaiiPath = hawaii.path(svg).attr('fill', colorit(newData)).attr('stroke-width', 0.5).attr('stroke', '#fff').attr('stroke-linejoin', 'bevel');

    $(".bar" + "." + it.key).hover(function(){
      hawaiiPath.attr({"fill": "#444"});
    },
    function(){
      hawaiiPath.attr({"fill": colorit(newData)});
    });

   hawaiiPath.hover(function(){
     hawaiiPath.attr({"fill": "#444"});
     var currentId = it.key;
     $("." + currentId).addClass("active");
   },
   function(){
     hawaiiPath.attr({"fill": colorit(newData)});
     bar.removeClass("active");
     totals.removeClass("active");
   });
   hawaiiPath.click(function(){

   });

  });
};


$(function(){
  var map = $(".single-map");
  var switchy = $(".switchy");
  drawMap(2, "-two");
  drawMap(3, "-three");
  drawMap(4, "-four");
  drawMap(5, "-five");
  drawMap(6, "-six");
  $(".1").addClass("show");
  $("#sidebar li.total").addClass("active"); //sets background color of active tab (default view)

  $("#sidebar li").click(function(e) {
    $("#sidebar li").removeClass("active"); //removes background color of all tabs
    $(e.currentTarget).addClass("active");  //sets background color of active tab
  });
  map.hover(function(){
      switchy.removeClass("show");
      var current = $(this).attr("data");
      $("." + current).addClass("show");
   },
   function(){
   });


});

  }
});