Alan McConchie
bellingham.codes
2016-12-01
about me:
@almccon (github)
@stamen (work)
data viz
NYTimes paths to win the election
NYTimes corporate taxes visualization
a Mike Bostock block: chained transitions
learn more…
<!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' />
<style type='text/css'>
body {
font-family: 'Helvetica';
letter-spacing:-5px;
background:#000;
background-size:100%;
color:#fff;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
em, a {
font-style:normal;
color:#8dbd0c;
}
a {
background: #34d0e7;
color:#000;
text-decoration:none;
}
img {
width:100%;
}
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><h2 id="d3-lightning-talk-slides">D3 lightning talk slides</h2>
<p>Alan McConchie</p>
<p>bellingham.codes</p>
<p>2016-12-01</p>
</div>
<div><p>about me:</p>
<p><a href="https://twitter.com/mappingmashups">@mappingmashups</a></p>
<p><a href="https://github.com/almccon">@almccon</a> (github)</p>
<p><a href="//stamen.com">@stamen</a> (work)</p>
</div>
<div><p><a href="https://d3js.org/">D3.js</a></p>
<!--
Stands for Data Driven Documents
Created by [Mike Bostock](https://github.com/mbostock)
-->
</div>
<div><p>data viz
<!--
Amazing for data viz!
--></p>
</div>
<div><p><a href="//www.nytimes.com/interactive/2016/upshot/clinton-trump-paths-to-win-election.html">NYTimes paths to win the election</a></p>
</div>
<div><p><a href="//www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html">NYTimes corporate taxes visualization</a></p>
</div>
<div><p><a href="//alignedleft.com/tutorials/d3/drawing-divs">binding data</a></p>
</div>
<div><p><a href="https://bost.ocks.org/mike/circles/">drawing svg</a></p>
</div>
<div><p><a href="https://www.jasondavies.com/maps/transition/">Maps</a></p>
<!--
*I* use it mostly for making maps
-->
</div>
<div><p><a href="//prag.ma/code/d3-cartogram/#netmigrate/2011">cartogram</a></p>
</div>
<div><p><a href="//bl.ocks.org/almccon/b4b61fe3066cf4b99180269ebf6137e6">proportional symbol map</a></p>
</div>
<div><p><a href="//dsl.richmond.edu/panorama/foreignborn/">foreign born map</a></p>
</div>
<div><p><a href="//atlasofemotions.org">map of emotions</a></p>
</div>
<div><p><a href="//bl.ocks.org">bl.ocks.org</a></p>
<!--
bl.ocks are functional code snippets
they are based on Github gists, with a specific file format
-->
</div>
<div><p><a href="//bl.ocks.org/mbostock/346f4d967650b27c0511">a Mike Bostock block: chained transitions</a></p>
</div>
<div><p><a href="//blockbuilder.org">blockbuilder.org</a></p>
<!--
bl.ocks can be a hassle to create or to fork
To make that easier, there's blockbuilder!
Fork any block you want, and modify it right in the browser!
-->
</div>
<div><p><a href="https://iros.github.io/d3-v4-whats-new">D3.v4</a></p>
<!--
Big changes are happening with d3 in the last few months...
d3.v4 is now fully modular
...but you'll have to rewrite most of your code. :(
-->
</div>
<div><p>learn more...</p>
<p><a href="https://www.dashingd3js.com/">https://www.dashingd3js.com/</a></p>
</div>