emagee/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>USA - AlbersUSA projection</title>
		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<link href='https://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<style type="text/css">


			body {
				margin: 0;
				background-color: mediumblue;
				background: -webkit-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Chrome 10+, Saf5.1+ */
				background: -moz-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* FF3.6+ */
				background: -ms-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* IE10 */
				background: -o-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Opera 11.10+ */
				background: linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* W3C */

			}


			#container {
				width: 900px;
				margin-left: auto;
				margin-right: auto;
				}


			h1 {
				font-size: 2.5em;
				color: khaki;
				text-align: center;
				font-family: 'Amaranth', sans-serif;
				font-weight: normal;
			}

			p	{
				font-size: 1em;
				color: khaki;
				text-align: center;
				font-family: 'Open Sans', sans-serif;
				font-weight: normal;
			}


		</style>
	</head>
	<body>

		<div id="container">
			<h1>The United States of America</h1>
			<p>Albers USA projection<p>
		</div>

		<script type="text/javascript">


			//Width and height
			var w = 900;
			var h = 500;

			//Define map projection
			var projection = d3.geo.albersUsa()
								   .translate([ w/2, h/2 ])
								   .scale([ 900 ]);

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

			//Create SVG
			var svg = d3.select("#container")
						.insert("svg")
						.attr("width", w)
						.attr("height", h);

			//Load in GeoJSON data
			d3.json("states.json", function(json) {

				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   .attr("fill", "midnightblue")
				   .attr("stroke", "lightseagreen");

			});


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

## 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.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>USA - AlbersUSA projection</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link href='https://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<style type="text/css">



	body {
	margin: 0;
	background-color: mediumblue;
	background: -webkit-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Chrome 10+, Saf5.1+ */
	background: -moz-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* FF3.6+ */
	background: -ms-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* IE10 */
	background: -o-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Opera 11.10+ */
	background: linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* W3C */

	}


	#container {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	}



	h1 {
	font-size: 2.5em;
	color: khaki;
	text-align: center;
	font-family: 'Amaranth', sans-serif;
	font-weight: normal;
	}

	p {
	font-size: 1em;
	color: khaki;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	}



	</style>
	</head>
	<body>

	<div id="container">
	<h1>The United States of America</h1>
	<p>Albers USA projection<p>
	</div>

	<script type="text/javascript">



	//Width and height
	var w = 900;
	var h = 500;

	//Define map projection
	var projection = d3.geo.albersUsa()
	.translate([ w/2, h/2 ])
	.scale([ 900 ]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//Create SVG
	var svg = d3.select("#container")
	.insert("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in GeoJSON data
	d3.json("states.json", function(json) {

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("fill", "midnightblue")
	.attr("stroke", "lightseagreen");

	});



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