D3 Examples - US Drought [1895-2013]

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
  body {
    font-family: arial, sans;
    font-size: 11px;
    margin: 10px auto;
    width:1220px;
  }
  
  svg {
/*    border: 1px solid #f0f;*/
  }
​
  .g-feature{
    fill: #dedede;
    stroke-width: 0.3px;
    stroke: #fff;
  }
​
  .g-state{
    fill:none;
    stroke: black;
  }
​
  .g-feature:hover{
    stroke:blue;
  }
​
  .year-name{
    font-size: 20px;
    position: absolute;
    top: 20px;
    left:800px;
  }
​
  .legend{
    position: absolute;
    top: 100px;
    left: 1000px;
    line-height: 170%;
  }
​
  .red{
    width: 10px;
    height: 10px;
    background-color: #b2182b;
    display: inline-block;
    margin-right: 10px;
  }
​
  .orange{
    width: 10px;
    height: 10px;
    background-color: #d6604d;
    display: inline-block;
    margin-right: 10px;
  }
​
  .yellow{
    width: 10px;
    height: 10px;
    background-color: #f4a582;
    display: inline-block;
    margin-right: 10px;
  }
​
  .gray{
    width: 10px;
    height: 10px;
    background-color: #fddbc7;
    display: inline-block;
    margin-right: 10px;
  }
​
  .light-blue{
    width: 10px;
    height: 10px;
    background-color: #92c5de;
    display: inline-block;
    margin-right: 10px;
  }
​
  .blue{
    width: 10px;
    height: 10px;
    background-color: #4393c3;
    display: inline-block;
    margin-right: 10px;
  }
​
  .dark-blue{
    width: 10px;
    height: 10px;
    background-color: #2166ac;
    display: inline-block;
    margin-right: 10px;
  }
​
/*  .g-hovering{
    stroke:red;
  }*/
​
​
</style>
​
<body>
<h1>Mapping United States Drought [1985-2013]</h1>
​
  <div class="year-name">
    Year: 1895
  </div>
​
  <div class="legend">
    <div class ="severe"><div class="red"></div>Severe Drought</div>
    <div class ="regular"><div class="orange"></div>Drought</div>
    <div class ="mild"><div class="yellow"></div>Mild Drought</div>
    <div class ="average"><div class="gray"></div>Average Rainfall</div>
    <div class ="wet"><div class="light-blue"></div>Moderate Rainfall</div>
    <div class ="above-average"><div class="blue"></div>Rainfall</div>
    <div class ="flood"><div class="dark-blue"></div>Heavy Rainfall</div>
  </div>
​
​
</body>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<!-- topojson pull -->
<script src="https://d3js.org/topojson.v1.min.js"></script>
<!-- queue library good for async data loading! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
​
<script type="text/javascript">
​
  var width = 900,
      height = 600;
  
  var svg = d3.select("body").append("svg")
      .attr("width", width )
      .attr("height", height );
​
  //init the D3 path for geography
  //by default is albers equal area projection, but it can take an argument for other projections
  var path = d3.geo.path();
​
  var counter = 1895;
​
  //replaces the d3.json load
  queue()
    .defer(d3.json,"climate-divisions.json")
    // .defer(d3.json,"us.json")
    .defer(d3.tsv,"pdsi.tsv")
    .await(ready);
​
​
  var color = d3.scale.threshold()
                .domain([-4,-3,-1,0,1,3,4])
    //https://bl.ocks.org/mbostock/5577023
    .range(["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"]);
​
  //us.json is of type topojson, must convert it to geojson
  //this data is already projected for us, which is nice...
  // d3.json("us.json",ready);
​
  var droughtInfo ={};
​
  function ready(err, us, drought){
    if(err){console.warn(error);}
​
    //converting topojson to geojson unpacking)
    //getting the counties, not the states or the land outline
    var climateRegionFeatures = topojson.feature(us, us.objects.GIS).features;
    // var stateFeatures = topojson.feature(states, states.objects.states).features;
    
    // drought.forEach(function(d){
    //   for (var i in d) {
    //     if (d.hasOwnProperty(i)) {
    //       d.i =+d.i;
    //     }
    //   }
    // });
​
    drought = d3.nest()
              .key(function(d){return d.id;})
              .entries(drought);
​
    console.log(drought[0].values[0]);
​
    drought.forEach(function(d){
      droughtInfo[d.key] = d.values[0];
    });
​
​
    svg.append("g")
        .attr("class","feature-container")
        .selectAll("path")
        .data(climateRegionFeatures)
        .enter()
        .append("path")
        //pass the data to the path init from avobe
        .attr("class","g-feature")
        .attr("d",path)
        .style("fill",function(d){
          //coloring strategy here is to showcase extent of data - where are all the places these guns came from
          //return (gunsByFips[d.id] >0)?"red":"#dedede";
          // return (gunsByFips[d.id] >0)?color(gunsByFips[d.id]):"#dedede";
          return (parseFloat(droughtInfo[d.properties.CLIMDIV]["1895"]))?
                  color(parseFloat(droughtInfo[d.properties.CLIMDIV]["1895"])):"#dedede";
          // return "#dedede";
        })
        .on("mouseover",function(d){
          console.log(d);
          //d.id === FIPS code, nice feature of geojson
​
          //must bring the shape to the front of the map on hover - there is a overlapping issue with the strokes here
         // d3.select(this).classed("g-hovering",true);
        });
​
​
    setInterval(function(d){
      if(counter === 2013){counter = 1895;}
      
      d3.selectAll(".g-feature").transition().duration(500).style("fill",function(d){
        return (parseFloat(droughtInfo[d.properties.CLIMDIV][counter.toString()]))?
                  color(parseFloat(droughtInfo[d.properties.CLIMDIV][counter.toString()])):"#dedede";
      });
​
      d3.select(".year-name").text("Year: "+counter.toString());
​
      counter ++;
    },1200);
​
    
  }
​
</script>
​
    