Skip to content

Instantly share code, notes, and snippets.

@wboykinm
Last active December 12, 2015 03:48
Show Gist options
  • Save wboykinm/4709572 to your computer and use it in GitHub Desktop.
Save wboykinm/4709572 to your computer and use it in GitHub Desktop.
What the XYZ?
<DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right:300px; left:0; }
#map-ui {
position:absolute;
top:50px;left:10px;
z-index:100;
}
#map-ui ul {
list-style:none;
margin:0;padding:0;
}
#map-ui a {
font-size:14px;
background:#FFF;
color:#3C4E5A;
display:block;
margin:0;padding:0;
border:1px solid #BBB;
min-width:138px;
padding:10px;
text-decoration:none;
-webkit-border-radius:8px;
border-radius:8px;
}
#map-ui a.active {
background:#3887BE;
border-color:#3887BE;
color:#FFF;
}
</style>
</head>
<body>
<div id='map'>
<!-- Start mapbox watermark --> <a href="http://mapbox.com" target="_blank" style=" position:absolute; left:5px; bottom:25px; z-index:99999; display:block; width:65px; height:20px; background-position:0px -30px; text-indent:-9999px; overflow:hidden; background-repeat:no-repeat; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAyCAMAAADWQ11hAAADAFBMVEX///8kJCQgICAgICAAAAAAAADR0dGmpqbp6embm5v09PTg4OAgICAAAADp6ekgICDn5+fq6uohISH////9/f319fX///8fHx/+/v7m5uYAAAAgICAhISH////r6+u5ubkAAAAAAAAgICAAAAAAAAD09PT39/f///8AAAD8/Pz8/PwAAAD////MzMz6+voAAAD8/Pz///8hISEAAAAfHx////////8AAADp6ekfHx+Li4sAAAD9/f3p6en9/f1hYWH7+/vu7u79/f0AAADz8/MAAADz8/P4+PiYmJjx8fHX19f7+/v8/Pzv7+/j4+Pk5OTm5ubm5uahoaH///8gICD5+fno6Ojd3d2YmJj8/Pz///8AAACysrJVVVVMTEy3t7d2dnbe3t7y8vLGxsbGxsb4+PgAAAC9vb2NjY2ioqL29vb5+fnBwcHLy8tjY2O1tbX///+1tbUwMDCzs7MAAAD39/fs7OzOzs5HR0fk5OT5+fna2tq3t7eTk5MAAAD9/f3Ozs7X19cAAADe3t4UFBTv7+/o6Ojm5uYAAAC8vLzs7Ozq6uoAAADy8vL29vaCgoLq6urT09Pi4uL19fXt7e3l5eXj4+Pg4ODi4uKenp729vbk5OTX19dzc3P6+vr///+pqalNTU06Ojq4uLhxcXHKysrj4+Pp6ekAAADMzMwAAADb29vHx8f6+voAAACEhISkpKTJycnr6+vi4uIpKSnJycnj4+Pp6ekAAAC0tLQvLy+vr6////+srKxcXFzGxsa9vb34+Pj29vaioqKJiYmqqqoGBgb5+fm9vb28vLzw8PAAAADz8/P7+/sAAAAAAADq6uoAAAAkJCQODg7h4eH+/v7///8HBwfExMQsLCz////9/f0XFxf6+vrGxsb////R0dF0dHSzs7MtLS1VVVWpqan////5+fmPj4/Y2Njq6ur29vakpKTk5OTn5+fn5+fm5ubv7+/29vbq6urU1NTx8fGTk5P19fXz8/MAAADw8PDt7e3BwcEAAAD///////8sCe0qAAAA/3RSTlMAHMXgBAfNh+Rp8tupS7jJYdG0/vwyGGr9RwaHZAnoIQEhqhsD8fQCR/rjRBUF9g77CmYk0yITHeSiaAU5O/14Ruj6Au0N8fF03M6i5+t1wtjgqiTV67PYkvASJ5E2S7leS++XvvUtFSFa8vaxNkshBqkwfzwbL8sQ3MqvVDU187+YGnkYx5YUEmq8dwnw73LdyqDn6WK+zN6O6qzTju8PkShUrUZbnMIgfRiPvPU0NFqcydwZxy0XOXMmlQQlUDGq9vJSDQMo8r6R7UHi+EZjzEoVSVT+A0UeXQ37C/kbFl9WtmcqkhHwfdOt65Xf1L1m6emcyt1v8PALd7yMFgHZFrZPAAADUElEQVRIx+3UZ0wUQRQH8Ad3tIMTZRAQpAjCAWIXjA0RIzaiYokFCYoFRaxfFAsW7BDsGkRBsWE0scSK2GIFxX6W2HvBhgoay/2d3buTwxx3JJDoB96HmcnOm9/MzswuUXVUx/8fUke7vnaOUuOJJjYmOtXfiqfE1sVW4mncsZGYcsDEVGKjp9NRUldK0roSR+OrMeWOWOjptLMV1iG1taMKOeUo1NdFrFxaUIWccpQ/q2lVOUa7N80q91KakypvlopusXBvWrRqZmrcMXjgulNV4vrpODZV8VEYnqU6quOfxGn3WJW6dXt8ff0po2LdY40x+8GGio3lQBe9GR17AWjUc7pBxpyh+CavDygBC5W+DDNL+NwHnBYZZDBG2YNItRdjYEH6Gdbu3ow9iJEaZPb4dc6kG4hYrWFcHRwcXIl4GaBdTW1efcUu9YimYvkwQJ3rqmVWxWNr7kW0riEwuUnFTnwr1qhO8RLnth3QMhMKvPfx9IPphVibvoByvJXJRIM+scFapuazuLufscxZYBpeAZrIRsCarGAv8wH8HglMyIuQH9jEs4+PAOyB1OP0ivnVpsXoP/cPQ0d4+mYSmNkIGxbVcrrIvPfKHt0NcQ84o2QMd7cQNVyKhMM5hxPQ60zKTtY1GanHqJS5Zol4D4Exi8N2/qyOyNTiGz+lH/vJmRNvJ1oHOyXRbtiP5/1H7XGKcooYkEY6DJW4bSSB2YVGTXUZoh1slnpvFpawIo88fBAHfUAeUWvgS0oZxvksiUyUMjSoLDMfOzUnRUWY8RzzxEHzsIF3BaPwRRlGDM7Mycf3MsyEDDzXMKqXiBoCFsibgQyPFe2Cgy1RQy8jHYCMkJulTFB3rJyUIjCKtt2Zm1fz15gaSH2mwrxl5gpsOnYSH/UxqsjzDDP9w0Um1N+fIay9M19NuP9AJ+bTvr4iKwIYCLzLojewNvFIQ8FB9eBo76EaZnbYEqKR6ye7yWSy/eK9+WYdfacxmZnzB/n9nzxtzK/i9d6vO6zrfavN2LiV4xTUabhsmnrwBV9nDfNLHsnLTiMbyOXyBmTFEuRXD9UTvnDhga/Y5OGVeClxDlFz+QXht5It9zX8A9GcVGWjipjHMdMUVcBEXk6sePJvwClGj9yI0yQAAAAASUVORK5CYII='); ">MapBox</a> <!-- End mapbox watermark -->
<div id='map-ui'>
<ul>
<li><a href='#' id='reference'>Toggle Labels</a></li>
</ul>
</div>
</div>
<div style="z-indez:99;background-color:#F2F2F2;float:right;width:300px;height:100%;overflow:scroll;">
<div style="padding:5px;font-size:small">
<h1>Census Dotmap</h1>
<p><a href="store.html">Download or buy a poster</a></blink>
<h3>What's all this?</h3>
<p>This is a map of every person counted by the 2010 US, 2011 Canadian, and 2010 Mexican censuses. The map has <b>454,064,098</b> dots - one for each person.</p>
<h3>Why?</h3>
<p>I wanted an image of human settlement patterns unmediated by proxies like city boundaries, arterial roads, state lines, &amp;c. Also, it was an interesting challenge.</p>
<h3>Who is responsible for this?</h3>
<p>The US, Canadian, and Mexican censuses, mostly. I made the map. I'm <a href="https://twitter.com/ewedistrict">Brandon Martin-Anderson</a>, from the <a href="http://cp.media.mit.edu/">MIT Media Lab</a>. <a href="https://twitter.com/kieran">Kieran Huggins</a> came to the rescue with spare server capacity and technical advice once this took off. <a href="https://twitter.com/vtcraghead">Bill Morris</a> collected and formatted data from the Mexican census.</p>
<h3>How?</h3>
<p>I wrote a Python script to generate points from US Census block-level counts, and then generated the tiles with Processing. Here's <a href="methods.html">more detail for the interested</a>.</p>
<h3>I don't see dots. I see smudges.</h3>
<p>The dots are very small. Try zooming in.</p>
<h3>Nobody lives in Central Park/Pier 12/County Lockup/Abandoned Themepark.</h3>
<p>The census reported that someone lived there.</p>
<h3>This says someone lives in the middle of a lake.</h3>
<p>The census reported that someone lives in a block which includes a lake, and that's where their dot was randomly placed. Also, some people live in the middle of lakes.</p>
<h3>Can I use this?</h3>
<p>The dotmap tiles are a simple expression of un-copyrighted data; I release them to the public domain.<br/><a rel="license" href="http://creativecommons.org/publicdomain/mark/1.0/">
<img src="http://i.creativecommons.org/p/mark/1.0/80x15.png"
style="border-style: none;" alt="Public Domain Mark" />
</a></p>
</div>
</div>
<script>
//Mapbox.js implementation
var m = mapbox.map('map');
m.addLayer(new MM.TemplatedLayer('http://mt{S}.bmander.com/tiles/{Z}/{X}/{Y}.png', [0, 1, 2, 3]));
var reference = mapbox.layer().id('landplanner.map-mcowljes');
m.addLayer(reference);
m.ui.attribution.add().content('Reference Data by Mapbox, <a href="http://openstreetmap.org">&copy; OpenStreetMap Contributors</a>.');
m.ui.zoomer.add();
m.ui.zoombox.add();
m.ui.hash.add();
m.zoom(4).center({ lat: 40, lon: -100 });
m.setZoomRange(4,14);
m.disableLayerAt(1);
document.getElementById('reference').onclick = function() {
(!reference.enabled) ? reference.enable() : reference.disable();
this.className = reference.enabled ? 'active' : '';
return false;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment