Introduction to interactive visualization

with d3

David Dao @daviddao_

First More JavaScript

JS functions are first class objects

Source: https://github.com/CS171/2014-lab1

David Dao @daviddao_

Javascript to the MAX

Source: https://github.com/CS171/2014-lab1

David Dao @daviddao_

D3 Helper Functions

Source: https://github.com/CS171/2014-lab1

David Dao @daviddao_

D3

Visualization

David Dao @daviddao_

DATA needs Information Visualization

David Dao @daviddao_

David Dao @daviddao_

What about Powerpoint?

David Dao @daviddao_

Death by Powerpoint

David Dao @daviddao_

Lets rerun the story with d3

More D3 Action

David Dao @daviddao_

Why is d3 so popular?

stands for Data-Driven-Documents

• NO WIDGETS, NO PRE-MADE VISUALIZATIONS, NO ENFORCED STRUCTURE TO OUR DATA

• instead powerful primitives

• API FOCUSES ON YOUR DATA

David Dao @daviddao_

D3's big idea

Visualization as theatre

David Dao @daviddao_

SELECTION OF ELEMENTS

Setup the stage

David Dao @daviddao_

.select()

David Dao @daviddao_

.selectAll()

David Dao @daviddao_

David Dao @daviddao_

Now some exercise

may i introduce the main actor of this evening ...

DATA CAN...

David Dao @daviddao_

Enter the stage

• AJAX response, data ready to display
• new price tick
• player appears on high-scores

David Dao @daviddao_

Act (update)

• price increases
• Reddit story voted down

David Dao @daviddao_

Exit the stage

• player falls off high-score table
• data filtered

David Dao @daviddao_

We Direct how data enter, update and exit..

but how do we connect data and the elements? 

David Dao @daviddao_

//Data can be numbers
var data = [1, 1, 2, 3, 5, 8];

//Data can be objects
var data = [
  {x: 10.0, y: 9.14},
  {x:  8.0, y: 8.14},
  {x: 13.0, y: 8.74},
  {x:  9.0, y: 8.77},
  {x: 11.0, y: 9.26}
];

Data are represented as arrays!

Selections are represented as arrays! coincidence? no!

DATA ↦ ELEMENTS

David Dao @daviddao_

.data()

David Dao @daviddao_

enter, update & exit

David Dao @daviddao_

.data(... ,key)

David Dao @daviddao_

Ok, enough its time for some hands-on d3

David Dao @daviddao_

that was only core d3 , However d3 is much more ...

https://github.com/mbostock/d3/wiki/Gallery

David Dao @daviddao_

Recommended Readings

Book: Interactive Data Visualization for the Web by Scott Murray (2013)

Free Online Version here

Chapter 4 - 12

David Dao @daviddao_

Thank you for your attention

David Dao @daviddao_