kts/index.html

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

<button id="zoomin">Zoom in</button>
<button id="zoomout">Zoom out</button>


<script>

var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .scale(width)
    .translate([width/2, 50+height/2])
    ;

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

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

d3.json("world-countries.json",
	function(error, world) {
		var collection = world;

		var g = svg.append("g"),
		    feature = g.selectAll(".feature");

		svg.append("rect")
		    .attr("class", "frame")
		    .attr("width", width)
		    .attr("height", height);

		feature = feature
		    .data(collection.features)
		    .enter().append("path")
		    .attr("class", "feature")
		    .attr("d", path);
});

</script>


## 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>
	<meta charset="utf-8">
	<style>
	</style>

	<button id="zoomin">Zoom in</button>
	<button id="zoomout">Zoom out</button>


	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()
	.scale(width)
	.translate([width/2, 50+height/2])
	;

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

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

	d3.json("world-countries.json",
	function(error, world) {
	var collection = world;

	var g = svg.append("g"),
	feature = g.selectAll(".feature");

	svg.append("rect")
	.attr("class", "frame")
	.attr("width", width)
	.attr("height", height);

	feature = feature
	.data(collection.features)
	.enter().append("path")
	.attr("class", "feature")
	.attr("d", path);
	});

	</script>