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
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 ...
David Dao @daviddao_
Recommended Readings
Book: Interactive Data Visualization for the Web by Scott Murray (2013)
Chapter 4 - 12
David Dao @daviddao_
Thank you for your attention
David Dao @daviddao_
BioJS Workshop - Introduction to D3
By David Dao
BioJS Workshop - Introduction to D3
- 826