Introduction to Data Visualization for the Web

Introduction to Data Visualization for the Web

A brief outline of some of the canned visualization options available on the web. We'll walk through a quick geospatial mapping with Google Fusion Tables and a custom dataset.



May 10, 2013


  1. Introduction to Data Visualization for the Web Kristian Allen Programmer

    - UCLA Digital Library
  2. Topics • View some existing visualizations • Review some data

    structures • Examine some basic tools available • Create a basic interactive map with Google tools and custom data set
  3. Demand for Data Visualization • Draws users into content •

    By exploring, users become participants • Knowledge increases through discovery • Consume mass amounts of data quickly
  4. Fun Interactive Visualizations • Baby Name Wizard Data source:

    SSA records • Growth of Walmart Created by UCLA's own Nathan Yau • Rich Blocks, Poor Blocks Data source: Census ACS -American Community Survey
  5. Some More Fun Examples • Word Cloud - Silverlight

    Based - HTML5 Based • Logstalgia Boring web access logs become art • Bitcoin Chimes Visual and audio cues for real time Bitcoin transactions
  6. Looks neat, how to start? • Organizing data is half

    the battle • Different tools expect formats • Ability to convert formats easily is valuable • Tools for conversion are available: Basic cases: Mr. Data Converter Advanced cases: Google OpenRefine
  7. Complexity • Simple Text Plain Text File, CSV • Structured

    Text and Spreadsheets JSON, XML, Excel • Databases Filemaker Pro, Access, MySQL • Industrial Strength, Specialized MongoDB, Hadoop, Oracle R, Processing, JS libraries
  8. Lets Try Some Tools • IBM ManyEyes • Great,

    I want to play! • IBM ManyEyes Demo
  9. Google Charts Playground • Quick way to prototype charts

    • Nice way to provide quick dynamic data File -> Publish to the Web • Basic search queries can be used Query language similar to SQL
  10. Google Charts with Library data • Use case with UCLA

    Digital Library data • We will: - Export from Digital Library - Import into Google Fusion Tables - Create a stand alone interactive map - Embed map in a web page - Export and view in Google Earth on laptop • How to:
  11. Google Fusion Tables for Geocoding • World Bank data provides

    some fun content • Repeat the process - Import from Excel - Let Google Fusion Tables geocode content • Add custom filters
  12. Next Steps • Advanced interactivity Same data set, but custom

    programming • We'll dig into D3 next session • Other tools: Processing.js Raphael • Data exploration: Tableau Orange
  13. Questions?

  14. Resources Flowing Data - Data Points - ISBN 9781118462195

    Visualize This - ISBN 9780470944882 Nathan Yau - UCLA PhD Google Spreadsheet Query API URL Encoder/Decoder