asuozzo/dairyproduction2014.csv

## dairyproduction2014.csv

          
            State
            milPounds

            
              California
              42337

            
              Wisconsin
              27795

            
              Idaho
              13873

            
              New York
              13733

            
              Pennsylvania
              10683

            
              Texas
              10310

            
              Michigan
              9609

            
              Minnesota
              9127

            
              New Mexico
              8105

            
              Washington
              6584

            
              Ohio
              5425

            
              Arizona
              4699

            
              Iowa
              4646

            
              Indiana
              3892

            
              Colorado
              3593

            
              Kansas
              3111

            
              Vermont
              2666

            
              Oregon
              2555

            
              Florida
              2507

            
              Utah
              2182

            
              South Dakota
              2109

            
              Illinois
              1850

            
              Virginia
              1780

            
              Georgia
              1684

            
              Missouri
              1383

            
              Nebraska
              1195

            
              Kentucky
              1002

            
              Maryland
              987

            
              North Carolina
              961

            
              Tennessee
              750

            
              Oklahoma
              697

            
              Nevada
              690

            
              Maine
              600

            
              Connecticut
              383

            
              North Dakota
              324

            
              Montana
              301

            
              New Hampshire
              282

            
              South Carolina
              262

            
              Massachusetts
              233

            
              Louisiana
              204

            
              Mississippi
              188

            
              West Virginia
              140

            
              Wyoming
              130

            
              New Jersey
              127

            
              Alabama
              109

            
              Delaware
              97

            
              Arkansas
              96

            
              Hawaii
              30

            
              Rhode Island
              17

            
              Alaska
              4

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>U.S. Dairy Production, 2014</title>
<style>
body {
    margin: 0;
    background-color: rgb(206, 240, 241);
    font-family: serif;
    }

h1 {
  margin-top:0px;
  margin-bottom:5px;
}

    #container {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  padding: 50px;
  background-color: rgb(255, 255, 255);
  box-shadow: 3px 3px 5px 5px rgb(206, 240, 241);
}
.states:hover {
  color:rgb(255, 255, 255);
  opacity: .75;
}

div.tooltip {
  visibility:hidden;
  color: #222;
  background: #fff;
  padding: .5em;
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 2px;
  box-shadow: 0px 0px 2px 0px #a6a6a6;
  opacity: 0.9;
  position: absolute;

}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="container">
  <h1>Dairy Production in the United States of America, 2014</h1>
  <p>Source: <a href="http://www.ers.usda.gov/">USDA Economic Research Service</a></p>
  <div id="map"></div>
  <div class="tooltip">
    <div id="value">Value</div>
  </div>
</div>

<script>

var w = 900,
  h = 500;

var projection = d3.geo.albersUsa()
    .scale(900);

var path = d3.geo.path()
      .projection(projection)

var color = d3.scale.quantize()
        .range([
          "#f0f9e8",
          "#ccebc5",
          "#a8ddb5",
          "#7bccc4",
          "#43a2ca",
          "#0868ac"
        ]);

var svg = d3.select("#map")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

var tooltip = d3.select("div.tooltip");

d3.csv("dairyproduction2014.csv", function(data){
  color.domain([
    d3.min(data, function(d) {return +d.milPounds}),
    d3.max(data, function(d) {return +d.milPounds})
  ]);

  d3.json("states.json", function(json) {
    for (var i=0; i<data.length; i++){
      var dataStateName = data[i].State;
      var dataValue = +data[i].milPounds;


      for (var j = 0; j < json.features.length; j++) {
        var jsonStateName = json.features[j].properties.name;

        if(dataStateName == jsonStateName){
          json.features[j].properties.milPounds = dataValue;

          break;
        }
      }


    }


    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill", "#7fcdbb")
      .style("stroke", "gray")
      .style("stroke-width", .25)
      .attr("class", "states")
      .transition()
      .duration(2000)
      .style("fill", function(d){
        var value = d.properties.milPounds;

        if (value) {
          return color(value);
        } else {
          return "#ccc";
        }
      });

    svg.selectAll("path")
      .data(json.features)
      .on("mouseover", function(){
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function(d){
        return tooltip
          .style("top", (d3.event.pageY -16) + "px")
          .style("left", (d3.event.pageX) + "px")
          .select("#value")
          .text(d.properties.name + ": " + d.properties.milPounds + " million pounds");
      })
      .on("mouseout", function(){
        return tooltip.style("visibility", "hidden");
      })


  });

});

</script>

## states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              states.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	State	milPounds
	California	42337
	Wisconsin	27795
	Idaho	13873
	New York	13733
	Pennsylvania	10683
	Texas	10310
	Michigan	9609
	Minnesota	9127
	New Mexico	8105
	Washington	6584
	Ohio	5425
	Arizona	4699
	Iowa	4646
	Indiana	3892
	Colorado	3593
	Kansas	3111
	Vermont	2666
	Oregon	2555
	Florida	2507
	Utah	2182
	South Dakota	2109
	Illinois	1850
	Virginia	1780
	Georgia	1684
	Missouri	1383
	Nebraska	1195
	Kentucky	1002
	Maryland	987
	North Carolina	961
	Tennessee	750
	Oklahoma	697
	Nevada	690
	Maine	600
	Connecticut	383
	North Dakota	324
	Montana	301
	New Hampshire	282
	South Carolina	262
	Massachusetts	233
	Louisiana	204
	Mississippi	188
	West Virginia	140
	Wyoming	130
	New Jersey	127
	Alabama	109
	Delaware	97
	Arkansas	96
	Hawaii	30
	Rhode Island	17
	Alaska	4
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>U.S. Dairy Production, 2014</title>
	<style>
	body {
	margin: 0;
	background-color: rgb(206, 240, 241);
	font-family: serif;
	}

	h1 {
	margin-top:0px;
	margin-bottom:5px;
	}

	#container {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: rgb(255, 255, 255);
	box-shadow: 3px 3px 5px 5px rgb(206, 240, 241);
	}
	.states:hover {
	color:rgb(255, 255, 255);
	opacity: .75;
	}

	div.tooltip {
	visibility:hidden;
	color: #222;
	background: #fff;
	padding: .5em;
	text-shadow: #f5f5f5 0 1px 0;
	border-radius: 2px;
	box-shadow: 0px 0px 2px 0px #a6a6a6;
	opacity: 0.9;
	position: absolute;

	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<div id="container">
	<h1>Dairy Production in the United States of America, 2014</h1>
	<p>Source: <a href="http://www.ers.usda.gov/">USDA Economic Research Service</a></p>
	<div id="map"></div>
	<div class="tooltip">
	<div id="value">Value</div>
	</div>
	</div>

	<script>

	var w = 900,
	h = 500;

	var projection = d3.geo.albersUsa()
	.scale(900);

	var path = d3.geo.path()
	.projection(projection)

	var color = d3.scale.quantize()
	.range([
	"#f0f9e8",
	"#ccebc5",
	"#a8ddb5",
	"#7bccc4",
	"#43a2ca",
	"#0868ac"
	]);

	var svg = d3.select("#map")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var tooltip = d3.select("div.tooltip");

	d3.csv("dairyproduction2014.csv", function(data){
	color.domain([
	d3.min(data, function(d) {return +d.milPounds}),
	d3.max(data, function(d) {return +d.milPounds})
	]);

	d3.json("states.json", function(json) {
	for (var i=0; i<data.length; i++){
	var dataStateName = data[i].State;
	var dataValue = +data[i].milPounds;


	for (var j = 0; j < json.features.length; j++) {
	var jsonStateName = json.features[j].properties.name;

	if(dataStateName == jsonStateName){
	json.features[j].properties.milPounds = dataValue;

	break;
	}
	}


	}


	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", "#7fcdbb")
	.style("stroke", "gray")
	.style("stroke-width", .25)
	.attr("class", "states")
	.transition()
	.duration(2000)
	.style("fill", function(d){
	var value = d.properties.milPounds;

	if (value) {
	return color(value);
	} else {
	return "#ccc";
	}
	});

	svg.selectAll("path")
	.data(json.features)
	.on("mouseover", function(){
	return tooltip.style("visibility", "visible");
	})
	.on("mousemove", function(d){
	return tooltip
	.style("top", (d3.event.pageY -16) + "px")
	.style("left", (d3.event.pageX) + "px")
	.select("#value")
	.text(d.properties.name + ": " + d.properties.milPounds + " million pounds");
	})
	.on("mouseout", function(){
	return tooltip.style("visibility", "hidden");
	})


	});

	});

	</script>