georgesb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The original code for this D3 map courtesy of Michelle Chandra.
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

  
## cities-lived.csv

          
            years
            place
            lat
            lon

            
              1
              New York City
              40.71455
              -74.007124

            
              3
              Berkeley
              37.8715
              -122.2730

            
              5
              San Antonio
              29.4241
              -98.4936

            
              55
              Los Angeles
              34.0522
              -118.2437

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">

/* On mouse hover, lighten state color */
path:hover {
	fill-opacity: .7;
}

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

/* Legend Font Style */
body {
	font: 11px sans-serif;
}

/* Legend Position Style */
.legend {
	position:absolute;
	left:800px;
	top:350px;
}

</style>
</head>
<body>
<script type="text/javascript">

/*  This visualization was made possible by modifying code provided by:

Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

Malcolm Maclean, tooltips example tutorial
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

Mike Bostock, Pie Chart Legend
http://bl.ocks.org/mbostock/3888852  */


//Width and height of map
var width = 960;
var height = 500;

// D3 Projection
var projection = d3.geo.albersUsa()
				   .translate([width/2, height/2])    // translate to center of screen
				   .scale([1000]);          // scale things down so see entire US

// Define path generator
var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
		  	 .projection(projection);  // tell path generator to use albersUsa projection


// Define linear scale for output
var color = d3.scale.linear()
			  .range(["rgb(213,222,217)","rgb(69,173,168)","rgb(84,36,55)","rgb(217,91,67)"]);

var legendText = ["Cities Lived", "States Lived", "States Visited", "None"];

//Create SVG element and append map to the SVG
var svg = d3.select("body")
			.append("svg")
			.attr("width", width)
			.attr("height", height);

// Append Div for tooltip to SVG
var div = d3.select("body")
		    .append("div")
    		.attr("class", "tooltip")
    		.style("opacity", 0);

// Load in my states data!
d3.csv("stateslived.csv", function(data) {
color.domain([0,1,2,3]); // setting the range of the input data

// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {

// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {

	// Grab State Name
	var dataState = data[i].state;

	// Grab data value
	var dataValue = data[i].visited;

	// Find the corresponding state inside the GeoJSON
	for (var j = 0; j < json.features.length; j++)  {
		var jsonState = json.features[j].properties.name;

		if (dataState == jsonState) {

		// Copy the data value into the JSON
		json.features[j].properties.visited = dataValue;

		// Stop looking through the JSON
		break;
		}
	}
}

// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("stroke", "#fff")
	.style("stroke-width", "1")
	.style("fill", function(d) {

	// Get data value
	var value = d.properties.visited;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "rgb(213,222,217)";
	}
});


// Map the cities I have lived in!
d3.csv("cities-lived.csv", function(data) {

svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
		return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
		return projection([d.lon, d.lat])[1];
	})
	.attr("r", function(d) {
		return Math.sqrt(d.years) * 4;
	})
		.style("fill", "rgb(217,91,67)")
		.style("opacity", 0.85)

	// Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks"
	// http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
	.on("mouseover", function(d) {
    	div.transition()
      	   .duration(200)
           .style("opacity", .9);
           div.text(d.place)
           .style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
	})

    // fade out tooltip on mouse out
    .on("mouseout", function(d) {
        div.transition()
           .duration(500)
           .style("opacity", 0);
    });
});

// Modified Legend Code from Mike Bostock: http://bl.ocks.org/mbostock/3888852
var legend = d3.select("body").append("svg")
      			.attr("class", "legend")
     			.attr("width", 140)
    			.attr("height", 200)
   				.selectAll("g")
   				.data(color.domain().slice().reverse())
   				.enter()
   				.append("g")
     			.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  	legend.append("rect")
   		  .attr("width", 18)
   		  .attr("height", 18)
   		  .style("fill", color);

  	legend.append("text")
  		  .data(legendText)
      	  .attr("x", 24)
      	  .attr("y", 9)
      	  .attr("dy", ".35em")
      	  .text(function(d) { return d; });
	});

});
</script>
</body>
</html>

## stateslived.csv

          
            state
            visited

            
              Alabama
              0

            
              Alaska
              0

            
              Arkansas
              0

            
              Arizona
              1

            
              California
              2

            
              Colorado
              0

            
              Connecticut
              1

            
              Delaware
              0

            
              Florida
              0

            
              Georgia
              0

            
              Hawaii
              1

            
              Iowa
              1

            
              Idaho
              0

            
              Illinois
              1

            
              Indiana
              0

            
              Kansas
              0

            
              Kentucky
              0

            
              Louisiana
              1

            
              Maine
              1

            
              Maryland
              1

            
              Massachusetts
              1

            
              Michigan
              0

            
              Minnesota
              0

            
              Missouri
              0

            
              Mississippi
              0

            
              Montana
              0

            
              North Carolina
              0

            
              North Dakota
              0

            
              Nebraska
              1

            
              New Hampshire
              1

            
              New Jersey
              1

            
              New Mexico
              1

            
              Nevada
              1

            
              New York
              2

            
              Ohio
              0

            
              Oklahoma
              0

            
              Oregon
              1

            
              Pennsylvania
              1

            
              Rhode Island
              0

            
              South Carolina
              0

            
              South Dakota
              0

            
              Tennessee
              0

            
              Texas
              2

            
              Utah
              1

            
              Virginia
              0

            
              Vermont
              1

            
              Washington
              1

            
              Wisconsin
              1

            
              West Virginia
              0

            
              Wyoming
              0

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
years	place	lat	lon
1	New York City	40.71455	-74.007124
3	Berkeley	37.8715	-122.2730
5	San Antonio	29.4241	-98.4936
55	Los Angeles	34.0522	-118.2437
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	/* On mouse hover, lighten state color */
	path:hover {
	fill-opacity: .7;
	}

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

	/* Legend Font Style */
	body {
	font: 11px sans-serif;
	}

	/* Legend Position Style */
	.legend {
	position:absolute;
	left:800px;
	top:350px;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	/* This visualization was made possible by modifying code provided by:

	Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
	https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

	Malcolm Maclean, tooltips example tutorial
	http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

	Mike Bostock, Pie Chart Legend
	http://bl.ocks.org/mbostock/3888852 */


	//Width and height of map
	var width = 960;
	var height = 500;

	// D3 Projection
	var projection = d3.geo.albersUsa()
	.translate([width/2, height/2]) // translate to center of screen
	.scale([1000]); // scale things down so see entire US

	// Define path generator
	var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
	.projection(projection); // tell path generator to use albersUsa projection


	// Define linear scale for output
	var color = d3.scale.linear()
	.range(["rgb(213,222,217)","rgb(69,173,168)","rgb(84,36,55)","rgb(217,91,67)"]);

	var legendText = ["Cities Lived", "States Lived", "States Visited", "None"];

	//Create SVG element and append map to the SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// Append Div for tooltip to SVG
	var div = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// Load in my states data!
	d3.csv("stateslived.csv", function(data) {
	color.domain([0,1,2,3]); // setting the range of the input data

	// Load GeoJSON data and merge with states data
	d3.json("us-states.json", function(json) {

	// Loop through each state data value in the .csv file
	for (var i = 0; i < data.length; i++) {

	// Grab State Name
	var dataState = data[i].state;

	// Grab data value
	var dataValue = data[i].visited;

	// Find the corresponding state inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {
	var jsonState = json.features[j].properties.name;

	if (dataState == jsonState) {

	// Copy the data value into the JSON
	json.features[j].properties.visited = dataValue;

	// Stop looking through the JSON
	break;
	}
	}
	}

	// Bind the data to the SVG and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("stroke", "#fff")
	.style("stroke-width", "1")
	.style("fill", function(d) {

	// Get data value
	var value = d.properties.visited;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "rgb(213,222,217)";
	}
	});


	// Map the cities I have lived in!
	d3.csv("cities-lived.csv", function(data) {

	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", function(d) {
	return Math.sqrt(d.years) * 4;
	})
	.style("fill", "rgb(217,91,67)")
	.style("opacity", 0.85)

	// Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks"
	// http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div.text(d.place)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})

	// fade out tooltip on mouse out
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0);
	});
	});

	// Modified Legend Code from Mike Bostock: http://bl.ocks.org/mbostock/3888852
	var legend = d3.select("body").append("svg")
	.attr("class", "legend")
	.attr("width", 140)
	.attr("height", 200)
	.selectAll("g")
	.data(color.domain().slice().reverse())
	.enter()
	.append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.data(legendText)
	.attr("x", 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.text(function(d) { return d; });
	});

	});
	</script>
	</body>
	</html>
	state	visited
	Alabama	0
	Alaska	0
	Arkansas	0
	Arizona	1
	California	2
	Colorado	0
	Connecticut	1
	Delaware	0
	Florida	0
	Georgia	0
	Hawaii	1
	Iowa	1
	Idaho	0
	Illinois	1
	Indiana	0
	Kansas	0
	Kentucky	0
	Louisiana	1
	Maine	1
	Maryland	1
	Massachusetts	1
	Michigan	0
	Minnesota	0
	Missouri	0
	Mississippi	0
	Montana	0
	North Carolina	0
	North Dakota	0
	Nebraska	1
	New Hampshire	1
	New Jersey	1
	New Mexico	1
	Nevada	1
	New York	2
	Ohio	0
	Oklahoma	0
	Oregon	1
	Pennsylvania	1
	Rhode Island	0
	South Carolina	0
	South Dakota	0
	Tennessee	0
	Texas	2
	Utah	1
	Virginia	0
	Vermont	1
	Washington	1
	Wisconsin	1
	West Virginia	0
	Wyoming	0