keerlu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Putting this old version up so I can reference it

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>

path {
  stroke: white;
  stroke-width: 0.25px;
  fill: #297A52;
}

</style>

<body>

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>

var width = 960,
    height = 500;

var projection = d3.geo.mercator()

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height); // set SVG window

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

var g = svg.append("g");

d3.json("world-110m2.json", function(error, topology) {
	g.selectAll("path")
	.data(topojson.feature(topology, topology.objects.countries)
	.features)
	.enter()
	.append("path")
	.attr("d", path)
	.on("click", clicked);
});


function clicked(d) {

	var centroid = path.centroid(d);

	projection.rotate([- projection.invert(centroid)[0], - projection.invert(centroid)[1]]);

  // Transition to the new projection.

 	g.selectAll("path")
	.transition()
      	.duration(0)
      	.attr("d", path);
}

</script>

</body>
</html>

## world-110m2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m2.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 charset="utf-8">

	<style>

	path {
	stroke: white;
	stroke-width: 0.25px;
	fill: #297A52;
	}

	</style>

	<body>

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height); // set SVG window

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

	var g = svg.append("g");

	d3.json("world-110m2.json", function(error, topology) {
	g.selectAll("path")
	.data(topojson.feature(topology, topology.objects.countries)
	.features)
	.enter()
	.append("path")
	.attr("d", path)
	.on("click", clicked);
	});


	function clicked(d) {

	var centroid = path.centroid(d);

	projection.rotate([- projection.invert(centroid)[0], - projection.invert(centroid)[1]]);

	// Transition to the new projection.

	g.selectAll("path")
	.transition()
	.duration(0)
	.attr("d", path);
	}

	</script>

	</body>
	</html>