D3 Examples - U.S. Drought: quick look 4/7/15

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
text {
  font: 30px sans-serif;
}
​
.abbv {
  font: 13px sans-serif;
}
​
.node {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: #252525;
  stroke-width: 2px;
}
​
.node:hover {
  stroke: #ffff33;
  position: relative;
}
​
div[data-title]:hover::after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #ffff33;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  /*-moz-border-radius: 5px;
  -webkit-border-radius: 5px;*/
  border-radius: 5px;
  /*-moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;*/
  box-shadow: 0px 0px 4px #222;
  /*background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  */
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
​
var width = 960,
    height = 620,
    padding = 30,
    format = d3.format(".2%");
​
// background color scale 
var color = d3.scale.linear()
  .domain([0, width])
  .range(["#1c9099", "#d95f0e"]);
​
var svg = d3.select("body").append("svg")
  .attr("height", height)
  .attr("width", width)
  .style("position", "relative")
​
// set background color from wet to dry 
svg.selectAll("rect")
    .data(d3.range(width))
  .enter()
    .append("rect")
    .attr("class", "background")
    .attr("x", function(d) { return d; })
    .attr("y", 0)
    .attr("width", 1)
    .attr("height", height)
    .attr("fill", function(d) { return color(d); });
​
svg.append("text")
  .attr("x", width / 8) 
  .attr("y", height / 2)
  .attr("fill", "#016c59")
  .text("WET")
​
svg.append("text")
  .attr("x", width * (4/5)) 
  .attr("y", height / 2)
  .attr("fill", "#bd0026")
  .text("DRY")
​
// node scales
var r = d3.scale.linear()
  .range([12, 20]);
​
var x = d3.scale.linear()
  .range([padding, width-padding]);
​
var y = d3.scale.linear()
  .range([height-padding, padding]);
​
// create nodes, size according to acres of farmland
// position nodes according to dryness
d3.csv("state_farm_acreage.csv", form_state_data, function(states) {
  states.sort(function(a, b) {
    if (a.acreage > b.acreage) {
      return 1;
    }
    if (a.acreage < b.acreage) {
      return -1;
    }
    if (a.acreage == b.acreage) {
      return 0;
    }
  });
  
  r.domain([0, d3.max(states, function(d){ return d.acreage; })])
  
  d3.csv("drought_info_categorical_4_7_15.csv", form_drought_data, function (drought) {
    x.domain([0, d3.max(drought, function(d){ return ((d.D4 * .5) + (d.D3 * .4) + (d.D2 * .3) + (d.D1 * .2) + (d.D0 * .1)); })])
    y.domain([0, states.length - 1])
    //console.log(drought)
    
    d3.csv("state_abbrev.csv", function(abbrev) {
    
      var nodes = svg.selectAll(".node")
        .data(states);
    
      // draw state abbrev first
      nodes.enter()
        .append("text")
        .attr("class", "abbv")
        .attr("x", function(d) { 
          var v;
          drought.forEach(function(f) {
            if (f.state == d.state) {
              v = ((f.D4 * .5) + (f.D3 * .4) + (f.D2 * .3) + (f.D1 * .2) + (f.D0 * .1)); 
            }
          })
          return x(v);
        })
        .attr("y", function(d, i){ return y(i); })
        .attr("text-anchor", "middle")
        .attr("dy", ".4em")
        .text(function(d){
          var v;
          abbrev.forEach(function(a) {
            if (a.state == d.state) {
              v = a.abbrev;
            }
          })
          return v;
        })
    
      // overlay nodes with listener + hover title
      nodes.enter()
        .append("circle")
        .attr("class", "node")
        .attr("cx", function(d){ 
          var v;
          drought.forEach(function(f) {
            if (f.state == d.state) {
              v = ((f.D4 * .5) + (f.D3 * .4) + (f.D2 * .3) + (f.D1 * .2) + (f.D0 * .1)); 
            }
          })
          return x(v);
        })
        .attr("cy", function(d, i){ return y(i); })
        .attr("r", function(d){ return r(d.acreage); })
        /*.append("title")
          .text(function(d){
            var v;
            drought.forEach(function(f) {
              if (f.state == d.state) {
                v = f;
              }
            })
            // display each val D0, D1, D2, D3, D4...
            console.log(v)
            var ans = "";
            if (v.D0 > 0) {
              //ans += v.D0 
            }
            if (v.D1 > 0) {
            }
            if (v.D2 > 0) {
            }
            if (v.D3 > 0) {
            }
            if (v.D4 > 0) {
            }
           
            return d.state + "D0" + "%";
          })*/
        
    });
  });
});
​
function form_state_data(d) {
  d.acreage = +d.acreage;
  d.acreage_per_farm = +d.acreage_per_farm;
  d.farms = +d.farms;
  return d;
}
​
function form_drought_data(d) {
  d.D0 = +d.D0;
  d.D1 = +d.D1;
  d.D2 = +d.D2;
  d.D3 = +d.D3;
  d.D4 = +d.D4;
  d.none = +d.none;
  return d;
}
</script>
    