Data visualization and interactivity — that gorgeous D3

Francesco Occhipinti for Berlin JS, 18 July 2013

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

listening to the Dow

Touch - data sculptures?

Sight - let's keep it simple

Anscombe's Quartet

but time has elapsed...

the media is different

and it offers a small, disrupting feature

crappy standards

interactivity

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

this will be a design problem, be aware

examples

tables- versus -strokes

d3

history

  • flare
  • protovis
  • d3

which kind of tool is d3?

show reel

usability grounds

usability research effort from Stanford and Berkeley visualization groups

for example ...

vis.berkeley paperobject 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

live coding

a simpled3 playground

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?

anatomy of a force chart

reference for custom gravity

it's an universe

the d3 interface

d3 sisters

d3 reusable graph format

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 ?