easadler · February 16, 2017 23:28
diff --git a/.block b/.block
 license: gpl-3.0
 height: 600
 border: no
diff --git a/README.md b/README.md
diff --git a/all_words_by_state.csv b/all_words_by_state.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .counties {
  fill: none;
 }

 .states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
 }

 div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
 }

 </style>
 <svg width="800" height="600"></svg>
 <div class="tooltip"></div>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
 <script src="https://d3js.org/topojson.v2.min.js"></script>
 <script>

 var stateID = { 1: "AL", 2: "AK", 4: "AZ", 5: "AR", 6: "CA", 8: "CO",
 9: "CT", 10: "DE", 11: "DC", 12: "FL", 13: "GA", 15: "HI",
 16: "ID", 17: "IL", 18: "IN", 19: "IA", 20: "KS", 21: "KY",
 22: "LA", 23: "ME", 24: "MD", 25: "MA", 26: "MI", 27: "MN" ,
 28: "MS" , 29: "MO", 30: "MT", 31: "NE" , 32: "NV" , 33: "NH" ,
 34: "NJ" , 35: "NM" , 36: "NY" , 37: "NC" , 38: "ND" , 39: "OH" ,
 40: "OK" , 41: "OR" , 42: "PA" , 44: "RI" , 45: "SC" , 46: "SD" ,
 47: "TN" , 48: "TX" , 49: "UT" , 50: "VT" , 51: "VA" , 53: "WA" ,
 54: "WV" , 55: "WI" , 56: "WY" } 
  
 var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

 var words = d3.map();

 // Define the div for the tooltip
 var div = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);
  
 var x = d3.scaleLinear()
    .domain([1, 10])
    .rangeRound([600, 860]);

 var color = d3.scaleThreshold()
    .domain([0,1])
    .range(d3.schemeBlues[9]);

 var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

 g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

 g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Unemployment rate");

 g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x + "%"; })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();

 d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "all_words_by_state.csv", function(d) { words.set(d.state_code, d); })
    .await(ready);

 function ready(error, us) {
  if (error) throw error;

  var path = d3.geoPath(d3.geoIdentity().fitSize([width, height], topojson.feature(us, us.objects.states)));

  svg.append("g")
      .attr("class", "state")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(Math.random()) })
      .attr("d", path)
    		.on("mouseover", function(d){
    			var w = words['$' + stateID[d.id]]
          
          div.transition()		
                .duration(200)		
                .style("opacity", .9);		
            div	.html(w['word_2'] + "<br/>" +  w["word_3"])
                .style("left", (d3.event.pageX) + "px")		
                .style("top", (d3.event.pageY - 28) + "px");				
          
  		});


  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path)
  
  
  
 	svg.append("g").attr("class", "state-label").selectAll("text")
    .data(topojson.feature(us, us.objects.states).features)
    .enter()
    .append("text")
    .attr("fill", "black")
    .attr("transform", function(d) { 
        var centroid = path.centroid(d);
        return "translate(" + centroid[0] + "," + centroid[1] + ")"
    })
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function(d) {
          return words['$' +  stateID[+d.id]].word_1;
    }); 
  

  
  
 }
  


 </script>
diff --git a/unemployment.tsv b/unemployment.tsv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.counties {
	fill: none;
	}

	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	</style>
	<svg width="800" height="600"></svg>
	<div class="tooltip"></div>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	var stateID = { 1: "AL", 2: "AK", 4: "AZ", 5: "AR", 6: "CA", 8: "CO",
	9: "CT", 10: "DE", 11: "DC", 12: "FL", 13: "GA", 15: "HI",
	16: "ID", 17: "IL", 18: "IN", 19: "IA", 20: "KS", 21: "KY",
	22: "LA", 23: "ME", 24: "MD", 25: "MA", 26: "MI", 27: "MN" ,
	28: "MS" , 29: "MO", 30: "MT", 31: "NE" , 32: "NV" , 33: "NH" ,
	34: "NJ" , 35: "NM" , 36: "NY" , 37: "NC" , 38: "ND" , 39: "OH" ,
	40: "OK" , 41: "OR" , 42: "PA" , 44: "RI" , 45: "SC" , 46: "SD" ,
	47: "TN" , 48: "TX" , 49: "UT" , 50: "VT" , 51: "VA" , 53: "WA" ,
	54: "WV" , 55: "WI" , 56: "WY" }

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var words = d3.map();

	// Define the div for the tooltip
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var x = d3.scaleLinear()
	.domain([1, 10])
	.rangeRound([600, 860]);

	var color = d3.scaleThreshold()
	.domain([0,1])
	.range(d3.schemeBlues[9]);

	var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(0,40)");

	g.selectAll("rect")
	.data(color.range().map(function(d) {
	d = color.invertExtent(d);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().append("rect")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return color(d[0]); });

	g.append("text")
	.attr("class", "caption")
	.attr("x", x.range()[0])
	.attr("y", -6)
	.attr("fill", "#000")
	.attr("text-anchor", "start")
	.attr("font-weight", "bold")
	.text("Unemployment rate");

	g.call(d3.axisBottom(x)
	.tickSize(13)
	.tickFormat(function(x, i) { return i ? x : x + "%"; })
	.tickValues(color.domain()))
	.select(".domain")
	.remove();

	d3.queue()
	.defer(d3.json, "https://d3js.org/us-10m.v1.json")
	.defer(d3.csv, "all_words_by_state.csv", function(d) { words.set(d.state_code, d); })
	.await(ready);

	function ready(error, us) {
	if (error) throw error;

	var path = d3.geoPath(d3.geoIdentity().fitSize([width, height], topojson.feature(us, us.objects.states)));

	svg.append("g")
	.attr("class", "state")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("fill", function(d) { return color(Math.random()) })
	.attr("d", path)
	.on("mouseover", function(d){
	var w = words['$' + stateID[d.id]]

	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html(w['word_2'] + "<br/>" + w["word_3"])
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");

	});


	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path)



	svg.append("g").attr("class", "state-label").selectAll("text")
	.data(topojson.feature(us, us.objects.states).features)
	.enter()
	.append("text")
	.attr("fill", "black")
	.attr("transform", function(d) {
	var centroid = path.centroid(d);
	return "translate(" + centroid[0] + "," + centroid[1] + ")"
	})
	.attr("text-anchor", "middle")
	.attr("dy", ".35em")
	.text(function(d) {
	return words['$' + stateID[+d.id]].word_1;
	});




	}



	</script>