wboykinm/index.html

## index.html
<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>
	<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, &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">© 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>