chris-creditdesign/.gitignore

## .gitignore
.DS_Store

## README.txt
A Pen created at CodePen.io. You can find this one at http://codepen.io/chris-creditdesign/pen/47f7cf5e9b3c4e93bc9ebfad03025107.

 Learning about topoJSON form Mike Bostocks' Let’s Make a Map tutorial
http://bost.ocks.org/mike/map/
and
http://bl.ocks.org/mbostock/4183330

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Nature Paris Map</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script>
	<script src="index.js"></script>
</body>

</html>

## index.js
var width = 1000;
var height = 1000;

var color = d3.scale.linear()
							.range(["#ff0000","#00ff00"])
							.domain([100,0]);

var projection = d3.geo.equirectangular();

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

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

svg.call(d3.behavior.zoom()
			.translate([0, 0])
			.scale(1)
			.scaleExtent([1, 8])
			.on("zoom", zoomed));

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

d3.json("simple-world.json", function(error, world){

	var countries = topojson.feature(world, world.objects.countries).features,
			neighbors = topojson.neighbors(world.objects.countries.geometries);

	countriesSVG.selectAll(".country")
			.data(countries)
		.enter().insert("path", ".graticule")
			.attr("class", "country")
			.attr("d", path)
			.style("fill", "#ccc");

});


function zoomed() {
			svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
			countriesSVG.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}

## simple-world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              simple-world.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.
      
    
## style.css
body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
	A Pen created at CodePen.io. You can find this one at http://codepen.io/chris-creditdesign/pen/47f7cf5e9b3c4e93bc9ebfad03025107.

	Learning about topoJSON form Mike Bostocks' Let’s Make a Map tutorial
	http://bost.ocks.org/mike/map/
	and
	http://bl.ocks.org/mbostock/4183330
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Nature Paris Map</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script>
	<script src="index.js"></script>
	</body>

	</html>
	var width = 1000;
	var height = 1000;

	var color = d3.scale.linear()
	.range(["#ff0000","#00ff00"])
	.domain([100,0]);

	var projection = d3.geo.equirectangular();

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

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

	svg.call(d3.behavior.zoom()
	.translate([0, 0])
	.scale(1)
	.scaleExtent([1, 8])
	.on("zoom", zoomed));

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

	d3.json("simple-world.json", function(error, world){

	var countries = topojson.feature(world, world.objects.countries).features,
	neighbors = topojson.neighbors(world.objects.countries.geometries);

	countriesSVG.selectAll(".country")
	.data(countries)
	.enter().insert("path", ".graticule")
	.attr("class", "country")
	.attr("d", path)
	.style("fill", "#ccc");

	});


	function zoomed() {
	svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
	countriesSVG.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
	}
	body {
	background: #fcfcfa;
	}

	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 3px;
	}

	.fill {
	fill: #fff;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: #222;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}