13
Data Visualization Wenting Zhao

Data visualization in JavaScript

Embed Size (px)

Citation preview

Page 1: Data visualization in JavaScript

Data VisualizationWenting Zhao

Page 2: Data visualization in JavaScript

About Me

• Software Engineer

• M.S. in Computer Engineering

• LinkedIn: /wentingzhao

• Email: [email protected]

• Frisbee ✔ Running ✔ Snorkeling ✔ Go (game)

Page 3: Data visualization in JavaScript

Data Visualization

• WHAT

• WHY

• HOW

• MORE

Page 4: Data visualization in JavaScript

WHAT

Data visualization is a high bandwidth connection between data on a computer system and a human brain, facilitated by visual communication.

- Source: Data Visualization course provided by UIUC

Page 5: Data visualization in JavaScript

Source: San Francisco Bike Parking Lots

WHY

Page 6: Data visualization in JavaScript

WHY

Page 7: Data visualization in JavaScript

HOW

Page 8: Data visualization in JavaScript

D3.js

• Geographic Bounding Boxes

• Force-Directed Graph

Page 9: Data visualization in JavaScript

D3.js

https://github.com/omic/D3Playground

Page 10: Data visualization in JavaScript

Others

• InfoVis: President Obama Budget TreeMap

• Hicharts: AAPL Stock Price

Page 11: Data visualization in JavaScript

Perspectives > Obtain Data

• The server generates the JavaScript for rendering in the HTML

• AJAX

• Use Web Sockets to have the server directly inject data into client DOM or JavaScript objects (SignalR)

Page 12: Data visualization in JavaScript

Perspectives > Data Analysis

• Model Thinking vs. Big Data

Page 13: Data visualization in JavaScript

Resources

• d3js.org

• Data Visualization with D3.js (lynda.com)

• https://www.coursera.org/course/datavisualization (UIUC)

• Model Thinking