InfoVis Systems & Toolkits. Outline. CS 795/895 Information Visualization Fall Dr. Michele C. Weigle.

Transcription

1 CS 795/895 Information Visualization Fall 2012 InfoVis Systems & Toolkits Dr. Michele C. Weigle Outline! Graphing tools! Visualization systems! built-in visualizations! free vs. commercial! Visualization toolkits! build custom visualizations! embed built-in visualizations in webpages! require programming! Specialized tools! networks, maps, illustration! Resources! Visualize This, Ch 3! John Stasko s CS GaTech, Spring 2011 Nice overview at 2

2 Graphing Tools! Excel! R! MATLAB! Gnuplot! Flot! NumPy, SciPy Tools that are highlighted in bold are ones that we ll use during the course of the semester. 3 Graphing Excel! The most common graphing tool! Defaults are often bad! if you use Excel and plan to show it to others, do not just accept the defaults But, can be made to produce nice graphs! chartchooser.html 4

3 Graphing R! Free, well-known, well-loved, powerful If you don t already have it, get it! we ll use it extensively in examples (see Visualize This)! Tutorials! Martin Klein s (ODU) Intro to R - cs795-f11/mklein-intror/lecture! Steven Buechler s (Notre Dame) R Course Notes - Rnotes.html 5 Graphing Others! MATLAB! also well-known and well-loved, but not free! Gnuplot! I used this extensively in grad school! Flot! JavaScript library! NumPy, SciPy! Python libraries 6

4 Systems (Academic or Free)! Academic! Improvise! Polaris! Free Commercial! IBM s ManyEyes! MS Pivot! Google Fusion Tables! Google Public Data Explorer 7 Systems Improvise! Open-source, Java-based Weaver InfoVis 04! Modular library of visualization components! Multiple views key! Coordination model coupled with data processing language at its heart 8! coordinating controls (views, sliders, etc.) Examples: Stasko, GaTech 2011

5 Systems Polaris! Relational databases Stolte et al. TVCG 02! Pivot tables from spreadsheets! N-dimensional data cubes! Each axis may have nested dimensions! Table entry is a pane, and has visual marks to represent data! Analyst drags and drops fields from database schema onto shelves of display! Precursor to Tableau 9 Stasko, GaTech 2011 Systems Many Eyes! InfoVis on the web Viégas et al, TVCG 07! Added social component! can comment on any vis! Upload data sets! become public! anyone can create vis from the data! Includes several preloaded vis types 10

6 ManyEyes Examples 11 ManyEyes New Visualizations Word Tree Wattenberg and Viegas InfoVis 08 PhraseNet van Ham et al. InfoVis 09 (Best Paper) 12

7 ManyEyes Example Different Views, Same Data 13 Systems Microsoft Pivot! System unveiled to great publicity from LiveLabs! After shut-down, has mostly disappeared! Still available from MS Research! Faceted browsing/ filtering with imagebased UI Video: pivotviewer/ default.aspx 14 Stasko, GaTech 2011

8 Systems Google Fusion Tables Visualize and publish data as maps, timelines, and charts! Host data tables online! Combine data from multiple sources 15 Systems Google Public Data Explorer! Visualize and explore large public-interest datasets Upload your own data 16

9 Systems (Commercial)! Tableau! TIBCO Spotfire! Qlikview! SAS JMP! Advizor! Panopticon These are all geared towards Business Intelligence and have various differences that we won t get into. 17 Commercial Tableau! Born as Polaris (Stanford PhD student Chris Stolte) Windows! Tableau Public! free version 18

10 Commercial TIBCO Spotfire! Born in Shneiderman s research group at Maryland (PhD student Chris Ahlberg)! Windows! Some webbased capabilities Commercial QlikView! Windows Some web-based capabilities 20

11 Commercial SAS JMP! Built on top of SAS, highpowered statistical tool Windows! Mac OS 21 Commercial Advizor Analyst! Microsoft.NET based 22

12 Commercial Panopticon! Windows-based Also offers SDK for.net, Java Swing 23 Toolkits! Java! prefuse! Flash/Action Script! flare! Flash version of prefuse! JavaScript! Processing.js! Protovis! D3.js! Google Charts API! Choosel! Java InfoVis Toolkit! Ext JS 4 24

13 Toolkits prefuse! Java-based! Developed by Jeffery Heer while a PhD student at UC- Berkeley (now prof at Stanford)! Fine-grained building blocks for constructing visualizations (as opposed to pre-made views)! No longer supported Heer et al. CHI '05 25 Toolkits flare Version of prefuse implemented in ActionScript for running in Flash player! Seems to be widely used Demos: 26

14 JavaScript Toolkits Processing.js! Not specifically designed for InfoVis! data reader?! layout algorithm? But can definitely be used to build visualizations! Well documented, lots of tutorials! Visualizing Data has examples in Processing, but can be mapped to Processing.js 27 Stasko, GaTech 2011 JavaScript Toolkits Protovis Bostock & Heer, TVCG '09 Heer & Bostock, TVCG '10! Toolkit following a declarative model! Simple grammar of graphical primitives called marks! Marks are associated with data, using mapping to physical properties! Properties can be dynamic or static! Register event handlers to provide interactivity! No longer under active development (replaced by D3) 28 Stasko, GaTech 2011

15 JavaScript Toolkits d3.js Data Driven Documents! Follow-up to Protovis! SVG, CSS, HTML, JavaScript Bostock, Ogievetsky, Heer InfoVis 11 Examples: 29 JavaScript Toolkits Google Chart Tools! Gallery of contributed code segments Visualizations are interactive! Evolving API 30 Stasko, GaTech 2011

16 JavaScript Toolkits Choosel! Data Visualization Framework for GWT (Google Web Toolkit)! Visual data exploration workbench! Fixed multiple views visualization! coordinated views! View embeds on the web! Data visualization in GWT apps! Protovis-GWT allows for Protovis visualizations to be used Demo: 31 Stasko, GaTech 2011 JavaScript InfoVis Toolkit! Interactive data vis for the web 32

17 JavaScript Toolkits Ext JS 4 Same company that produced JS InfoVis Toolkit! Commercial product, but has a free license 33 Video on website Specialized Tools! Animated Bubble Charts! Gapminder World! Networks! NodeXL! Sci2 Tool! Time Series! Cubism.js! SIMILE Widgets! jquery Sparklines! Maps! ModestMaps! PolyMaps! Infographics! Visual.ly! Illustration! Adobe Illustrator! Inkscape 34

18 Specialized Tools Gapminder World! Hans Rosling s work Displays animated bubble charts of data related to wealth and health of nations! Not really a system, but allows for web-based interactive exploration of a particular type of data set 35 Networks NodeXL! Free template for MS Excel Smith et al., Communities & Technologies '09! For exploring network graphs! Can directly import Twitter, Facebook, YouTube networks 36

19 Networks Sci2Tool Toolset designed specifically for the study of science! Analysis and visualization of scholarly datasets 37 Time Series SIMILE Timeline! JavaScript library! For creating timelines (duh!)! Spin-off of MIT project 38

20 Time Series SIMILE Timeplot! Plotting time series data Another spin-off of the MIT project 39 Time Series Cubism.js! D3 plugin for visualizing time series! Dynamic, can pull data from web 40

21 Time Series (and more) jquery Sparklines! Can use data supplied either inline in the HTML or via JavaScript! Examples take just 1 line of HTML and 1 line of JavaScript Bar charts <span class="sparkbar">10,8,9,3,5,8,5</span> <script type= text/javascript > $(.sparkbar ).sparkline( html, {type: bar }); </script>! Version 2.0 adds interactivity! mouseover tooltips! click interaction 41 Maps ModestMaps! Free library for interactive maps Many implementations! JavaScript! Python! Actionscript! Processing! PHP 42

22 Maps PolyMaps! JavaScript library for making dynamic, interactive maps Uses SVG! Can create your own tiles 43 Infographics Visual.ly Develop and share infographics! For now, just create infographics based on your Facebook or Twitter data 44

23 Illustration! Adobe Illustrator! pretty pricey! I m sure there s a student discount through ODU! Inkscape! essentially an open-source version of Illustrator 45 Got All That? Let s Review 46

24 Graphing Tools! Excel! R! MATLAB! Gnuplot! Flot! NumPy, SciPy 47 Systems! Academic! Improvise! Polaris! Free Commercial! IBM s ManyEyes! MS Pivot! Google Fusion Tables! Commercial! Tableau! TIBCO Spotfire! Qlikview! SAS JMP! Advizor! Panopticon 48

25 Toolkits! Java! prefuse! Flash/Action Script! flare! Flash version of prefuse! JavaScript! Processing.js! Protovis! D3.js! Google Charts API! Choosel! Java InfoVis Toolkit! Ext JS 4 49 Specialized Tools! Animated Bubble Charts! Gapminder World! Networks! NodeXL! Sci2 Tool! Time Series! Cubism.js! SIMILE Widgets! jquery Sparklines! Maps! ModestMaps! PolyMaps! Infographics! Visual.ly! Illustration! Adobe Illustrator! Inkscape 50

26 Tools That We ll Highlight! Excel! R! Tableau! Processing.js! Protovis! D3.js! NodeXL! jquery Sparklines! PolyMaps! Inkscape 51 How to Make Sense of All This?! Start with data! Use a system you re familiar with to get a handle on the data and find what s interesting! Excel! R! Tableau! Once you know the story you want to tell, build your visualization! Web-based? Interactive?! Probably need to use a toolkit 52

27 Outline! Graphing tools! Visualization systems! built-in visualizations! free vs. commercial! Visualization toolkits! build custom visualizations! embed built-in visualizations in webpages! require programming! Specialized tools! networks, maps, illustration Next Up: Tool Tutorials Reading: Tutorials/Examples for R, Tableau, Processing.js, Protovis, D3.js, jquery Sparklines 53