AWinterman/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>North Pole</title>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v2.2.0/d3.js"></script>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v2.2.0/d3.geo.js"></script>
  <style type="text/css">

svg {
  width: 960px;
  height: 500px;
}

#states path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 0.5px;
}


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

    //the projection
    var xy1 = d3.geo.azimuthal().origin([0,90]);

var svg = d3.select("body").append("svg:svg");
svg.append("svg:g").attr("id", "states");

d3.json("world-countries.json", function(collection) {
  svg.select("#states")
    .selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr("d", d3.geo.path().projection(xy1));
});


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

## world-countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-countries.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>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>North Pole</title>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/v2.2.0/d3.js"></script>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/v2.2.0/d3.geo.js"></script>
	<style type="text/css">

	svg {
	width: 960px;
	height: 500px;
	}

	#states path {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 0.5px;
	}


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

	//the projection
	var xy1 = d3.geo.azimuthal().origin([0,90]);

	var svg = d3.select("body").append("svg:svg");
	svg.append("svg:g").attr("id", "states");

	d3.json("world-countries.json", function(collection) {
	svg.select("#states")
	.selectAll("path")
	.data(collection.features)
	.enter().append("svg:path")
	.attr("d", d3.geo.path().projection(xy1));
	});


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