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_

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

David Dao @daviddao_

David Dao @daviddao_

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

David Dao @daviddao_

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

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_

David Dao @daviddao_

  • Its use to guide and reassure a presenter, rather than to enlighten the audience

  • Its unhelpfully simplistic tables and charts

  • The outliner's causing ideas to be arranged in an unnecessarily deep hierarchy

  • Poor typography and chart layout

  • Simplistic thinking—from ideas being squashed into bulleted lists

Edward Tufte About Powerpoint

However Most charts are boring

Why?

David Dao @daviddao_

designer produces...

Visualization Workflow

David Dao @daviddao_

Developer has two days to make it...

Visualization Workflow

David Dao @daviddao_

Visualization Workflow

David Dao @daviddao_

"Ok designer, it's done :)"

Visualization Workflow

David Dao @daviddao_

Visualization Workflow

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_

Made with Slides.com