Web VisualizationTools & Approaches for Information Visualization on the Web

Pedro Lopes | pedrolopes@ua.pt | PDEI - TAEI2: Data Visualization | June 26th, 2009

Acknowledgement: The research leading to these results has received funding from the European Community's Seventh Framework Programme (FP7/2007-2013) under grant agreement nº 200754,the GEN2PHEN project.

Thursday, June 25, 2009

Outline

‣ Introduction

‣ History

‣ Approaches

‣ Tools & Technologies

- Flash

- Silverlight

- AJAX

- Comparison

‣ Conclusion

Thursday, June 25, 2009

Introduction

‣ World Wide Web has evolved

- Primary media for knowledge exchange

- Internet is main platform for Electronically Delivered Content

‣ Applications have also evolved

- Desktop is being replaced as the main application platform

‣ We have three main challenges now

- Move complex desktop visualization applications to the web

- Improve existing web user interfaces

- Create powerful data visualization components that can be used by any developer

Thursday, June 25, 2009

Some history...

‣ Content in the web has changed

- Text > Graphics > Multimedia

- Rich Internet Applications

‣ Paradigm change

- Desktop applications in the Web

‣ VRML, Java Applets

- Use web tech to resemble desktop applications

‣ Flash, Silverlight, AJAX

Thursday, June 25, 2009

‣ Display large text content and its relations in a visually appealing format

Approaches [textual content visualization]

http://newsmap.jphttp://universe.daylife.com

Thursday, June 25, 2009

‣ Display large text content and its relations in a visually appealing format

Approaches [textual content visualization]

http://newsmap.jphttp://universe.daylife.com

Thursday, June 25, 2009

Approaches [maps]

‣ Several Maps APIs allow the creation of new geograpy-based visualizations

Google Maps Eurovision Contest

Thursday, June 25, 2009

Approaches [interactive timelines]

‣ Static timelines do not provide enough interaction

http://bit.ly//pnRurhttp://rssvoyage.com

Thursday, June 25, 2009

Approaches [interactive timelines]

‣ Static timelines do not provide enough interaction

http://bit.ly//pnRurhttp://rssvoyage.com

Thursday, June 25, 2009

Flash [technology]

‣ Adobe

- Initially created for designers

‣ Latest versions more developer-oriented

‣ Features

- Visually rich and interactive applications

- Allows the creation of complex 3D models

- Cross-platform

‣ Requires plugin

Thursday, June 25, 2009

Flash [tools]

‣ Several pre-built components

‣ Flare Actionscript collection

http://flare.prefuse.org

Thursday, June 25, 2009

Flash [tools]

‣ Several pre-built components

‣ Flare Actionscript collection

http://flare.prefuse.org

Thursday, June 25, 2009

Flash [tools]

‣ Several pre-built components

‣ Flare Actionscript collection

http://flare.prefuse.org

Thursday, June 25, 2009

Flash [tools]

‣ Several pre-built components

‣ Flare Actionscript collection

http://flare.prefuse.org

Thursday, June 25, 2009

Silverlight [technology]

‣ Microsoft

- Created for developers

- Response to Flash’s hegemony

‣ Quite similar to Flash

‣ Features

- Huge support for developers

‣ ASP.NET integration

- Cross-platform (almost)

‣ Requires plugin

Thursday, June 25, 2009

Silverlight [tools]

‣ Diverse set of pre-built components

‣ Descry framework

http://www.visitmix.com/labs/descry/theobesityepidemic/http://www.visitmix.com/labs/descry/theirfirstwords/

Thursday, June 25, 2009

Silverlight [tools]

‣ Diverse set of pre-built components

‣ Descry framework

http://www.visitmix.com/labs/descry/theobesityepidemic/http://www.visitmix.com/labs/descry/theirfirstwords/

Thursday, June 25, 2009

AJAX [technology]

‣ Javascript based

- Asynchronous XML and Javascript

‣ Open Source development

- Many (many) frameworks

‣ Features

- Asynchronous data exchanges

- No full page refresh

‣ No white screens

- Cross-platform

‣ No plugin required

Thursday, June 25, 2009

AJAX [tools]

‣ The larger set of frameworks...

‣ MIT Similine, JIT, jQuery, Prototype....

http://simile.mit.edu/timeline/http://thejit.org/

Thursday, June 25, 2009

AJAX [tools]

‣ The larger set of frameworks...

‣ MIT Similine, JIT, jQuery, Prototype....

http://simile.mit.edu/timeline/http://thejit.org/

Thursday, June 25, 2009

AJAX [Google]

‣ Google Visualization API: the best framework

http://code.google.com/apis/visualization/

Thursday, June 25, 2009

AJAX [Google]

‣ Google Visualization API: the best framework

http://code.google.com/apis/visualization/

Thursday, June 25, 2009

AJAX [Google]

‣ Google Visualization API: the best framework

http://code.google.com/apis/visualization/

Thursday, June 25, 2009

Demo

Thursday, June 25, 2009

Demo

Thursday, June 25, 2009

Comparison

Flash Silverlight Javascript Google API

Ease of Use

Learning Curve

Adaptability

Number of Tools

Future

Overall

Thursday, June 25, 2009

Comparison

Flash Silverlight Javascript Google API

Ease of Use

Learning Curve

Adaptability

Number of Tools

Future

Overall

Thursday, June 25, 2009

Conclusion

‣ Internet is the main communication platform

‣ We have to use it!

‣ So much information available online...

‣ How to offer good insights about information?

‣ Good information visualizations

‣ Choose datasets wisely

‣ Answer one question with each visualization

‣ Be agile

‣ Remember usability

Thursday, June 25, 2009

Thank You!

Thursday, June 25, 2009

Questions?

Thursday, June 25, 2009