/
raw.html
22 lines (22 loc) · 7.75 KB
/
raw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html><html lang="en"><head><meta charset="uft-8"><meta name="description" content="D3 introduction"><meta name="author" content="Francesco Occhipinti"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><!-- For syntax highlighting--><link rel="stylesheet" href="lib/css/zenburn.css"><style>.white h2, .white h3, .white p {
color: white;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
</style><!-- If the query includes 'print-pdf', use the PDF print sheet--><script>document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script><title><D3>introduction for BerlinJS visionaries</D3></title></head><body><div class="reveal"><div class="slides"><section><section><h3>Data visualization and interactivity — that gorgeous D3</h3><small>Francesco Occhipinti for Berlin JS, 18 July 2013</small></section><section data-background="data.png" data-state="white"><h2>what is it all about</h2></section><section><p>that's the buzz, baby</p><p class="fragment">and there is nothing you can do about it ...</p></section><section><p>but data are abstract</p><p class="fragment">while we human beings come from a world of sensible things</p></section><section><h3>sense making</h3><ul class="fragment fade-in"><li>Smell</li><li>Taste</li><li>Hearing</li><li>Touch</li><li>Sight</li></ul></section><section><h3>Hearing - data auralization</h3><a href="http://vimeo.com/23965023">listening to the Dow</a></section><section data-background="anfischer_indizes_2.jpg" data-state="white"><h3>Touch - data sculptures?</h3></section><section><h3>Sight - let's keep it simple</h3><a href="http://www.dashingd3js.com/why-data-visualizations">Anscombe's Quartet</a></section><section><h3>but time has elapsed...</h3><h4 class="fragment">the media is different</h4><p class="fragment">and it offers a small, disrupting feature</p><div class="fragment"><h2 class="fragment fade-out">crappy standards</h2></div><div class="fragment"><p class="fragment highlight-blue">interactivity</p></div><ul><li class="fragment"><a href="http://mbostock.github.io/d3/talk/20111116/iris-splom.html">brushing</a></li><li class="fragment">linked views</li><li class="fragment">something we still don't imagine</li></ul><p class="fragment">this will be a design problem, be aware</p></section><section><h3><a href="https://github.com/mbostock/d3/wiki/Gallery">examples
</a></h3><ul><li><a href="http://www.jasondavies.com/parallel-sets/">parallel sets</a></li><li><a href="http://bl.ocks.org/mbostock/4062045">force directed</a></li><li><a href="http://bl.ocks.org/mbostock/4060954">stream graph</a></li><li><a href="http://bl.ocks.org/mbostock/4063582">tree map</a></li><li><a href="http://mbostock.github.io/d3/talk/20111018/tree.html">collapsible tree</a></li><li><a href="http://mbostock.github.io/d3/talk/20111116/force-collapsible.html">collapsible force layout</a></li><li><a href="http://mbostock.github.io/d3/talk/20111116/bundle.html">hierarchical edge bundling</a></li></ul></section><section><h3><a href="food-table.csv">tables</a>- versus -<a href="http://exposedata.com/parallel/">strokes</a></h3></section></section><section><section><h3>d3</h3></section><section><h3>history</h3><ul><li>flare</li><li>protovis</li><li>d3</li></ul></section><section><h3>which kind of tool is d3?</h3><a href="http://bl.ocks.org/mbostock/1256572">show reel</a></section><section><h3>usability grounds</h3><p>usability research effort from Stanford and Berkeley
visualization groups
</p><p class="fragment">for example ...</p><p class="fragment roll-in"><a href="http://vis.berkeley.edu/papers/animated_transitions/">vis.berkeley paper</a>→<a href="http://bost.ocks.org/mike/constancy/">object constancy</a></p></section><section><h3>let's start</h3></section><section><h3>it's easy!</h3><pre class="fragment fade-in">d3.select('body').selectAll('.box').data(random(), function(d){return d.city;}).call(function(s){s.style('border', '1px solid black').transition().duration(duration).style('top', function(d, i){return 50+i*30;}).transition().duration(2*duration).style('width', function(d){ return d.value*200; });}).call(function(s){s.enter().append('div').attr('class', 'box').text(function(d){return d.city;}).style('top', function(d, i){return 50+i*30;}).transition().duration(duration).delay().style('width', function(d){return d.value*200;});}).call(function(s){s.exit().transition().duration(duration).style('top', 2000).remove();})
</pre></section><section><h3>the heart of d3</h3><p>selectAll, enter, exit</p><ul><li><a href="http://mbostock.github.io/d3/tutorial/circle.html">three little circles</a></li><li><a href="http://bost.ocks.org/mike/join/">thinking with joins</a></li><li><a href="http://bl.ocks.org/mbostock/3808234">general update pattern (letters)</a></li><li><a href="http://bost.ocks.org/mike/selection/">to deepen selections
</a></li></ul></section><section><h3>live coding</h3><p>a simple<a href="https://github.com/danse/d3-playground">d3 playground</a></p><ul><li>__data__</li><li>join -> <a href="http://bost.ocks.org/mike/selection/#key">key function</a></li></ul><p>inspired by<a href="http://www.ultrasaurus.com/sarahblog/2012/03/d3-js-experiments-in-the-console/">ultrasaurus experiments
</a></p></section><section><h3>don't be afraid of vectors</h3><p>convert to <a href="http://www.w3.org/TR/SVG/expanded-toc.html">vectors</a></p><p class="fragment"><pre><div style="top: 100; width: 234px; height: 20px">
Berlin
</div></pre></p><p class="fragment"><pre><g transform="translate(0, 100)">
<rect width="234" height="20"></rect>
<text>
Berlin
</text>
</g>
</pre></p></section></section><section><section><h3>how hard can it get?</h3><a href="http://mbostock.github.io/d3/talk/20111018/collision.html">anatomy of a force chart</a><p><small><a href="http://bl.ocks.org/mbostock/1804919">reference for custom gravity
</a></small></p></section><section><h3>it's an universe</h3><a href="https://github.com/mbostock/d3/wiki/API-Reference" class="fragment">the d3 interface
</a></section><section><h3>d3 sisters</h3><p><a href="http://bost.ocks.org/mike/chart/">d3 reusable graph format</a></p><ul><li>d3 plugins</li><li>nvd3</li><li><a href="https://github.com/trifacta/vega">vega</a></li><li><a href="http://square.github.io/crossfilter/">crossfilter</a></li></ul></section></section><section><section><h3>it's complicated</h3><ul><li class="fragment">interdisciplinary</li><ul><li class="fragment">programming</li><li class="fragment">design</li><li class="fragment">data analysis</li></ul><li class="fragment">innovative</li><ul><li class="fragment">technology</li><li class="fragment">concept</li><li class="fragment">purpose</li></ul><li class="fragment">big</li><ul><li class="fragment">just check the d3 doc</li></ul></ul><p class="fragment">developing this is like doing research...</p><p class="fragment">... in an interdisciplinary field</p></section><section><h4>thus, some kind of cooperation would help</h4><h3 class="fragment">Berlin visionaries?</h3><ul><li class="fragment">data visualization group, London<p class="fragment">— 780 visualizers</p></li><li class="fragment">data visualization group, Berlin<p class="fragment">— 2 visionaries on Monday</p><p class="fragment">— ~60 visionaries Yesterday</p><p class="fragment">— ~100 visionaries Today</p><p class="fragment">we can do better ...</p></li></ul></section><section><p>so join!</p><p>http://www.meetup.com/Data-Visualization-Berlin/</p></section><section><h3>thanks !</h3><h4 class="fragment">questions ?</h4></section></section></div></div></body></html>