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...
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="http://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="http://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="http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html">NYTimes corporate taxes visualization</a></p> | |
</div> | |
<div><p><a href="http://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="http://prag.ma/code/d3-cartogram/#netmigrate/2011">cartogram</a></p> | |
</div> | |
<div><p><a href="http://bl.ocks.org/almccon/b4b61fe3066cf4b99180269ebf6137e6">proportional symbol map</a></p> | |
</div> | |
<div><p><a href="http://dsl.richmond.edu/panorama/foreignborn/">foreign born map</a></p> | |
</div> | |
<div><p><a href="http://atlasofemotions.org">map of emotions</a></p> | |
</div> | |
<div><p><a href="http://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="http://bl.ocks.org/mbostock/346f4d967650b27c0511">a Mike Bostock block: chained transitions</a></p> | |
</div> | |
<div><p><a href="http://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> |