Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Data visualization in JavaScript

413 views

Published on

Delivered a presentation in BocaJS JavaScript meetup about data visualization in JavaScript, including an intro to tools available for data visualization.

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

Data visualization in JavaScript

  1. 1. Data Visualization Wenting Zhao
  2. 2. About Me • Software Engineer • M.S. in Computer Engineering • LinkedIn: /wentingzhao • Email: wenting@ZhaoWenting.com • Frisbee ✔ Running ✔ Snorkeling ✔ Go (game)
  3. 3. Data Visualization • WHAT • WHY • HOW • MORE
  4. 4. 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
  5. 5. Source: San Francisco Bike Parking Lots WHY
  6. 6. WHY
  7. 7. HOW
  8. 8. D3.js • Geographic Bounding Boxes • Force-Directed Graph
  9. 9. D3.js https://github.com/omic/D3Playground
  10. 10. Others • InfoVis: President Obama Budget TreeMap • Hicharts: AAPL Stock Price
  11. 11. 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)
  12. 12. Perspectives > Data Analysis • Model Thinking vs. Big Data
  13. 13. Resources • d3js.org • Data Visualization with D3.js (lynda.com) • https://www.coursera.org/course/datavisualization (UIUC) • Model Thinking

×