Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Kristian

Other Decks in Technology


  1. 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
  2. Demand for Data Visualization • Draws users into content •

    By exploring, users become participants • Knowledge increases through discovery • Consume mass amounts of data quickly
  3. Fun Interactive Visualizations • Baby Name Wizard http://www.babynamewizard.com/voyager Data source:

    SSA records • Growth of Walmart http://projects.flowingdata.com/walmart/ Created by UCLA's own Nathan Yau • Rich Blocks, Poor Blocks http://www.richblockspoorblocks.com/ Data source: Census ACS -American Community Survey
  4. Some More Fun Examples • Word Cloud http://www.tagxedo.com/app.html - Silverlight

    Based http://www.jasondavies.com/wordcloud/ - HTML5 Based • Logstalgia https://code.google.com/p/logstalgia/ Boring web access logs become art • Bitcoin Chimes http://www.listentobitcoin.com/ Visual and audio cues for real time Bitcoin transactions
  5. 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
  6. 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
  7. Google Charts Playground • Quick way to prototype charts https://code.google.com/apis/ajax/playground/?type=visualization

    • Nice way to provide quick dynamic data File -> Publish to the Web • Basic search queries can be used Query language similar to SQL
  8. 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: http://bit.ly/14aCqS3
  9. 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
  10. Next Steps • Advanced interactivity Same data set, but custom

    programming • We'll dig into D3 next session http://d3js.org/ • Other tools: Processing.js Raphael • Data exploration: Tableau Orange
  11. Resources Flowing Data - http://flowingdata.com/ Data Points - ISBN 9781118462195

    Visualize This - ISBN 9780470944882 Nathan Yau - UCLA PhD Google Spreadsheet Query API https://developers.google.com/chart/interactive/docs/querylanguage URL Encoder/Decoder http://meyerweb.com/eric/tools/dencoder/