Protein Prediction 2 - Exercise

Introduction to 

Interactive Data Visualization with d3

David Dao @daviddao_

Schedule

Oct 16  - Introduction, BioJS, Technology Fundamentals (HTML, CSS, SVG)

Oct 23  - Technology Fundamentals (JavaScript, Git)

Oct 30  - Introduction to Interactive Data Visualization with D3

Nov 06 - Visualization: Best Practices

Nov 13 - Project Proposal

Nov 20 - Supervised Team Meeting

Dec 03 - Supervised Team Meeting

Dec 17 - Supervised Team Meeting

Jan 08  - Final Project Presentation (Prof. Rost)

Jan 15  - Submission to BioJS, Documentation

David Dao @daviddao_

ReCAP: TECHNOLOGY FUNDAMENTALS

David Dao @daviddao_

David Dao @daviddao_

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

David Dao @daviddao_

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

David Dao @daviddao_

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

David Dao @daviddao_

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

David Dao @daviddao_

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

David Dao @daviddao_

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

David Dao @daviddao_

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

JS functions are first class objects

David Dao @daviddao_

Javascript to the MAX

David Dao @daviddao_

David Dao @daviddao_

D3 Helper Functions

D3

Visualization

David Dao @daviddao_

DATA needs Information Visualization

David Dao @daviddao_

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_

joke by @timruffles

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

David Dao @daviddao_

Visualization as theatre

SELECTION OF ELEMENTS

David Dao @daviddao_

Setup the stage

.select()

David Dao @daviddao_

.selectAll()

David Dao @daviddao_

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

David Dao @daviddao_

DATA CAN...

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!

David Dao @daviddao_

DATA ↦ ELEMENTS

.data()

David Dao @daviddao_

enter, update & exit

David Dao @daviddao_

David Dao @daviddao_

.data(... ,key)

Ok, enough its time for some hands-on d3

David Dao @daviddao_

homework 3

data set: Real Time posts from Reddit

Goal: create a small visualization (any kind)

git clone https://github.com/pp2-ex/homework-3.git

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

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

Free Online Version here

Chapter 4 - 12

David Dao @daviddao_

Exercise Website

www.tinyurl.com/pp2-ex

CONTACT US

Mailing List

David Dao @daviddao_

Thank you for your attention

David Dao @daviddao_