block by zanarmstrong c72c1f57ac897e613ada

Which is Bigger? SVG version

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="overlay.css">
<link href='//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="Europe,Brazil">Europe vs Brazil</button><button name="US,Australia">United States vs Australia</button><button name="South_America,Greenland">South America vs Greenland</button><button name="Brazil,US">Brazil vs United States</button><button name="Africa,North_America">Africa vs North America</button><button name="North_Africa,Russia">Africa vs Russia</button><button name="Saudi_Arabia,Alaska">Saudi Arabia vs Alaska</button><button name="Europe,Antarctica">Europe vs Antarctica</button></div>
<h3>Drag on the small world maps to compare different parts of the world.</h3>
</div>
<div id="tool"></div>
<br>
<div id="longDesc">
<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="//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="//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>
<div id="testMobile">
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//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: 20px;
  font-size: 12px;
  overflow: hidden; 
  text-overflow: ellipsis;
}

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

#longDesc {
  margin-left: 50px;
  width: 905px;
}

#tool {
  margin-left: 50px;
  width: 905px;
}

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

.fill {
  fill: #fff;
}

.mainSVG {
}

.g_0 {
  touch-action: none;
}

.g_2 {
  touch-action: none;
}


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

.land_0 {
  fill: black;
  opacity: .8;
  touch-action: none;
}

.land_1 {
  fill: lightgreen;
  opacity: .8;
  touch-action: none;
}

.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;
}

.largeBackgroundRect {
  touch-action: none;
  fill-opacity: 0;
  stroke-opacity: 1;
  stroke: black;
  /*touch-action: none;*/
}

@media screen and (max-device-width: 480px) and (orientation: portrait){
  #testMobile { display: none; }

}

@media screen and (max-device-width: 640px) and (orientation: landscape){
  #testMobile { display: none; }

}

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

// set up variables
var width = 300,
  height = 300,
  largeWidth = 600,
  largeHeight = 600;

var margin = {
  top: 0
}

comparisons = {
  "Sweden,Madagascar": {
    scale: 1120,
    latLon: [{
      lat: 62.6,
      lon: 16.3
    }, {
      lat: -19,
      lon: 46.7
    }]
  },
  "Australia,Antarctica": {
    scale: 470,
    latLon: [{
      lat: -27,
      lon: 130
    }, {
      lat: -90,
      lon: 0
    }]
  },
  "Europe,Brazil": {
    scale: 527,
    latLon: [{
      lat: 56.44,
      lon: 17.1
    }, {
      lat: -6.07833,
      lon: -53.2052
    }]
  },
  "US,Australia": {
    scale: 640,
    latLon: [{
      lat: 35.65,
      lon: -97.24
    }, {
      lat: -27,
      lon: 130
    }]
  },
  "South_America,Greenland": {
    scale: 458,
    latLon: [{
      lat: -15.97,
      lon: -52.87
    }, {
      lat: 65.88,
      lon: -42.21
    }]
  },
  "Brazil,US": {
    scale: 360,
    latLon: [{
      lat: -16.7833,
      lon: -53.2052
    }, {
      lat: 35.65,
      lon: -97.24
    }]
  },
  "Africa,North_America": {
    scale: 350,
    latLon: [{
      lat: 6.52865,
      lon: 20.3586336
    }, {
      lat: 48.2392291,
      lon: -98.9443219
    }]
  },
  "North_Africa,Russia": {
    scale: 470,
    latLon: [{
      lat: 15.0,
      lon: 18.82
    }, {
      lat: 60.65,
      lon: 95.995
    }]
  },
  "Saudi_Arabia,Alaska": {
    scale: 713,
    latLon: [{
      lat: 22.389,
      lon: 46.59
    }, {
      lat: 64.23,
      lon: -149.862
    }]
  },
  "Europe,Antarctica": {
    scale: 454,
    latLon: [{
      lat: 56.44,
      lon: 17.1
    }, {
      lat: -90,
      lon: 0
    }]
  }
}

// use/manage hash fragment and state
var state = {
  scale: 450,
  latLon: [{
    lat: 6.52865,
    lon: 20.3586336
  }, {
    lat: 48.2392291,
    lon: -98.9443219
  }]
}

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 mobile = false;
if (document.getElementById("testMobile").offsetWidth <= 0) {
  mobile = true;
}

// set upvariables
var padding = 5;
var transitionDuration = 1000;

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

var mapObjects = []

// set up ranges/scales
var zoomRange = [220, 1600]
var zoomToBoxScale = d3.scale.linear().domain([470, 2000]).range([80, 20]);

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

slider.property("value", state.scale)

function slided(d) {
  var duration = 0;
  updateCenterBoxSize(zoomToBoxScale(state.scale), zoomToBoxScale(d3.select(this).property("value")), duration)

  state.scale = d3.select(this).property("value");
  updateLargeScale(largeMapObjects, state.scale, duration);

  updateHash()
}

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

// set up small maps
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) + ')')
    .classed("g_" + name, true);

  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);



  svg.call(dragSetupSmall(name));
  // end drag behavior setup

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

}

// set up large maps
var largeSvg = mainSVG.append("g").attr("class", "largeSvg")
  .attr('transform', 'translate(' + (2 * padding + width) + ',' + (margin.top) + ')')

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
  }

}


d3.json("world-110m.json", function(error, world) {
  largeMapObjects.data = world;
  // use world data to set up small maps
  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)
  }

  // use world data to set up large maps
  for (var i = 0; i < 2; i++) {
    svg = largeMapObjects[i].svg.append('g').attr("class", "large_" + i);
    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);
  }

  // append rectangle for large box
  largeSvg.append('rect')
    .attr("height", largeHeight - 4 * padding)
    .attr("x", 2 * padding)
    .attr("y", 2 * padding)
    .attr("width", largeWidth - 4 * padding)
    .attr("class", "largeBackgroundRect")
  if (!mobile) {
    d3.select(".largeSvg").call(dragSetupLarge())
  }
  // do an immediate update (in case safari) - not best practice, need to fix
  updateLargeRotation(largeMapObjects, 0, largeMapObjects[0].projection.rotate(), 0)
  updateLargeRotation(largeMapObjects, 1, largeMapObjects[1].projection.rotate(), 0)
});

// adjustable box sizes on small worlds
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")

}

// might be nice to combine these two drag functions in the future, but ok for now
function dragSetupSmall(name) {
  function resetDrag() {
    dragDistance = {
      x: 0,
      y: 0
    };
  }

  var dragDistance = {
    x: 0,
    y: 0
  };

  return 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;
      updateRotateBasedOnSmallMapPan(dragDistance, name, 'drag')
      resetDrag()
    })
    .on("dragend", function() {
      updateRotateBasedOnSmallMapPan(dragDistance, name, 'dragend')
      resetDrag()
    })
}

var count = 0;

function dragSetupLarge() {

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

  var dragDistance = {
    x: 0,
    y: 0
  };

  return d3.behavior.drag()
    .on("drag", function() {
      dragDistance.x = dragDistance.x + d3.event.dx;
      dragDistance.y = dragDistance.y + d3.event.dy;
      updateRotateBasedOnLargeMapPan(dragDistance, 0, 'na')
      updateRotateBasedOnLargeMapPan(dragDistance, 1, 'na')
      resetDrag()
    })
    .on("dragend", function() {
      updateRotateBasedOnLargeMapPan(dragDistance, 0, 'na')
      updateRotateBasedOnLargeMapPan(dragDistance, 1, 'na')
      resetDrag()
    });

}

// update functions
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;
  slider.property("value", state.scale)
}

function pixelDiff_to_rotation_large(projection, pxDiff) {
  var k = projection.invert([largeWidth / 2 - pxDiff.x, largeHeight / 2 - pxDiff.y])
  return [-k[0], -k[1], 0]
}

function pixelDiff_to_rotation_small(projection, pxDiff) {
  var k = projection.rotate()
  return ([k[0] + pxDiff.x / 136 * 90, k[1] - pxDiff.y, k[2]])
}

function updateStateRotation(rotateCoord, name) {
  state.latLon[name] = {
    lon: rotateCoord[0],
    lat: rotateCoord[1]
  }
}

// currently not used
function updateLargeRotationDuringDrag(map, name, newRotate, transitionDuration) {
  d3.selectAll(".large_land_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", rotationTween(map[name].path, map[name].projection, newRotate));
  d3.selectAll(".boundary_" + name).transition().duration([transitionDuration]).remove();
}

// currently not used
function updateLargeRotationEndDrag(map, name, newRotate, transitionDuration) {
  map[name].projection.rotate(newRotate)
  d3.select(".large_" + name).insert("path", ".large_graticule" + name)
    .datum(topojson.mesh(map.data, map.data.objects.countries, function(a, b) {
      return a !== b;
    }))
    .attr("class", "boundary boundary_" + name)
    .transition().duration([500])
    .attr("d", map[name].path);
}

function updateLargeRotation(map, name, newRotate, transitionDuration) {
  d3.selectAll(".large_land_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", rotationTween(map[name].path, map[name].projection, newRotate));
  d3.selectAll(".boundary_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", rotationTween(map[name].path, map[name].projection, newRotate));
}


function updateLargeRotationAndScale(map, name, newRotate, newScale, transitionDuration) {
  d3.selectAll(".large_land_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", rotationAndScaleTween(map[name].path, map[name].projection, newRotate, newScale))
  d3.selectAll(".boundary_" + name)
    .transition().duration([transitionDuration])
    .attrTween("d", rotationAndScaleTween(map[name].path, map[name].projection, newRotate, newScale))
}


function updateSmallRotation(mapObject, name, newRotate, transitionDuration) {
  if (transitionDuration == 0) {
    mapObject[name].projection.rotate(newRotate)
    d3.selectAll(".graticule_" + name).attr("d", mapObject[name].path);
    d3.selectAll(".land_" + name).attr("d", mapObject[name].path);
  } else {
    d3.selectAll(".graticule_" + name)
      .transition()
      .duration([transitionDuration])
      .attrTween("d", rotationTween(mapObject[name].path, mapObject[name].projection, newRotate));

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


function updateLargeScale(maps, newScale, duration) {
  if (duration > 0) {
    for (var i = 0; i < 2; i++) {
      d3.selectAll(".large_land_" + i)
        .transition().duration([duration])
        .attrTween("d", scaleTween(maps[i].path, maps[i].projection, newScale));
      d3.selectAll(".boundary_" + i)
        .transition().duration([duration])
        .attrTween("d", scaleTween(maps[i].path, maps[i].projection, newScale));
    }
  } else {
    for (var i = 0; i < 2; i++) {
      maps[i].projection.scale(newScale)
      d3.selectAll(".large_land_" + i).attr("d", maps[i].path);
      d3.selectAll(".boundary_" + i).attr("d", maps[i].path);
    }
  }
}

function updateCenterBoxSize(oldDistance, newDistance, duration) {
  if (duration == 0) {
    d3.selectAll(".littleBox")
      .attr("x", width / 2 - newDistance)
      .attr("y", height / 2 - newDistance)
      .attr("width", newDistance * 2)
      .attr("height", newDistance * 2)
  } else {
    d3.selectAll(".littleBox")
      .transition().duration([duration])
      .attrTween("x", distanceTween(width / 2 - oldDistance, width / 2 - newDistance))
      .attrTween("y", distanceTween(height / 2 - oldDistance, height / 2 - newDistance))
      .attrTween("width", distanceTween(2 * oldDistance, 2 * newDistance))
      .attrTween("height", distanceTween(2 * oldDistance, 2 * newDistance))
  }
}

// updates on drag
function updateRotateBasedOnSmallMapPan(pixelDifference, name, stage) {
  var projection = mapObjects[name].projection;
  projection.rotate(pixelDiff_to_rotation_small(projection, pixelDifference))

  updateView(projection.rotate(), "na", name, 0, 'na')
}

function updateRotateBasedOnLargeMapPan(pixelDifference, name, stage) {
  var projection = largeMapObjects[name].projection;
  var newRotate = pixelDiff_to_rotation_large(projection, pixelDifference)
  updateView(newRotate, "na", name, 0, stage)
}

function updateView(newRotate, newScale, name, duration, stage) {
  updateStateRotation(newRotate, name)

  updateSmallRotation(mapObjects, name, newRotate, duration)

  if (newScale == 'na') {
    if (stage == 'drag') {
      updateLargeRotationDuringDrag(largeMapObjects, name, newRotate, duration)
    } else if (stage == 'dragend') {
      updateLargeRotationEndDrag(largeMapObjects, name, newRotate, duration)
    } else {
      updateLargeRotation(largeMapObjects, name, newRotate, duration)
    }
  } else {
    updateLargeRotationAndScale(largeMapObjects, name, newRotate, newScale, duration)
    if (name == 0) {
      updateCenterBoxSize(zoomToBoxScale(state.scale), zoomToBoxScale(newScale), duration)
      state.scale = newScale
    }

  }

  updateHash()
}

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

  updateView([-state.latLon[0].lon, -state.latLon[0].lat, 0], comparisons[this.name].scale, 0, transitionDuration)
  updateView([-state.latLon[1].lon, -state.latLon[1].lat, 0], comparisons[this.name].scale, 1, transitionDuration)
})

// transition 
function rotationTween(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);
    }
  }
}

function scaleTween(path, projection, newScale) {
  return function(d, i, a) {
    var interpolate = d3.interpolate(projection.scale(), newScale);
    return function(t) {
      projection.scale(interpolate(t));
      return path(d);
    }
  }
}

function distanceTween(oldDist, newDist) {
  return function(d, i, a) {
    var interpolate = d3.interpolate(oldDist, newDist);
    return function(t) {
      return interpolate(t);
    }
  }
}

function rotationAndScaleTween(path, projection, new3Rotation, newScale) {
  return function(d, i, a) {
    var interpolateScale = d3.interpolate(projection.scale(), newScale);
    var interpolateRotate = d3.interpolate(projection.rotate(), new3Rotation);
    return function(t) {
      projection.scale(interpolateScale(t));
      projection.rotate(interpolateRotate(t));
      return path(d);
    }
  }
}