darrenjaworski/index.html

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

.country-border {
  /*fill: #d3d3d3;
  stroke: #f1f1f1;*/
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

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

svg {
  display: block;
  margin: auto;
  font: 14px sans-serif;
}

body {
  margin: 0;
}

svg, body {
  background: #f1f1f1;
}

</style>
<body>
  <select name="" id="">
    <option value="1800">1800</option>
    <option value="1820">1820</option>
    <option value="1850">1850</option>
    <option value="1865">1865</option>
    <option value="1880">1880</option>
    <option value="1900">1900</option>
    <option value="1910">1910</option>
    <option value="1920">1920</option>
    <option value="1930">1930</option>
    <option value="1940">1940</option>
    <option value="1950">1950</option>
    <option value="1960">1960</option>
    <option value="1970">1970</option>
    <option value="1980">1980</option>
    <option value="1990">1990</option>
    <option value="2000">2000</option>
    <option value="2010" selected>2010</option>
  </select>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 960;

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

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

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

var graticule = d3.geo.graticule();

function render(year) {
  d3.json("http://api.thenmap.net/v1/world/geo|data/"+ year +"?data_props=sdate|edate|name&geo_type=topojson", function(error, world) {
    if (error) throw error;

    var countrytopo = topojson.feature(world.geo, world.geo.objects.collection);

    var country = svg.selectAll('path')
      .data(countrytopo.features, function(d) { return d.id; });

    country.transition()
      .duration(1000)
      .attr('d', path);

    country.enter()
      .append("path")
      .attr('class', 'country-border')
      .attr("d", path)
      .append('title')
      .text(function(d) { return d.id; });

    country.exit()
      .transition()
      .duration(1000)
      .attr('d', path)
      .remove();

    svg.selectAll('.overlay')
      .remove();

    svg.append('g')
      .attr('class', 'overlay')
      .append("path")
      .datum(graticule)
      .attr("class", "graticule")
      .attr("d", path);
  });
}

render(2010);

d3.select('select').on('change', function(d) {
  render(this.value);
})

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.country-border {
	/*fill: #d3d3d3;
	stroke: #f1f1f1;*/
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	}

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

	svg {
	display: block;
	margin: auto;
	font: 14px sans-serif;
	}

	body {
	margin: 0;
	}

	svg, body {
	background: #f1f1f1;
	}

	</style>
	<body>
	<select name="" id="">
	<option value="1800">1800</option>
	<option value="1820">1820</option>
	<option value="1850">1850</option>
	<option value="1865">1865</option>
	<option value="1880">1880</option>
	<option value="1900">1900</option>
	<option value="1910">1910</option>
	<option value="1920">1920</option>
	<option value="1930">1930</option>
	<option value="1940">1940</option>
	<option value="1950">1950</option>
	<option value="1960">1960</option>
	<option value="1970">1970</option>
	<option value="1980">1980</option>
	<option value="1990">1990</option>
	<option value="2000">2000</option>
	<option value="2010" selected>2010</option>
	</select>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 960;

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

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

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

	var graticule = d3.geo.graticule();

	function render(year) {
	d3.json("http://api.thenmap.net/v1/world/geo\|data/"+ year +"?data_props=sdate\|edate\|name&geo_type=topojson", function(error, world) {
	if (error) throw error;

	var countrytopo = topojson.feature(world.geo, world.geo.objects.collection);

	var country = svg.selectAll('path')
	.data(countrytopo.features, function(d) { return d.id; });

	country.transition()
	.duration(1000)
	.attr('d', path);

	country.enter()
	.append("path")
	.attr('class', 'country-border')
	.attr("d", path)
	.append('title')
	.text(function(d) { return d.id; });

	country.exit()
	.transition()
	.duration(1000)
	.attr('d', path)
	.remove();

	svg.selectAll('.overlay')
	.remove();

	svg.append('g')
	.attr('class', 'overlay')
	.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);
	});
	}

	render(2010);

	d3.select('select').on('change', function(d) {
	render(this.value);
	})

	</script>