Data Visualization Tools for the Web

The 3rd in a three part series outlining the basic tools to get started with data visualization for the web. This talk will focus on using Google Refine to manipulate data and d3 to generate some impressive visualizations with minimal effort.

Transcript

1. Data Visualization
   Tools for the Web
   Kristian Allen
   Programmer - UCLA Digital Library
   

   View Slide

2. Topics
   ● Quick synopsis of previous workshops
   ● Introduction to some new toolkits
   ○ Google Refine for data manipulation
   ○ jsFiddle for development playground
   ○ d3 Javascript library for interactivity
   ● Survey of other popular tools
   

   View Slide

3. Previous Workshops
   Part 1 :
   ● Used a clean pre-formatted dataset
   ● Imported and used stock Google Fusion
   charts and maps
   Part 2 :
   ● Used a custom data set
   ● Explored network graph in Gephi
   

   View Slide

4. The Next Steps
   ● Limitations
   ● Google Fusion Tables / Charts
   ○ If data does not meet strict format, tough to import
   ○ Limited visualization options
   ● Gephi
   ○ Hundreds of knobs and switches, complex
   ○ Results are confined to a local application
   

   View Slide

5. Web Visualization Trends
   ● Shift away from Flash / Flex / Actionscript
   ● Movement towards HTML5/CSS3/Javascript
   ● Javascript libraries can compete with Flash
   ○ Raphael
   ○ Processing.js
   ○ d3
   

   View Slide

6. Enough talk, lets do something!
   ● Sounds good - First, lets clean up a data set
   ● Google Refine
   ○ Tool to clean up data
   ○ De-duplication, mass change operations
   ○ Facet, Pivot, Clustering
   ○ Powerful export options, JSON templates
   ● Tutorial url - http://bit.ly/124JB1J
   

   View Slide

7. JSON is the dominant data format
   ● What do I need to know about JSON?
   ○ Human readable, plain text, lightweight
   ○ Consists of name / value text pairs
   Sample:
   {
   "I am a name" : "I am a value",
   "Also a name" : 1234,
   "More stuff " : { "nested name" : "nested value",
   "also nested" : "another value"
   }
   }
   

   View Slide

8. All done with data. Cool stuff yet?
   ● Bummer - Custom programming is hard
   ● Bonus - People have done the heavy lifting
   ● We will hack, borrow and steal for now to
   get our chops up to speed
   ● What looks cool?
   

   View Slide

9. Questions?
   Further topics?
   Google Refine, data manipulation?
   Programming series of workshops?
   Bring your own dataset, hackathon?
   

   View Slide

10. Resources
    Excellent series of tutorials for beginners
    UC Berkeley Graduate School of Journalism
    http://multimedia.journalism.berkeley.edu/tutorials/cat/data
    D3 repository of charts
    http://nvd3.org/
    

    View Slide