jueyang/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>

<style type='text/css'>
body {
  background:#000;
  color:#fff;
  font-family: 'Inconsolata';
  margin:0;
}

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

em {
  font-family:'Georgia',serif;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 800ms;
}

strong {
  font-weight:normal;
  color:#FFF707;
}

a {
  color:#FFF707;
  text-decoration:none;
}

div {
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:0;
  left:0;
}

</style>
<script type='text/javascript'>
window.onload = function() {
    var s = document.getElementsByTagName('div'), cur = 0, ti;
    if (!s) return;
    function go(n) {
        cur = n;
        var i = 1e3, e = s[n], t;
        document.body.className = e.dataset.bodyclass || '';
        for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
        e.style.display = 'inline';
        e.style.fontSize = i + 'px';
        if (e.firstChild && e.firstChild.nodeName === 'IMG') {
            document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
            e.firstChild.style.display = 'none';
            if ('classList' in e) e.classList.add('imageText');
        } else {
            document.body.style.backgroundImage = '';
            document.body.style.backgroundColor = e.style.backgroundColor;
        }
        if (ti !== undefined) window.clearInterval(ti);
        t = parseInt(e.dataset.timeToNext || 0, 10);
        if (t > 0) ti = window.setTimeout(fwd, (t * 1000));
        while (
            e.offsetWidth > window.innerWidth ||
            e.offsetHeight > window.innerHeight) {
            e.style.fontSize = (i -= 2) + 'px';
            if (i < 0) break;
        }
        e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
        if (window.location.hash !== n) window.location.hash = n;
        document.title = e.textContent || e.innerText;
    }
    document.onclick = function() { go(++cur % (s.length)); };
    function fwd() { go(Math.min(s.length - 1, ++cur)); }
    function rev() { go(Math.max(0, --cur)); }
    document.onkeydown = function(e) {
        if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
        if (e.which === 37 || e.which === 33 || e.which === 38) rev();
    };
    document.ontouchstart = function(e) {
        var x0 = e.changedTouches[0].pageX;
        document.ontouchend = function(e) {
            var x1 = e.changedTouches[0].pageX;
            if (x1 - x0 < 0) fwd();
            if (x1 - x0 > 0) rev();
        };
    };
    function parse_hash() {
        return Math.max(Math.min(
            s.length - 1,
            parseInt(window.location.hash.substring(1), 10)), 0);
    }
    if (window.location.hash) cur = parse_hash() || cur;
    window.onhashchange = function() {
        var c = parse_hash();
        if (c !== cur) go(c);
    };
    go(cur);
};
</script></head><body>
<div><h1 id="5-x-6-x-4">5 x 6 x 4</h1>
</div>
<div><p><a href="http://developmentseed.org/woodstock">120+ <em>maps</em></a></p>
</div>
<div><p><code>topojson -o tiny.json -- huge.shp</code></p>
</div>
<div><p><code>--simplify-proportion=0.2</code></p>
</div>
<div><pre><code>--id-property=District_1, district \
-e bin/legislative/il_house.csv \
-p rep=representative \
-p party=party
</code></pre></div>
<div><p><em>when</em> to join data</p>
</div>
<div><p><em>how much</em></p>
</div>
<div><p><em>what</em></p>
</div>
<div><p><a href="https://github.com/jueyang/mapmakers-cheatsheet">cheatsheet</a></p>
</div>
<div><p>if you so choose</p>
</div>
<div><p>&quot;are you going to reuse the geography on multiple datasets&quot;</p>
</div>
<div><p>&quot;is your data already bound to geography (eg. a property of your shapefile)&quot;</p>
<!-- http://gis.stackexchange.com/questions/70511/d3-for-maps-at-what-stage-to-bring-in-data-to-the-geo -->

</div>
<div><p><a href="https://gist.github.com/jueyang/02327737fe5210e6c3c7">script &amp; csv</a></p>
</div>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
	<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>

	<style type='text/css'>
	body {
	background:#000;
	color:#fff;
	font-family: 'Inconsolata';
	margin:0;
	}

	@-webkit-keyframes blinker {
	from { opacity: 1.0; }
	to { opacity: 0.0; }
	}

	em {
	font-family:'Georgia',serif;
	-webkit-animation-name: blinker;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	-webkit-animation-duration: 800ms;
	}

	strong {
	font-weight:normal;
	color:#FFF707;
	}

	a {
	color:#FFF707;
	text-decoration:none;
	}

	div {
	cursor:pointer;
	cursor:hand;
	position:absolute;
	top:0;
	left:0;
	}

	</style>
	<script type='text/javascript'>
	window.onload = function() {
	var s = document.getElementsByTagName('div'), cur = 0, ti;
	if (!s) return;
	function go(n) {
	cur = n;
	var i = 1e3, e = s[n], t;
	document.body.className = e.dataset.bodyclass \|\| '';
	for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
	e.style.display = 'inline';
	e.style.fontSize = i + 'px';
	if (e.firstChild && e.firstChild.nodeName === 'IMG') {
	document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
	e.firstChild.style.display = 'none';
	if ('classList' in e) e.classList.add('imageText');
	} else {
	document.body.style.backgroundImage = '';
	document.body.style.backgroundColor = e.style.backgroundColor;
	}
	if (ti !== undefined) window.clearInterval(ti);
	t = parseInt(e.dataset.timeToNext \|\| 0, 10);
	if (t > 0) ti = window.setTimeout(fwd, (t * 1000));
	while (
	e.offsetWidth > window.innerWidth \|\|
	e.offsetHeight > window.innerHeight) {
	e.style.fontSize = (i -= 2) + 'px';
	if (i < 0) break;
	}
	e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
	if (window.location.hash !== n) window.location.hash = n;
	document.title = e.textContent \|\| e.innerText;
	}
	document.onclick = function() { go(++cur % (s.length)); };
	function fwd() { go(Math.min(s.length - 1, ++cur)); }
	function rev() { go(Math.max(0, --cur)); }
	document.onkeydown = function(e) {
	if (e.which === 39 \|\| e.which === 34 \|\| e.which === 40) fwd();
	if (e.which === 37 \|\| e.which === 33 \|\| e.which === 38) rev();
	};
	document.ontouchstart = function(e) {
	var x0 = e.changedTouches[0].pageX;
	document.ontouchend = function(e) {
	var x1 = e.changedTouches[0].pageX;
	if (x1 - x0 < 0) fwd();
	if (x1 - x0 > 0) rev();
	};
	};
	function parse_hash() {
	return Math.max(Math.min(
	s.length - 1,
	parseInt(window.location.hash.substring(1), 10)), 0);
	}
	if (window.location.hash) cur = parse_hash() \|\| cur;
	window.onhashchange = function() {
	var c = parse_hash();
	if (c !== cur) go(c);
	};
	go(cur);
	};
	</script></head><body>
	<div><h1 id="5-x-6-x-4">5 x 6 x 4</h1>
	</div>
	<div><p><a href="http://developmentseed.org/woodstock">120+ <em>maps</em></a></p>
	</div>
	<div><p><code>topojson -o tiny.json -- huge.shp</code></p>
	</div>
	<div><p><code>--simplify-proportion=0.2</code></p>
	</div>
	<div><pre><code>--id-property=District_1, district \
	-e bin/legislative/il_house.csv \
	-p rep=representative \
	-p party=party
	</code></pre></div>
	<div><p><em>when</em> to join data</p>
	</div>
	<div><p><em>how much</em></p>
	</div>
	<div><p><em>what</em></p>
	</div>
	<div><p><a href="https://github.com/jueyang/mapmakers-cheatsheet">cheatsheet</a></p>
	</div>
	<div><p>if you so choose</p>
	</div>
	<div><p>"are you going to reuse the geography on multiple datasets"</p>
	</div>
	<div><p>"is your data already bound to geography (eg. a property of your shapefile)"</p>
	<!-- http://gis.stackexchange.com/questions/70511/d3-for-maps-at-what-stage-to-bring-in-data-to-the-geo -->

	</div>
	<div><p><a href="https://gist.github.com/jueyang/02327737fe5210e6c3c7">script & csv</a></p>
	</div>