Data visualization in JavaScript

Data VisualizationWenting Zhao

About Me

• Software Engineer

• M.S. in Computer Engineering

• LinkedIn: /wentingzhao

• Email: wenting@ZhaoWenting.com

• Frisbee ✔ Running ✔ Snorkeling ✔ Go (game)

Data Visualization

• WHAT

• WHY

• HOW

• MORE

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

Source: San Francisco Bike Parking Lots

WHY

WHY

HOW

D3.js

• Geographic Bounding Boxes

• Force-Directed Graph

D3.js

https://github.com/omic/D3Playground

Others

• InfoVis: President Obama Budget TreeMap

• Hicharts: AAPL Stock Price

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)

Perspectives > Data Analysis

• Model Thinking vs. Big Data

Resources

• d3js.org

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

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

• Model Thinking