Which is bigger: Africa or North America?

forked from zanarmstrong's block: Which is bigger: Africa or North America?

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="overlay.css">
<link href='https://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"><table><tr><td id="small0"></td><td id="large" rowspan="2"></td></tr><tr><td id="small1"></td></tr></table></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="https://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="https://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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="overlay.js"></script>

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://d3js.org/topojson.v1.min.js