zanarmstrong/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="overlay.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<body>
<div id = "description">
<h2>Is Africa bigger than North America?</h2>
<p><strong>Yes!</strong> In fact, North America, including United States, Canada, Mexico, and Greenland, could easily fit inside Africa with plenty of room left to add Central America, Argentina, Chile, and Bolivia too.</p>
<p>Most of the maps we use day to day distort the relative sizes of countries, making countries near the equator look relatively small and countries near the north and south pole look relatively huge. However, we can compare the true sizes of countries by using a different type of map.</p>
<div><button name="Sweden,Madagascar">Sweden vs Madagascar</button><button name="Australia,Antarctica">Australia vs Antarctica</button><button name="US,Australia">US vs Australia</button><button name="Greenland,South_America">Greenland vs South America</button><button name="Brazil,US">Brazil vs US</button><button name="Africa,North_America">Africa vs North America</button></div>
<h3>Drag on the small world maps to compare different parts of the world.</h3>
<div id="tool"></div>
<br><br>
<h2>What's going on?</h2>
<p>The earth is a sphere, but maps are flat. This means that when we create maps, we have to somehow flatten the sphere. This flattening must create some distortion. This distortion could affect the relative angles, shapes of countries, or sizes, or all of these. While we can't avoid distortion, we can flatten the sphere in different ways, based on the "projection" we choose, and depending on what we're going to use the map for.</p>
<p>One of the most commonly used projections is the <a href="http://en.wikipedia.org/wiki/Mercator_projection">Mercator projection</a>. The Mercator was incredibly useful for ocean navigation because it keeps angles accurate, making it easier for sailers to take compass bearings and navigate the open ocean. The (significant) downside is that it distrorts how large things are. That said, many maps found online, like Google Maps, Open Street Maps, Mapquest, and others, use a variation of Mercator known as "Web Mercator. Advantages include the fact that north is "up" and that meridians (lines of longitude) are equally spaced vertical lines."</p>
<p>Many of us imagine the world as it was depicted on the map on the wall in our grade school classrooms or the maps we use online. But, this can lead to incorrect assumptions about the world around us. I was inspired to create this after reading <a href="https://iansierraleone2015.wordpress.com/">a friend's account of his time fighting Ebola in Sierra Leone</a>. He was frustrated with misunderstanding about the disease, including that a "school in New Jersey that panicked and refused to admit two elementary school children from Rwanda.  Never mind that Rwanda is 2,600 miles from the epidemic area in West Africa.  That’s the distance from my apartment in DC to Lake Tahoe." Misunderstanding scale in the world around us can have a real impact on our opinions and decisions. I hope that this website plays a small part in helping us better understand our wonderful world.</p>
<p>If you liked this, you might also enjoy the <a href="http://kai.subblue.com/en/africa.html">True Size of Africa</a> or the <a href="https://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.html">Mercator Puzzle</a>.</p>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="overlay.js"></script>

## overlay.css
body {
  background: #FFFCF8;
  font-family: 'Raleway', sans-serif;
  font-size: 14pt;
}

button {
  margin-right: 10px;
  font-size: 12px;
}

#description {
  margin-left: 50px;
  width: 900px;
}

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

.fill {
  fill: #fff;
}


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

.land_0 {
  fill: black;
  opacity: .8;
}

.land_1 {
  fill: lightgreen;
  opacity: .8;
}

.large_land_0 {
  fill: black;
  opacity: 1;
  fill-rule: evenodd;
}

.large_land_1 {
  fill: lightgreen;
  opacity: .9;
  fill-rule: evenodd;
}

.boundary_0 {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
}

.boundary_1 {
  fill: none;
  stroke: white;
  stroke-width: 1px;
  opacity: .9;
}

## overlay.js
// Zan Armstrong - May, 2015
// parts of the code adapted from Mike Bostock's Lambert Azimuthal Equal Area http://bl.ocks.org/mbostock/3757101

document.body.addEventListener('drag', function(event) {
  event.preventDefault();
}, false);

var width = 300,
  height = 300,
  largeWidth = 600,
  largeHeight = 600;

var margin = {
  top: 0
}


var countries = {
  Australia: {
    lat: -27,
    lon: 130
  },
  Antarctica: {
    lat: -90,
    lon: 0
  },
  Sweden: {
    lat: 62.6,
    lon: 16.3
  },
  Madagascar: {
    lat: -19,
    lon: 46.7
  },
  US: {
    lat: 35.65,
    lon: -97.24
  },
  Greenland: {
    lat: 65.88,
    lon: -42.21
  },
  South_America: {
    lat: -18.97,
    lon: -61.479
  },
  Brazil: {
    lat: -16.7833,
    lon: -53.2052
  },
  Africa: {
    lat: 6.52865,
    lon: 20.3586336
  },
  North_America: {
    lat: 48.2392291,
    lon: -98.9443219
  }
}

var state = {
  scale: 450,
  latLon: [countries.Africa, countries.North_America]
}

var transitionDuration = 1000;

if (window.location.hash.split("&").length != 0) {
  var windowState = window.location.hash.split("&");
  for (var i = 0; i < windowState.length; i++) {
    var k = windowState[i].replace('#', '').split('=');
    if (k[0] == "scale") {
      state.scale = k[1];
    } else if (k[0] == "center0") {
      state.latLon[0] = {
        lat: k[1].split(",")[0],
        lon: k[1].split(",")[1]
      };
    } else if (k[0] == "center1") {
      state.latLon[1] = {
        lat: k[1].split(",")[0],
        lon: k[1].split(",")[1]
      };
    }
  }
}

var updateHash = function() {
  window.location.hash = "scale=" + state.scale + "&center0=" + state.latLon[0].lat + "," + state.latLon[0].lon + "&center1=" + state.latLon[1].lat + "," + state.latLon[1].lon;
}


var padding = 5;

var mainSVG = d3.select("#tool").append("svg")
  .attr("width", 1000)
  .attr("height", 600);

var mapObjects = []

for (var i = 0; i < 2; i++) {
  mapObjects[i] = setUpSmallMaps(state.latLon[i].lat, state.latLon[i].lon, i)
}

function setUpSmallMaps(lat, lon, name) {
  var center = [-lon, -lat]
  var projectionSmall = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(width / 2 * .9)
    .center([0, 0])
    .rotate(center)
    .clipAngle(90)
    .precision(.7);

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

  var graticule = d3.geo.graticule();

  var svg = mainSVG.append("g")
    .attr('transform', 'translate(' + padding + ',' + (height * name + margin.top) + ')');

  svg.append("defs").append("path")
    .datum({
      type: "Sphere"
    })
    .attr("id", "sphere")
    .attr("d", path);

  svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

  svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

  svg.append("path")
    .datum(graticule)
    .attr("class", "graticule graticule_" + name)
    .attr("d", path);

  function updateSmall(difference) {
    // if (lastStart == 'NA' || Date.now() - lastStart > 80) {
    resetDrag()
      //lastStart = Date.now();
    var k = projectionSmall.rotate()
    projectionSmall.rotate([k[0] + difference.x / 136 * 90, k[1] - difference.y, k[2]])
    state.latLon[name] = {
      lon: -projectionSmall.rotate()[0],
      lat: -projectionSmall.rotate()[1]
    }

    d3.selectAll(".graticule_" + name).attr("d", path);
    d3.selectAll(".land_" + name).attr("d", path);

    updateLarge(largeMapObjects, name, projectionSmall.rotate(), 0)
    updateHash()
      //  }
  }

  function resetDrag() {
    dragDistance = {
      x: 0,
      y: 0
    };
  }

  //var lastStart = 'NA';
  var dragDistance = {
    x: 0,
    y: 0
  };
  var drag = d3.behavior.drag()
    .on("dragstart", function() {
      d3.event.sourceEvent.preventDefault();
    })
    .on("drag", function() {
      dragDistance.x = dragDistance.x + d3.event.dx;
      dragDistance.y = dragDistance.y + d3.event.dy;
      updateSmall(dragDistance)
    })
    .on("dragend", function() {
      lastStart = 'NA'
      updateSmall(dragDistance)
      resetDrag()
    });

  svg.call(drag);


  return {
    "svg": svg,
    "projection": projectionSmall,
    "path": path,
    "graticule": graticule,
    "lat": lat,
    "lon": lon
  }

}


var largeSvg = mainSVG.append("g")
  .attr('transform', 'translate(' + (2 * padding + width) + ',' + (margin.top) + ')');


largeSvg.append('rect')
  .attr("height", largeHeight - 4 * padding)
  .attr("x", 2 * padding)
  .attr("y", 2 * padding)
  .attr("width", largeWidth - 4 * padding)
  .attr("fill", "none")
  .attr("stroke", "black")

var largeMapObjects = []
for (var i = 0; i < 2; i++) {
  largeMapObjects[i] = setUpLargeMaps(state.latLon[i].lat, state.latLon[i].lon, i, largeSvg)
}

function setUpLargeMaps(lat, lon, name, svg) {
  var center = [-lon, -lat]

  var projectionLarge = d3.geo.azimuthalEqualArea()
    .translate([largeWidth / 2, largeHeight / 2])
    .scale(state.scale)
    .center([0, 0])
    .clipAngle(180 - 1e-3)
    .clipExtent([
      [2 * padding, 2 * padding],
      [largeWidth - 2 * padding, largeHeight - 2 * padding]
    ])
    .rotate(center)
    .precision(.7);

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


  return {
    "svg": svg,
    "projection": projectionLarge,
    "path": path,
    "lat": lat,
    "lon": lon
  }

}

// need to set update function
function updateSmallRotate(mapObject, name, newRotate, transitionDuration) {

  d3.selectAll(".graticule_" + name)
    .transition()
    .duration([transitionDuration])
    .attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));

  d3.selectAll(".land_" + name)
    .transition()
    .duration([transitionDuration])
    .attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));
}

// need to set update function
function updateLarge(mapObject, name, newRotate, transitionDuration) {
  d3.selectAll(".large_land_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));;
  d3.selectAll(".boundary_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));;
}

function updateLargeScale(mapObjects, newScale) {
  for (var i = 0; i < 2; i++) {
    mapObjects[i].projection.scale(newScale)
    d3.selectAll(".large_land_" + i).attr("d", mapObjects[i].path);
    d3.selectAll(".boundary_" + i).attr("d", mapObjects[i].path);
  }
}

function addCenterBox(svg) {
  var distance = zoomToBoxScale(state.scale);
  svg.append("rect")
    .attr("x", width / 2 - distance)
    .attr("y", height / 2 - distance)
    .attr("width", distance * 2)
    .attr("height", distance * 2)
    .attr("stroke", "black")
    .attr("fill", "none")
    .attr("class", "littleBox")
}

function updateCenterBox(distance) {
  d3.selectAll(".littleBox")
    .attr("x", width / 2 - distance)
    .attr("y", height / 2 - distance)
    .attr("width", distance * 2)
    .attr("height", distance * 2)
}

d3.json("world-110m.json", function(error, world) {
  for (var i = 0; i < mapObjects.length; i++) {
    svg = mapObjects[i].svg;
    svg
      .insert("path", ".graticule" + i)
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land land_" + i)
      .attr("d", mapObjects[i].path);

    addCenterBox(svg, [mapObjects[i].lon, mapObjects[i].lat], mapObjects[i].projection)
  }

  for (var i = 0; i < 2; i++) {
    svg = largeMapObjects[i].svg.append('g').attr("class", "large_" + name);
    svg.insert("path", ".large_graticule_" + i)
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "large_land_" + i)
      .attr("d", largeMapObjects[i].path);

    svg.insert("path", ".large_graticule" + i)
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) {
        return a !== b;
      }))
      .attr("class", "boundary boundary_" + i)
      .attr("d", largeMapObjects[i].path);
  }

});

// buttons
d3.selectAll("button").on("click", function() {
  state.latLon[0] = countries[this.name.split(",")[0]];
  state.latLon[1] = countries[this.name.split(",")[1]];

  // update small maps with new rotation
  updateSmallRotate(mapObjects, 0, [-state.latLon[0].lon, -state.latLon[0].lat, 0], transitionDuration)
  updateSmallRotate(mapObjects, 1, [-state.latLon[1].lon, -state.latLon[1].lat, 0], transitionDuration)
    // update large maps
  updateLarge(largeMapObjects, 0, [-state.latLon[0].lon, -state.latLon[0].lat, 0], transitionDuration)
  updateLarge(largeMapObjects, 1, [-state.latLon[1].lon, -state.latLon[1].lat, 0], transitionDuration)
    // update hash
  updateHash()
})

// transition
function arcTween(path, projection, new3Rotation) {
  return function(d, i, a) {
    var interpolate = d3.interpolate(projection.rotate(), new3Rotation);
    return function(t) {
      projection.rotate(interpolate(t));
      return path(d);
    }
  }
}

// slider
var zoomRange = [220, 2000]

var zoomToBoxScale = d3.scale.linear().domain([470, 2000]).range([80, 20])

var slider = d3.select("#tool")
  .append("p")
  .append("input")
  .attr("type", "range")
  .style("margin-left", "750px")
  .attr("value", function(d) {
    return state.scale
  })
  .attr("min", zoomRange[0])
  .attr("max", zoomRange[1])
  .attr("step", (zoomRange[1] - zoomRange[0]) / 400)
  .on("input", slided);

function slided(d) {
  state.scale = d3.select(this).property("value");
  updateLargeScale(largeMapObjects, state.scale);
  updateCenterBox(zoomToBoxScale(state.scale))
  updateHash()
}

## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.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">
	<link rel="stylesheet" href="overlay.css">
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
	<body>
	<div id = "description">
	<h2>Is Africa bigger than North America?</h2>
	<p><strong>Yes!</strong> In fact, North America, including United States, Canada, Mexico, and Greenland, could easily fit inside Africa with plenty of room left to add Central America, Argentina, Chile, and Bolivia too.</p>
	<p>Most of the maps we use day to day distort the relative sizes of countries, making countries near the equator look relatively small and countries near the north and south pole look relatively huge. However, we can compare the true sizes of countries by using a different type of map.</p>
	<div><button name="Sweden,Madagascar">Sweden vs Madagascar</button><button name="Australia,Antarctica">Australia vs Antarctica</button><button name="US,Australia">US vs Australia</button><button name="Greenland,South_America">Greenland vs South America</button><button name="Brazil,US">Brazil vs US</button><button name="Africa,North_America">Africa vs North America</button></div>
	<h3>Drag on the small world maps to compare different parts of the world.</h3>
	<div id="tool"></div>
	<br><br>
	<h2>What's going on?</h2>
	<p>The earth is a sphere, but maps are flat. This means that when we create maps, we have to somehow flatten the sphere. This flattening must create some distortion. This distortion could affect the relative angles, shapes of countries, or sizes, or all of these. While we can't avoid distortion, we can flatten the sphere in different ways, based on the "projection" we choose, and depending on what we're going to use the map for.</p>
	<p>One of the most commonly used projections is the <a href="http://en.wikipedia.org/wiki/Mercator_projection">Mercator projection</a>. The Mercator was incredibly useful for ocean navigation because it keeps angles accurate, making it easier for sailers to take compass bearings and navigate the open ocean. The (significant) downside is that it distrorts how large things are. That said, many maps found online, like Google Maps, Open Street Maps, Mapquest, and others, use a variation of Mercator known as "Web Mercator. Advantages include the fact that north is "up" and that meridians (lines of longitude) are equally spaced vertical lines."</p>
	<p>Many of us imagine the world as it was depicted on the map on the wall in our grade school classrooms or the maps we use online. But, this can lead to incorrect assumptions about the world around us. I was inspired to create this after reading <a href="https://iansierraleone2015.wordpress.com/">a friend's account of his time fighting Ebola in Sierra Leone</a>. He was frustrated with misunderstanding about the disease, including that a "school in New Jersey that panicked and refused to admit two elementary school children from Rwanda. Never mind that Rwanda is 2,600 miles from the epidemic area in West Africa. That’s the distance from my apartment in DC to Lake Tahoe." Misunderstanding scale in the world around us can have a real impact on our opinions and decisions. I hope that this website plays a small part in helping us better understand our wonderful world.</p>
	<p>If you liked this, you might also enjoy the <a href="http://kai.subblue.com/en/africa.html">True Size of Africa</a> or the <a href="https://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.html">Mercator Puzzle</a>.</p>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="overlay.js"></script>
	body {
	background: #FFFCF8;
	font-family: 'Raleway', sans-serif;
	font-size: 14pt;
	}

	button {
	margin-right: 10px;
	font-size: 12px;
	}

	#description {
	margin-left: 50px;
	width: 900px;
	}

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

	.fill {
	fill: #fff;
	}


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

	.land_0 {
	fill: black;
	opacity: .8;
	}

	.land_1 {
	fill: lightgreen;
	opacity: .8;
	}

	.large_land_0 {
	fill: black;
	opacity: 1;
	fill-rule: evenodd;
	}

	.large_land_1 {
	fill: lightgreen;
	opacity: .9;
	fill-rule: evenodd;
	}

	.boundary_0 {
	fill: none;
	stroke: grey;
	stroke-width: 1px;
	}

	.boundary_1 {
	fill: none;
	stroke: white;
	stroke-width: 1px;
	opacity: .9;
	}
	// Zan Armstrong - May, 2015
	// parts of the code adapted from Mike Bostock's Lambert Azimuthal Equal Area http://bl.ocks.org/mbostock/3757101

	document.body.addEventListener('drag', function(event) {
	event.preventDefault();
	}, false);

	var width = 300,
	height = 300,
	largeWidth = 600,
	largeHeight = 600;

	var margin = {
	top: 0
	}



	var countries = {
	Australia: {
	lat: -27,
	lon: 130
	},
	Antarctica: {
	lat: -90,
	lon: 0
	},
	Sweden: {
	lat: 62.6,
	lon: 16.3
	},
	Madagascar: {
	lat: -19,
	lon: 46.7
	},
	US: {
	lat: 35.65,
	lon: -97.24
	},
	Greenland: {
	lat: 65.88,
	lon: -42.21
	},
	South_America: {
	lat: -18.97,
	lon: -61.479
	},
	Brazil: {
	lat: -16.7833,
	lon: -53.2052
	},
	Africa: {
	lat: 6.52865,
	lon: 20.3586336
	},
	North_America: {
	lat: 48.2392291,
	lon: -98.9443219
	}
	}

	var state = {
	scale: 450,
	latLon: [countries.Africa, countries.North_America]
	}

	var transitionDuration = 1000;

	if (window.location.hash.split("&").length != 0) {
	var windowState = window.location.hash.split("&");
	for (var i = 0; i < windowState.length; i++) {
	var k = windowState[i].replace('#', '').split('=');
	if (k[0] == "scale") {
	state.scale = k[1];
	} else if (k[0] == "center0") {
	state.latLon[0] = {
	lat: k[1].split(",")[0],
	lon: k[1].split(",")[1]
	};
	} else if (k[0] == "center1") {
	state.latLon[1] = {
	lat: k[1].split(",")[0],
	lon: k[1].split(",")[1]
	};
	}
	}
	}

	var updateHash = function() {
	window.location.hash = "scale=" + state.scale + "&center0=" + state.latLon[0].lat + "," + state.latLon[0].lon + "&center1=" + state.latLon[1].lat + "," + state.latLon[1].lon;
	}


	var padding = 5;

	var mainSVG = d3.select("#tool").append("svg")
	.attr("width", 1000)
	.attr("height", 600);

	var mapObjects = []

	for (var i = 0; i < 2; i++) {
	mapObjects[i] = setUpSmallMaps(state.latLon[i].lat, state.latLon[i].lon, i)
	}

	function setUpSmallMaps(lat, lon, name) {
	var center = [-lon, -lat]
	var projectionSmall = d3.geo.orthographic()
	.translate([width / 2, height / 2])
	.scale(width / 2 * .9)
	.center([0, 0])
	.rotate(center)
	.clipAngle(90)
	.precision(.7);

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

	var graticule = d3.geo.graticule();

	var svg = mainSVG.append("g")
	.attr('transform', 'translate(' + padding + ',' + (height * name + margin.top) + ')');

	svg.append("defs").append("path")
	.datum({
	type: "Sphere"
	})
	.attr("id", "sphere")
	.attr("d", path);

	svg.append("use")
	.attr("class", "stroke")
	.attr("xlink:href", "#sphere");

	svg.append("use")
	.attr("class", "fill")
	.attr("xlink:href", "#sphere");

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule graticule_" + name)
	.attr("d", path);

	function updateSmall(difference) {
	// if (lastStart == 'NA' \|\| Date.now() - lastStart > 80) {
	resetDrag()
	//lastStart = Date.now();
	var k = projectionSmall.rotate()
	projectionSmall.rotate([k[0] + difference.x / 136 * 90, k[1] - difference.y, k[2]])
	state.latLon[name] = {
	lon: -projectionSmall.rotate()[0],
	lat: -projectionSmall.rotate()[1]
	}

	d3.selectAll(".graticule_" + name).attr("d", path);
	d3.selectAll(".land_" + name).attr("d", path);

	updateLarge(largeMapObjects, name, projectionSmall.rotate(), 0)
	updateHash()
	// }
	}

	function resetDrag() {
	dragDistance = {
	x: 0,
	y: 0
	};
	}

	//var lastStart = 'NA';
	var dragDistance = {
	x: 0,
	y: 0
	};
	var drag = d3.behavior.drag()
	.on("dragstart", function() {
	d3.event.sourceEvent.preventDefault();
	})
	.on("drag", function() {
	dragDistance.x = dragDistance.x + d3.event.dx;
	dragDistance.y = dragDistance.y + d3.event.dy;
	updateSmall(dragDistance)
	})
	.on("dragend", function() {
	lastStart = 'NA'
	updateSmall(dragDistance)
	resetDrag()
	});

	svg.call(drag);


	return {
	"svg": svg,
	"projection": projectionSmall,
	"path": path,
	"graticule": graticule,
	"lat": lat,
	"lon": lon
	}

	}


	var largeSvg = mainSVG.append("g")
	.attr('transform', 'translate(' + (2 * padding + width) + ',' + (margin.top) + ')');


	largeSvg.append('rect')
	.attr("height", largeHeight - 4 * padding)
	.attr("x", 2 * padding)
	.attr("y", 2 * padding)
	.attr("width", largeWidth - 4 * padding)
	.attr("fill", "none")
	.attr("stroke", "black")

	var largeMapObjects = []
	for (var i = 0; i < 2; i++) {
	largeMapObjects[i] = setUpLargeMaps(state.latLon[i].lat, state.latLon[i].lon, i, largeSvg)
	}

	function setUpLargeMaps(lat, lon, name, svg) {
	var center = [-lon, -lat]

	var projectionLarge = d3.geo.azimuthalEqualArea()
	.translate([largeWidth / 2, largeHeight / 2])
	.scale(state.scale)
	.center([0, 0])
	.clipAngle(180 - 1e-3)
	.clipExtent([
	[2 * padding, 2 * padding],
	[largeWidth - 2 * padding, largeHeight - 2 * padding]
	])
	.rotate(center)
	.precision(.7);

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


	return {
	"svg": svg,
	"projection": projectionLarge,
	"path": path,
	"lat": lat,
	"lon": lon
	}

	}

	// need to set update function
	function updateSmallRotate(mapObject, name, newRotate, transitionDuration) {

	d3.selectAll(".graticule_" + name)
	.transition()
	.duration([transitionDuration])
	.attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));

	d3.selectAll(".land_" + name)
	.transition()
	.duration([transitionDuration])
	.attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));
	}

	// need to set update function
	function updateLarge(mapObject, name, newRotate, transitionDuration) {
	d3.selectAll(".large_land_" + name)
	.transition().duration([transitionDuration])
	.attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));;
	d3.selectAll(".boundary_" + name)
	.transition().duration([transitionDuration])
	.attrTween("d", arcTween(mapObject[name].path, mapObject[name].projection, newRotate));;
	}

	function updateLargeScale(mapObjects, newScale) {
	for (var i = 0; i < 2; i++) {
	mapObjects[i].projection.scale(newScale)
	d3.selectAll(".large_land_" + i).attr("d", mapObjects[i].path);
	d3.selectAll(".boundary_" + i).attr("d", mapObjects[i].path);
	}
	}

	function addCenterBox(svg) {
	var distance = zoomToBoxScale(state.scale);
	svg.append("rect")
	.attr("x", width / 2 - distance)
	.attr("y", height / 2 - distance)
	.attr("width", distance * 2)
	.attr("height", distance * 2)
	.attr("stroke", "black")
	.attr("fill", "none")
	.attr("class", "littleBox")
	}

	function updateCenterBox(distance) {
	d3.selectAll(".littleBox")
	.attr("x", width / 2 - distance)
	.attr("y", height / 2 - distance)
	.attr("width", distance * 2)
	.attr("height", distance * 2)
	}

	d3.json("world-110m.json", function(error, world) {
	for (var i = 0; i < mapObjects.length; i++) {
	svg = mapObjects[i].svg;
	svg
	.insert("path", ".graticule" + i)
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land land_" + i)
	.attr("d", mapObjects[i].path);

	addCenterBox(svg, [mapObjects[i].lon, mapObjects[i].lat], mapObjects[i].projection)
	}

	for (var i = 0; i < 2; i++) {
	svg = largeMapObjects[i].svg.append('g').attr("class", "large_" + name);
	svg.insert("path", ".large_graticule_" + i)
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "large_land_" + i)
	.attr("d", largeMapObjects[i].path);

	svg.insert("path", ".large_graticule" + i)
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) {
	return a !== b;
	}))
	.attr("class", "boundary boundary_" + i)
	.attr("d", largeMapObjects[i].path);
	}

	});

	// buttons
	d3.selectAll("button").on("click", function() {
	state.latLon[0] = countries[this.name.split(",")[0]];
	state.latLon[1] = countries[this.name.split(",")[1]];

	// update small maps with new rotation
	updateSmallRotate(mapObjects, 0, [-state.latLon[0].lon, -state.latLon[0].lat, 0], transitionDuration)
	updateSmallRotate(mapObjects, 1, [-state.latLon[1].lon, -state.latLon[1].lat, 0], transitionDuration)
	// update large maps
	updateLarge(largeMapObjects, 0, [-state.latLon[0].lon, -state.latLon[0].lat, 0], transitionDuration)
	updateLarge(largeMapObjects, 1, [-state.latLon[1].lon, -state.latLon[1].lat, 0], transitionDuration)
	// update hash
	updateHash()
	})

	// transition
	function arcTween(path, projection, new3Rotation) {
	return function(d, i, a) {
	var interpolate = d3.interpolate(projection.rotate(), new3Rotation);
	return function(t) {
	projection.rotate(interpolate(t));
	return path(d);
	}
	}
	}

	// slider
	var zoomRange = [220, 2000]

	var zoomToBoxScale = d3.scale.linear().domain([470, 2000]).range([80, 20])

	var slider = d3.select("#tool")
	.append("p")
	.append("input")
	.attr("type", "range")
	.style("margin-left", "750px")
	.attr("value", function(d) {
	return state.scale
	})
	.attr("min", zoomRange[0])
	.attr("max", zoomRange[1])
	.attr("step", (zoomRange[1] - zoomRange[0]) / 400)
	.on("input", slided);

	function slided(d) {
	state.scale = d3.select(this).property("value");
	updateLargeScale(largeMapObjects, state.scale);
	updateCenterBox(zoomToBoxScale(state.scale))
	updateHash()
	}