Introduction to Data Visualization for the Web Kristian Allen Programmer - UCLA Digital Library 

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 

Demand for Data Visualization ● Draws users into content ● By exploring, users become participants ● Knowledge increases through discovery ● Consume mass amounts of data quickly 

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 

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 

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 

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 

Lets Try Some Tools ● IBM ManyEyes http://www-958.ibm.com/software/analytics/manyeyes/ ● Great, I want to play! ● IBM ManyEyes Demo 

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 

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 

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 

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 

Questions? 

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/