m-clare/USA.json

## index.html
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>


  body {
    font-family: "Helvetica Light", sans-serif;
    font-size: 16px;
    padding: 20px;
    font-variant: small-caps;
}
h1{
  font-size: 3em;
  font-weight: 700;
  color: #777878;
  font-variant: small-caps;
}

.states {
    stroke: #B1B1B1;
    stroke-width:1px;
}
.states:hover{
  opacity: .8;
}

.d3-tip {
  line-height: 1;
  padding: 12px;
  background: #888888;
  color: #fff;
  border-radius: 4px;
}

</style>
<body>

    <div id="vis"></div>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script>

var width = 900;
var height = 700;

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-5, 0])
  .html(function(d) {
    var dataRow = countryById.get(d.properties.name);
       if (dataRow) {
           console.log(dataRow);
           return dataRow.states + ": " + dataRow.respondents;
       } else {
           console.log("no dataRow", d);
           return d.properties.name + ": No data.";
       }
  })


var svg = d3.select('#vis').append('svg')
    .attr('width', width)
    .attr('height', height);

svg.call(tip);

var projection = d3.geo.albersUsa()
    .scale(900) // mess with this if you want
    .translate([width / 2, height / 2]);

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

var colorScale = d3.scale.linear().range(["#FFFFFF", "#96272d"]).interpolate(d3.interpolateLab);

var countryById = d3.map();

queue()
    .defer(d3.json, "USA.json")
    .defer(d3.csv, "responses.csv", typeAndSet) // process
    .await(loaded);

function typeAndSet(d) {
    d.respondents = +d.respondents;
    countryById.set(d.states, d);
    return d;
}

function getColor(d) {
    var dataRow = countryById.get(d.properties.name);
    if (dataRow) {
        console.log(dataRow);
        return colorScale(dataRow.respondents);
    } else {
        console.log("no dataRow", d);
        return "#ccc";
    }
}


function loaded(error, usa, respondents) {

    console.log(usa);
    console.log(respondents);

    colorScale.domain(d3.extent(respondents, function(d) {return d.respondents;}));

    var states = topojson.feature(usa, usa.objects.units).features;

    svg.selectAll('path.states')
        .data(states)
        .enter()
        .append('path')
        .attr('class', 'states')
        .attr('d', path)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .attr('fill', function(d,i) {
            console.log(d.properties.name);
            return getColor(d);
        })
        .append("title");

}

</script>
</body>
</html>

## responses.csv

          
            states
            respondents

            
              Alaska
              14

            
              Alabama
              23

            
              Arkansas
              24

            
              Arizona
              37

            
              California
              563

            
              Colorado
              118

            
              Connecticut
              12

            
              Washington D.C.
              22

            
              Delaware
              3

            
              Florida
              28

            
              Georgia
              69

            
              Hawaii
              5

            
              Iowa
              11

            
              Idaho
              14

            
              Illinois
              92

            
              Indiana
              9

            
              Kansas
              21

            
              Kentucky
              6

            
              Louisiana
              4

            
              Massachusetts
              46

            
              Maryland
              22

            
              Maine
              2

            
              Michigan
              44

            
              Minnesota
              87

            
              Missouri
              39

            
              Mississippi
              2

            
              Montana
              15

            
              North Carolina
              15

            
              North Dakota
              2

            
              Nebraska
              20

            
              New Hampshire
              7

            
              New Jersey
              23

            
              New Mexico
              7

            
              Nevada
              18

            
              New York
              109

            
              Ohio
              21

            
              Oklahoma
              49

            
              Oregon
              39

            
              Pennsylvania
              79

            
              Rhode Island
              0

            
              South Carolina
              29

            
              South Dakota
              2

            
              Tennessee
              10

            
              Texas
              132

            
              Utah
              88

            
              Virginia
              47

            
              Vermont
              4

            
              Washington
              197

            
              West Virginia
              0

            
              Wisconsin
              50

            
              Wyoming
              2

## USA.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              USA.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.
	<!DOCTYPE html>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>


	body {
	font-family: "Helvetica Light", sans-serif;
	font-size: 16px;
	padding: 20px;
	font-variant: small-caps;
	}
	h1{
	font-size: 3em;
	font-weight: 700;
	color: #777878;
	font-variant: small-caps;
	}

	.states {
	stroke: #B1B1B1;
	stroke-width:1px;
	}
	.states:hover{
	opacity: .8;
	}

	.d3-tip {
	line-height: 1;
	padding: 12px;
	background: #888888;
	color: #fff;
	border-radius: 4px;
	}

	</style>
	<body>

	<div id="vis"></div>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="d3-legend.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

	<script>

	var width = 900;
	var height = 700;

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-5, 0])
	.html(function(d) {
	var dataRow = countryById.get(d.properties.name);
	if (dataRow) {
	console.log(dataRow);
	return dataRow.states + ": " + dataRow.respondents;
	} else {
	console.log("no dataRow", d);
	return d.properties.name + ": No data.";
	}
	})


	var svg = d3.select('#vis').append('svg')
	.attr('width', width)
	.attr('height', height);

	svg.call(tip);

	var projection = d3.geo.albersUsa()
	.scale(900) // mess with this if you want
	.translate([width / 2, height / 2]);

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

	var colorScale = d3.scale.linear().range(["#FFFFFF", "#96272d"]).interpolate(d3.interpolateLab);

	var countryById = d3.map();

	queue()
	.defer(d3.json, "USA.json")
	.defer(d3.csv, "responses.csv", typeAndSet) // process
	.await(loaded);

	function typeAndSet(d) {
	d.respondents = +d.respondents;
	countryById.set(d.states, d);
	return d;
	}

	function getColor(d) {
	var dataRow = countryById.get(d.properties.name);
	if (dataRow) {
	console.log(dataRow);
	return colorScale(dataRow.respondents);
	} else {
	console.log("no dataRow", d);
	return "#ccc";
	}
	}


	function loaded(error, usa, respondents) {

	console.log(usa);
	console.log(respondents);

	colorScale.domain(d3.extent(respondents, function(d) {return d.respondents;}));

	var states = topojson.feature(usa, usa.objects.units).features;

	svg.selectAll('path.states')
	.data(states)
	.enter()
	.append('path')
	.attr('class', 'states')
	.attr('d', path)
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	.attr('fill', function(d,i) {
	console.log(d.properties.name);
	return getColor(d);
	})
	.append("title");

	}

	</script>
	</body>
	</html>
	states	respondents
	Alaska	14
	Alabama	23
	Arkansas	24
	Arizona	37
	California	563
	Colorado	118
	Connecticut	12
	Washington D.C.	22
	Delaware	3
	Florida	28
	Georgia	69
	Hawaii	5
	Iowa	11
	Idaho	14
	Illinois	92
	Indiana	9
	Kansas	21
	Kentucky	6
	Louisiana	4
	Massachusetts	46
	Maryland	22
	Maine	2
	Michigan	44
	Minnesota	87
	Missouri	39
	Mississippi	2
	Montana	15
	North Carolina	15
	North Dakota	2
	Nebraska	20
	New Hampshire	7
	New Jersey	23
	New Mexico	7
	Nevada	18
	New York	109
	Ohio	21
	Oklahoma	49
	Oregon	39
	Pennsylvania	79
	Rhode Island	0
	South Carolina	29
	South Dakota	2
	Tennessee	10
	Texas	132
	Utah	88
	Virginia	47
	Vermont	4
	Washington	197
	West Virginia	0
	Wisconsin	50
	Wyoming	2