U.S. Drought: quick look 4/7/15

Working on a Drought Quick Look. This color gradient is real tacky. I'm just going to color the nodes. Also wanting a nice toolip...coming soon, then that animated Drought Map.

<!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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js