Data visualization and interactivity — that gorgeous D3

what is it all about

that's the buzz, baby

and there is nothing you can do about it ...

but data are abstract

while we human beings come from a world of sensible things

sense making

• Smell
• Taste
• Hearing
• Touch
• Sight

Hearing - data auralization

Touch - data sculptures?

Sight - let's keep it simple

but time has elapsed...

the media is different

and it offers a small, disrupting feature

• brushing
• linked views
• something we still don't imagine

this will be a design problem, be aware

examples

• parallel sets
• force directed
• stream graph
• tree map
• collapsible tree
• collapsible force layout
• hierarchical edge bundling

tables- versus -strokes

d3

history

• flare
• protovis
• d3

which kind of tool is d3?

usability grounds

usability research effort from Stanford and Berkeley visualization groups

for example ...

vis.berkeley paper→object constancy

let's start

it's easy!

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();})

the heart of d3

selectAll, enter, exit

• three little circles
• thinking with joins
• general update pattern (letters)
• to deepen selections

live coding

a simpled3 playground

• __data__
• join -> key function

inspired byultrasaurus experiments

don't be afraid of vectors

convert to vectors

<div style="top: 100; width: 234px; height: 20px">
    Berlin
</div>

<g transform="translate(0, 100)">
    <rect width="234" height="20"></rect>
    <text>
        Berlin
    </text>
</g>

how hard can it get?

reference for custom gravity

it's an universe

d3 sisters

d3 reusable graph format

• d3 plugins
• nvd3
• vega
• crossfilter

it's complicated

• interdisciplinary
• programming
• design
• data analysis
• innovative
• technology
• concept
• purpose
• big
• just check the d3 doc

developing this is like doing research...

... in an interdisciplinary field

thus, some kind of cooperation would help

Berlin visionaries?

• data visualization group, London

  — 780 visualizers

• data visualization group, Berlin

  — 2 visionaries on Monday

  — ~60 visionaries Yesterday

  — ~100 visionaries Today

  we can do better ...

so join!

http://www.meetup.com/Data-Visualization-Berlin/

thanks !

questions ?