WebVisualization

Tools&ApproachesforInformationVisualizationontheWeb

TópicosAvançadosemEngenhariaInformática2ProgramaDoutoralemEngenhariaInformática

UniversidadedeAveiro

PEDROLOPES

pedrolopes@ua.pt

2

Abstract

TheWeb, once solely a repository for texts and images, is evolving into a comprehensive

platformwhereanykindofcommunity‐scientific,media,entertainment,etc‐canpublish

knowledge.Knowledgeisderivedfrominformation,thus, inascientificareait isofutmost

importance to make the information available as fast as possible. Along with the web

evolution,webdevelopment tasks have also evolved.Nowadays, it is easier and faster to

develop,testanddeploynovelapplications.Therefore, it isessential foranyresearcherto

knowtheexistingsetoftoolsthataremostadequatetohiswork.Informationvisualization

isoneoftheresearchareaswherethisawarenessismorerelevant.Anyresearcher,atsome

pointofhiswork,needstopublishinformationonlinerelyingonsomekindofvisualization

technique.Thisreportshowssomeofthemostmodernapproachesandtoolsavailable.The

purposeistomakeresearchersawareofthesetools,enablingtheirusageinscientificwork

andsimplifyingonlinepublishingtasks.

3

TableofContents

Abstract ...................................................................................................................... 2

TableofContents........................................................................................................ 3

1.Introduction............................................................................................................ 5

2.History .................................................................................................................... 7

3.Web2.0 ................................................................................................................. 10

3.1Technologies.................................................................................................... 10

3.1.1Flash ................................................................................................................ 11

3.1.2Silverlight......................................................................................................... 11

3.1.3AJAX ................................................................................................................ 11

3.2Approaches...................................................................................................... 12

3.2.1Textualcontentvisualization .......................................................................... 12

3.2.2Maps ............................................................................................................... 14

3.2.3InteractiveTimelines....................................................................................... 15

3.2.4Mindmaps ....................................................................................................... 16

3.3Tools................................................................................................................ 17

3.3.1Flash ................................................................................................................ 17

3.3.2Silverlight......................................................................................................... 19

3.3.3AJAX ................................................................................................................ 20

3.3.4Summary ......................................................................................................... 25

4.Requirements ....................................................................................................... 26

4.1UserRequirements .......................................................................................... 26

4.2Interface .......................................................................................................... 27

5.Conclusion ............................................................................................................ 28

References................................................................................................................ 29

4

5

1.Introduction

WorldWideWeb is evolving to become the primarymedia for knowledge exchange. The

Internetisnowthemainplatformforelectronicallydeliveredcontent,whetheritisscientific

information,news,entertainmentorsimplepersonalstories.Webevolutionledtothebirth

ofWeb2.0.Withit,anewwaveofapplicationsappeared,empoweringtheuserwithcontrol

overtheweb.Thisshiftincontrolresultedinseveralnewhotapplicationsthatenableusers

topublishtheirownpersonalcontent[1].

With this next generation applications, developers are no longer stuck with desktop

applications and their inconvenient: hard to test, slow to deploy, restricted user scope,

complex maintenance. Now, they can create web applications that resemble desktop

applications in several levels, especially onusability, user interface andavailable features.

Data and information visualization has been one of the subjects of this shift to web

applications.Thisraisedanewclassofchallenge,mostlyduetoresourceconsumptionand

complex web architectures. Even before Web2.0 or even Google, there were several

challenges inweb‐baseddatavisualization [2].With theevolutionof the Internet, sohave

thechallengeschanged.

The focus is now divided in three main challenges: moving complex desktop

visualization applications to a web environment, improve existing user interfaces by

reducingusabilitycomplexities[3,4]andcreatingpowerful–butsimple–datavisualization

components thatcanbeeasilyusedbyanydeveloper, likeGeoBoost [5] for instance.This

reportapproaches the latter issueand tries tomakeageneraloverviewovervisualization

componentsthatcanbehelpfultoeverydaydevelopersandresearchers.

Considering that the web ecosystem is currently the main information exchange

platform, developers and researchers need to publish information online and, in several

cases, largedatasetshavetobepublished inanattractive format.Several frameworksare

beingdeveloped in the scienceworld to facilitate thisprocess, likeWVFA [6] for instance.

However, this report is focused on more widely used scenarios and state‐of‐the‐art

technologies. Therefore, it contains descriptions about the main used technologies for

developing next generationweb applications and a set of tools that can ease the task of

creatingandinteractivetimelineorpresentinggeographicinformation.

6

The following section contains a small historical note about the evolution on web

information visualization. Next, there is the core of this report focused on technologies,

techniques and tools to implement those techniques efficiently. At last there is a general

requirements sectionwith some topics thatwebdevelopers should take in accountwhen

designinganewwebapplication.

7

2.History

Visualization has only been applied recently in web environments. In the beginning, the

Internet was confined to text browsers without any kind of graphic enhancement.

ViolaWWW [7] (Figure 1), in 1993, was the first web browser with support for graphics,

tables,stylesheetsandplugins.Thepossibilitiesthatwereenabledwiththepowertoinclude

visual information in a web page was immense.With this, developers started to include

tables,imagesandempoweredthedevelopmentofstandardslikeCascadeStylingSheets–

CSS–andECMAScript–Javascript.

Figure1‐ViolaWWWbrowsershowingpagewithimages

Whenmaturityintheinclusionofvisualinformationwasreacheditwastimetoinclude

traditional desktop visualization components in web pages. Circa 1997, Java applets

appeared,enablingthecreationofapplicationsthatweredeployedintheclient;thus,being

8

able to implement a new set of interface and visualization features. Along with these

improvements,developersstartedtheworkontheinclusionof3Dgraphics–VRML–inweb

pages[8].TheinclusionofVRMLcontentinwebpagesisnotatrivialtaskanditrequiresa

client‐side plugin for proper functionality. Hence, the users need to install a VRML

applicationinordertoseethethree‐dimensionaldatadisplayedonline.Javaappletswerea

more successful approach. Javawasmorewidely installed thanVRMLand, additionally, it

allowedthedevelopmentofsoftwarewithahigherlevelofcomplexity,insteadofthesimple

VRMLmodels.Evenwithalltheadvances,VRMLisstillusedinseveralfieldsforcreating3D

environmentsinthebrowser[9,10].Javaappletusageisdecreasingwiththeappearanceof

novel client‐side technologies. Someof thebest Java‐based informationvisualization tools

(mixedwithtext‐mining)areJonathanHarris’WeFeelFine1(Figure2)andUniverse2.These

applications gather knowledge that is scattered through several blogs or RSS feeds and

processesit,creatingastonishingvisualresults.However,withtheadventofWeb2.0,anew

set of technologies gained significance in web development. Adobe Flash3 Microsoft

Silverlight4andAJAXarethenewwaveoftechnologiesthatempowerthewebecosystem.

Figure2‐WeFeelFinesampleinterface

1WeFeelFine:http://www.wefeelfine.org2Universe:http://universe.daylife.com3AdobeFlash:http://www.adobe.com/products/flash4MicrosoftSilverlight:http://www.silverlight.net

9

Summarizing, the key point is thatwehavewitnessed a shift in themain purposeof

webdatavisualization.About10yearsago,thegoalwastoadaptdesktop‐basedtechniques

to web pages. This increased the web applications weight and resulted in a complex

deploymentmodel.Nowadays,themainpurposeistousenovelwebtechnologiestooffer

desktop‐like solutions to users.With higher bandwidths and cross‐browser/cross‐platform

technologies,itispossibletocreatewebapplicationsthatresembledesktopapplicationsin

terms of appearance, resources and available features. However, deploying visualization

applicationsinthewebhasincreasedthecomplexityofexistingvisualizationissues[11]and

addedanotherlevelofissuesrelatedtotheamountofinformationthathastobeobtained

andprocessedinreal‐timebyclient‐side–browser‐based–frameworks.

10

3.Web2.0

After the “dot‐com boom”, the Internet needed an orientation change. The exponential

increaseonthenumberofweb‐basedenterprisesledtoasectorcrisis.Thechangecamein

theformofWeb2.0[12].ThemainWeb2.0purposeistogiveusercontrolovercontent.The

typical Web2.0 business model consists in developing profitable concepts that can be

maintainedbyusers ‐ Figure 3. Themajority of the Internet contentdoesnot come from

specialized technicians. Nowadays, the content comes from end users. Applications like

blogs,micro‐blogs,socialnetworks,medianetworks,socialbookmarksormeta‐applications

like mashups or workflows are currently the main trend in web applications. These

applicationsdependonuserstocreatecontentandpublishitonline.

Figure3‐Web1.0vsWeb2.0

3.1Technologies

Aspreviouslymentioned,wehavethreetoptechnologies for thecreationofRich Internet

Applicationsthatrequireexcellentuserinterfaceanddatavisualizationfeatures.Thissection

enclosesabriefdescriptiononeachofthem.Next,therearepracticalexamplesofmodern

visualizationapproachesimplementedwiththesetechnologies.

11

3.1.1Flash

Theoldestone isAdobeFlash. Flashwas initially created fordesigners and it allowed the

creation of high‐quality and visually stimulating interfaces. Recently, Adobe has opted to

updatethenewerversionstoamuchmoredeveloper‐orientedversion.Thenowdesignated

FlashPlatformempowersdevelopersinthecreationofvisuallyricherandmorestructurally

complexapplications,combiningserver‐sidewithclient‐sidedevelopment.Despiterequiring

aplugin,itisalmostcompletelycross‐platformand,inthelastiterations,allowsthedisplay

ofcomplex3Dmodelsandtheprocessingofhugedatasets.Withthis,itiseasiertointegrate

dataandgenerategraphsortoconceivenovelvisualizationstructures.

3.1.2Silverlight

Flash’smaincompetitorisMicrosoftSilverlight.Silverlighthasalmostthesamefeaturesas

Flash but is more developer oriented. Being created for developers it enables the faster

creation and deployment of new components. Currently, it has a growing database of

visualization components ranging from calendars to maps, from timelines to bar charts.

Microsoft’s support is giving Silverlight an important adoption push, especially when it

comestoapplicationsthatneedtodisplaylargeamountsofdatainaninteractiveinterface

thatiscapableoffollowingseveralusabilitygoodpractices.

Themain Silverlight problem is the same as Flash: both require the installation of a

plugin to work. This means that users without software installation permissions or

administrativeaccessmaynotbeabletoviewthedevelopedcomponentsintheirbrowsers.

3.1.3AJAX

AJAXstandsforAsynchronousJavascriptandXMLanditisthemainalternativetoFlashand

Silverlight. AJAX relies especially in Javascript. Javascript has evolved to become the only

dynamic language, supported by browsers, which can interact with the HTML Document

ObjectModel.ThismakesAJAXcross‐browserandcross‐platform.Italsomeansthatitdoes

notrequirethatanykindofpluginginstallation.

The main idea behind AJAX is to take advantage of asynchronous data exchanges

between the client and the server, thus removing web page refreshes. Combining

12

asynchronous requests, XML and Javascript, developers can program their applications to

change a specific component of the page with real‐time server‐obtained data, without

having to reload the page. This makes the applications faster and more responsive by

removing“whitescreens”betweenuserclicks.

3.2Approaches

Datavisualizationinterfacecanbeuniqueintermsofcontent,elegance,beautyand,above

all, description. Histograms, tables, bar or pie graphs are used daily in the most diverse

projects.However,thereareotherwaysofconveyingamessagetouserseffectivelythana

simple histogram. This small section intends to introduce modern data visualization

techniquesandhowtheycanbecreatedusedthepresentedtechnologies.

Despite the fact that there innumerous approaches to display data, the key factor is

creativity. It is imperative to be creative and test new smart ideas of displaying large

datasets. Inaddition, it isalso important to remember thatmostof the times the simpler

methodsarethemosteffectiveones.Thisadvice isvalidnotonlytodatavisualizationbut

alsotothedesignofhuman‐computerinterfaces.

3.2.1Textualcontentvisualization

TheappearanceofRSS feedsallowedusers to syndicate contentandpublish it in formats

thatcanbeused,autonomously,byanyapplication, leveragedthecreationofseveralnew

visualization tools. These visualization tools mostly provide timeline displays of news or

graphicaldisplayofrelevanttopics.

Newsmaps (Figure4) is aparticular implementationof the traditional treemapview,

developed in Flash. This informationvisualizationapproachorganizes thehierarchical tree

organizationinseveralconnectedsquares,representingnewsandrelationsbetweennews.

Thisapproachcanbeveryusefulwhenonewantstodisplaylargetextualcontentthatis,in

somemanner,related.Similardatavisualizationmechanismscanbeimplementedtogather

information concerning a particular topic or interest area instead of simple reading the

13

internationalnewspapersRSS feeds.Apracticalexamplecouldbethedisplayofamedical

ontology,containingdiseases,phenotypesandsymptoms.

ThesameteambehindWeFeelFinecreatedtheUniversalDaylifeviewer(Figure5)to

accessworldwidenewsdatasearchingfortopicsanddisplayingtheminavirtualuniverse.

Theusermaythenwatchtheskyandsearchforstarsandconstellationswhicharedynamic

relations obtained from the provided input. This viewer is a complex Java applet and is a

remarkableachievementinthequalityofthesekindsofapplications.

Figure4‐Newsmapdatavisualizationinterface5

Figure5‐UniversalDaylifeviewer6

5Newsmap:http://newsmap.jp

14

3.2.2Maps

Advancesinthetechnologymadetheexistenceofworldmapswithdetailedsatelliteimages

possible. There are several map APIs that allow developers to create new layers of

informationontopofthegeographicalmaps.Thismeansthatitiseasierandfastertocreate

visualizationapplicationsdisplayinggeographical‐relateddata.Figure6showshowwecan

use the Google Maps API and connect it with the YouTube API to create a visualization

applicationthatshowsallthecountriesthatparticipatedintheEurovision2009contestand

enablestheuserstoviewthevideosofthesongsinthecontest.

TheseveralmapsAPIsallowconnectionstoanykindofapplicationandthedisplayof

informationrelatedtoanyarea.

6UniversalDaylife:http://universe.daylife.com

Figure6‐GoogleMapsEurovisionContestviewer

15

3.2.3InteractiveTimelines

Timelines[13,14]traditionallydisplaydataorderedinaspecificdatescale.However,static

timelines are not useful to present large amounts of information. Any of thementioned

technologiesallowsthecreationofinteractivetimelinesthatmayincludeameshofcontent

from separate areas and gathered from distinct sources. Figure 7 shows an interactive

timeline,developedbyBBC,displayingthemostrelevanteventsinBritishHistory.

Figure7‐BritishHistoryinteractivetimeline7

TheVoyagenewsreader(Figure8)displaysdatacontentinanimprovedtimeline.The

content is highlightedwith focus changes that create a depth experience in the browser.

Userscannavigateinthetimeline:thenearestlayeristhemostrecentandbygoingdeeper

they viewoldernews.Onceagain, this kindof interactive timeline canbeused in several

distinctscenariosthatrequireinformationpresentationinsomekindofsortablescale.

7BBCBritishHistoryinteractivetimeline:http://bit.ly/pnRur

16

Figure8‐Voyagenewsreadinginterface8

3.2.4Mindmaps

Mindmaps [15] are data visualizations that present several connections and relations in a

waysimilartosubwaymaps.Usinginteractivemindmaps,userscanselectasingleelement

andview/navigateinsideitsrelations,withoutlosingcontextinformationontheremaining

elementsofthemap.Staticmindmapsarepoorerbuttheyprovideamoregenericoverview

on larger datasets. Figure 9 shows amindmap containing theweb search trends in 2007

relatedlikeasubwaymap.

8VoyageRSSNewsReader:http://rssvoyage.com

17

Figure9‐WebTrendsmapin20079

3.3Tools

To use the presented technologies, developers do not need to start from scratch and

developanewsetofcomponentsthatallowthemtocreatemodernwebvisualizationtools.

Thereareseveral toolkitsavailablethatease,significantly,developers’ tasksandallowthe

creationofsolutionstailoredtoeachspecificproject.

3.3.1Flash

The Flash Platform is a success case in merging complex data visualization with fully

functional applications. Demandbase10 (Figure 10), ModelMetrics11 or Nasdaq OMX12

representstate‐of‐the‐artFlash‐basedapplicationswhereinformationvisualizationplaysthe

keyrole.Theseapplicationsdealwithseveraldatabasesandprocessmillionsofrecords, in

real‐time,beforepresentingthemtotheusers.

9WebTrends2007:http://informationarchitects.jp/start10Demandbase:http://www.adobe.com/flashplatform/apps/demandbase11ModelMetrics:http://www.adobe.com/flashplatform/apps/model_metrics12NasdaqOMX:http://www.adobe.com/flashplatform/apps/nasdaq

18

Figure10‐Demandbaseinterface

To create smaller customized solutionone canuse the Flare13ActionScript collection.

ThiscollectioncontainsvariousActionScriptscriptsthatcanbeusedwiththefreeFlexSDK14

tocreateweb‐basedvisualizationapplications.Theavailablescriptsprovideaneasywayto

deploy circular or bar graphs, trees, stacks or timelines (among others) online. Figure 11

shows an example of a complex bar chart created using Flare. This example contains a

multitudeofcategoriesandevaluatedelementsthataredisplayed,automatically,inasingle

compositegraph.

13PrefuseFlare:http://flare.prefuse.org14AdobeFlex:http://www.adobe.com/products/flex

19

Figure11‐PrefuseFlarebarexample

3.3.2Silverlight

Descry15 and several Telerik components16 are perfect examples of Silverlight’s data

visualizationcapabilities.Withthemitispossibletoeasilycreatenovelapplicationsthatcan

merge data gathered from several sources, presenting it to users in a captivating user

interface.Figure12showsapracticalDescryexample.ItcontainsdatafromUSA’s50states

regardingobesepopulationpercentage.Insteadoftraditionalbarcharts,Descry’sapproach

usesT‐shirtsrepresentingeachstatethatarecoloredandenlargedaccordingtothestate’s

obesity parameters, creating a richer visualization interface that users can interact and

analyzeinreal‐time.

15Descry:http://www.visitmix.com/Lab/Descry16TelerikChart:http://www.telerik.com/products/silverlight/chart.aspx

20

Figure12‐DescryvisualizationoftheobesepopulationintheUnitedStatesofAmerica17

3.3.3AJAX

To develop applications using AJAX, one can use any web application technology in the

server‐side.Applicationscanhave thebackgroundwith simpleHTML,XML,ASP.NET, Java,

PHP, Pythonor any other server‐side controller language. Regarding the client‐side, there

aremany frameworks available for composing the typical richuser interface that remarks

Web2.0applications.ThemorewidelyusedAJAXframeworksare:jQuery18,script.aculo.us19,

Prototype20andDojo21.

These frameworkswerebuilt forgenericpurposes.Despite the fact that theyarenot

focusedonsolvingvisualizationissues,therearediversevisualizationcomponentsthatcan

beeasily implemented.Tocreatestate‐of‐the‐artwebdatavisualizationapplicationsthere

areothergroupsofmorefocusedframeworks.Thefollowingparagraphsdescribethebest

Javascriptvisualizationtoolkitsandweb‐basedvisualizationapplications.

The first example comes from the worldly known MIT. MIT’s SIMILE Project22 has

severalteamsworkingondatavisualizationtools.Thisisanongoingresearchproject;hence,

17DescryObesity:http://www.visitmix.com/labs/descry/theobesityepidemic18jQuery:http://jquery.com19Script.aculo.us:http://script.aculo.us20PrototypeJavaScript:http://www.prototypejs.org21DojoToolkit:http://www.dojotoolkit.org22SIMILEProject:http://simile.mit.edu

21

thereareonlya fewstablewidgetsavailable23. Timeline (Figure13)andTimeplotwidgets

are ideal for interactive timeline creation and the display of advanced time‐related

information.

Figure13‐SIMILINETimelineexample

The Javascript InformationVisualizationToolkit24 – JIT– is simple Javascript library to

createadvancedinformationvisualizationapplications.Thistoolkitallowstheeasycreation

and online display of mainly interactive trees and graphs. The focus is given to the easy

creationofvisualizationsdisplayingrelationalinformation.Figure14showsahyperbolictree

containingarelationmapoftheelementsofthePearlJamband.Userscanselectanyband

elementandview,inrealtime,therelationstheyhavewithinthemusicindustry.

23SIMILEWidgets:http://www.simile‐widgets.org24JIT:http://www.thejit.org

22

Figure14‐JITHyperbolicrelationtree

The presented frameworks are good for some specific purposes. However, for more

genericpurposes,thereistheGoogleVisualizationAPI25.Thisextensiveframework,created

andsupportedbyGoogle,containsseveralusefulcomponentsrangingfrommapstotables,

from word clouds to interactive charts. Most of the available components are also

integratedinJavaAJAXGoogleWebToolkit26framework.Beingaframeworkdevelopedby

Google, there is extremely good support and the quality of this framework cannot be

questioned.UsingGoogleVisualizationAPIitispossibletoimplementsomeofthemodern

visualization techniquesmentioned previously. Themore interesting feature in this API is

that the source datasets can be easily obtained via Javascript. This means that one can

25GoogleVisualizationAPI:http://code.google.com/apis/visualization26GoogleWebToolkit:http://code.google.com/webtoolkit

23

dynamicallymeshseveraldatasourcesinasinglevisualizationcomponent.Anotherrelevant

fact is that the API sometimes uses Javascript‐configurable Flash components: with this,

developers can combine the best of both AJAX and Flash in a single component. The

AnnotatedTimeLine (Figure15)enables thecreationof interactive timelineswith relative

ease.

Figure15‐Google'sAnnotatedTimeline

The Motion Chart (Figure 16) displays dynamic charts in real time. The component

draws both bar charts and point charts in real‐time. In addition, one can also add time‐

relateddatatothesechartsprovidingabetterunderstandingoftheevolutiononaspecific

case.Forinstance,onecanprovidedataaboutsalesresultsforagivencompanyonanentire

yearandpushthe“play”buttonandwatchresultsevolvinginthebrowser.

24

Figure16‐Google'sMotionChart

Aspreviouslymentioned,mapsare currentlyon topof thepreferences fordisplaying

geographical data [16]. This is mostly due to the fact that several interactivemaps have

appeared online. Google is no exception and provides a comprehensive API allowing the

creationofnovelapplicationsthatneedtodisplaygeographicalinformation.Itispossibleto

createseveralvisuallayersofinformation,mapzonesorevenreal‐timeevolvingmaps.

Despite the fact that there are lotsofmodern trends indisplayingdata, the simplest

format is still widely used: tables. The Google Visualization API also provides a Table API

where one can create interactive tables and present them to users. This concept goes

beyond staticHTML tables as thesenew tables canbe sorted andpaginated in real‐time.

Figure17showsadynamicGoogleTableinstance,containingthreedatafields.Thedatain

thetablecanbesortedbyanyofthefieldsand,ifrequired,canevenbeeditedinrealtime.

Figure17‐Google'sTable

25

3.3.4Summary

Nowadays, it is easy, toanyexperienceddeveloper, to createan informationvisualization

applicationthatsolveshisdatarepresentationproblem.WhetherusingFlash,Silverlightor

AJAX,developerscancreateinteractivevisualizationsthatwillenrichtheirworkand,atthe

same time, present data to users in a captivating interface and offering an effective user

experience.

Inordertounderstandthegenericcapabilitiesofthedescribedtools,Table1presentsa

short comparison of the evaluated tools. Five fieldswere evaluated in a 1 to 5 scale; the

fieldsrepresentthemainfeaturesofthetools.EaseofUseclassifieshoweasyitistocreate

a simple solution using the select tool. Learning Curve is used to classify the process of

creatingadvancedvisualizationapplicationswith theselected tools.Adaptabilityevaluates

howtheselectedtoolisadaptabletoaparticularissueinaspecificscientificarea.Number

ofToolsdescribesthenumberanddiversityoftheavailableframeworksintheselectedtool.

Futurerepresentstheprobabilityoffurtherdevelopmentsthatwillsignificantlyenhancethe

selectedtool.Finally,Overallclassifiestheoverallqualityofthetool.

Table1‐Toolcomparison

Flash Silverlight Javascript GoogleAPI

EaseofUse

LearningCurve

Adaptability

NumberofTools

Future

Overall

Legend:

1/VeryWeak/VeryHard

2/Weak/Hard

3/Moderate

4/Strong/Easy

5/VeryStrong/VeryEasy

26

4.Requirements

Oneoftheoutcomesofthisreportistoprovideasimpleguideforsomegoodpracticesand

requirementsforfuturedevelopersofwebdatavisualizationapplications.Theideaisnotto

detail user or technical requirements of any particular application but to provide a

comprehensive list of topics that should be addressed by anyweb developer in order to

createricherInternetapplicationsthatresultinimproveduserexperiences.

4.1UserRequirementsThefollowinguserrequirementsshouldbeaccomplishedinanywebapplication,especially

inthecurrentera,whereapplicationdesignandappearancehasgainedsignificantrelevance

[17]. However, considering that one is trying to present large datasets with a modern

visualizationtechnique,thesefeaturesbecomeevenmorecrucial.

Easeofuse:webapplicationsshouldbeeasilyusedforpeoplewithhighcomputer

skills but also for people with no background in computer science. End‐users

sometimes face complexapplications thatonlydifficult their comprehensionand

understandingofthepresentedinformation.

Accessibility: web applications rely on the browsing and traditional browsing

actions to execute any operation. These actions are typically not considered for

handicapped users. Web applications should be designed with readable color

themesandfonts,andshouldalsomakekeyboardshortcutsavailableforthemost

relevantactions.

Help: traditionally, web applications do not contain help or tutorial sections.

However, these are relevant because users are used to having them in their

desktops application.Making this kind of information available will improve the

applicationusability.Thiscanbeachievedthroughsmallhelpboxes,videotutorials

ofthemainfunctionalitiesoramanualexemplifyinghowtousetheapplication’s

keyfeatures.

Fast and responsive: the application should not be slow. This means that even

when some process requires a large amount of time to execute, the application

27

shouldpresentfeedbacktotheusers,showingthatthesystem“ismoving”.With

AJAXpatterns,itiseasiertocreatethisfluidexecutionmechanism,wheretheuser

realizeswhatishappeninginsidetheapplicationthroughaninterfacehintinstead

ofstaringatablankscreenwhilethepageisbeingloaded.Besideshavingafluid

interface,theapplicationshouldalsobefaster inthebackground:SteveSouders’

High PerformanceWeb Sites [18] is the best source forwhat aspects should be

takenintoaccountwhendevelopinganovelwebapplication.

4.2InterfaceThe user interface is themain contact point between the application and the users. It is

throughitthatusersinteractwiththeinformation,meaningthatitiswhattheuserswillsee

and use. Therefore, it is important for anyweb developer to follow a broad collection of

goodpracticesthatimprovetheoverallapplicationinterfacequality.Someofthequalities,

thatuserinterfacesshouldhave,inordertoenhanceusability[19],arethefollowing:

Clean:theuserinterfaceshouldbeascleanaspossible,reducingworkspaceclutter

and the amount of data shown to users. It is better to present less information

withmorequality thanmore information filling theentirewebpagewithoutany

visibledistinction.

Light:webapplicationsdependontheavailablebandwidthtooperateefficiently.If

the interface is clutteredwith heavy elements such as images and scripts it will

requirelongerloadingtimes,constrainingtheuserexperiencefromthestart.

Usable heuristics: a good idea to design human‐computer interfaces is to study

Nielsen’sUsabilityHeuristics[20].Theseheuristicshavegainedsomerelevancein

the human‐computer interaction world and provide a good setup for any

developerordesigner.However, theyarenotobliged to follow these references

buttheyareaninitialsteptoproducequalitywork.

28

5.Conclusion

The Internet has grown to provide themost complete application environment known to

date.With this growth, applicationshave changed. TheWebcannowbeunderstoodasa

completeapplicationplatform,overcomingmanyofthedesktopfaults.Withthisinmind,it

isgettingmoreandmoreimportantthatresearcherspublishtheirdiscoveriesandresearch

workonline.

Visualizationtechniquesare,sincealongtimeago,helpfultoanyresearcherthatneeds

to display large datasets of information in a comprehensive manner. Tables, charts and

manyother typesofgraphsare traditional techniques to facilitateusers’ taskofanalyzing

largeamountsofdata.Combiningboththesekeyideas,itisobviousthattheInternethasto

supportthesedatavisualizationtechniquesandenhancethem,creatinginterfacesthatwere

notpossibleifoneonlyusedcloseddesktopapplications.

Thisreportdetailssomeofthemoderntechniquesthatarereplacingstatictablesand

charts as visualization components. Additionally, it presents tools to implement these

techniques thatcanbeeasilyadoptedbyanyresearcher topresenthisdiscoveriesonline.

Interactive timelines, maps or motion charts are some of these techniques. They can be

easilydeployedwiththedescribedframeworks.TheseFlash,SilverlightorAJAXframeworks

will empower researchers with the tools needed to create next‐generation visualization

componentsandpresentlargedatasetsofinformation.Thesecomponentswillgiveusersa

faster insightontheknowledgeresearchersarepresenting,thus, increasingresultvisibility

andoverallusability.

29

References

1. Lopes,P., IntegraçãodeServiçosparaExtracçãodeConhecimento, inElectronics,Telecommunications and Informatics Department. 2008, University of Aveiro:Aveiro.

2. Rohrer, R.M. and E. Swing, Web­based information visualization. ComputerGraphicsandApplications,IEEE,1997.17(4):p.52‐59.

3. Chi, E.H., Improving Web usability through visualization. Internet Computing,IEEE,2002.6(2):p.64‐71.

4. Olivares R, J.C., et al., Using Web Pages Accessible Design for the Correct WebVisualization. Latin America Transactions, IEEE (Revista IEEE America Latina),2007.5(2):p.122‐127.

5. Eick,S.G.,etal.GeoBoost:AnAJAXWeb2.0CollaborativeGeospatialVisualizationFramework.inAerospaceConference,2007IEEE.2007.

6. Eibe, S. and O. Marban.WVFA: a Web visualization framework architecture. inIEEEInternationalConferenceonInformationReuseandIntegration.2004.

7. Wei,P.‐Y.ViolaHomePage.2008[cited20092009‐05‐15].8. Jern, M. 3D data visualization on the Web. in Conference Proceeding of the

MultimediaModelingConferecen,MMM'98.1998.9. Jianghui,Y.,D.Gracanin,andL.Chang‐Tien.Webvisualizationofgeo­spatialdata

using SVG and VRML/X3D. in Image and Graphics, 2004. Proceedings. ThirdInternationalConferenceon.2004.

10. Lai Feng,M.,A. Sourin, andK. Levinski.Function­based3Dweb visualization. inCyberWorlds,2002.Proceedings.FirstInternationalSymposiumon.2002.

11. Chen,C.,Top10unsolvedinformationvisualizationproblems.ComputerGraphicsandApplications,IEEE,2005.25(4):p.12‐16.

12. Oreilly, T.,What is Web 2.0: Design Patterns and Business Models for the NextGenerationofSoftware.2007:SSRN.

13. Karam, G.M., Visualization using timelines, in Proceedings of the 1994 ACMSIGSOFT international symposium on Software testing and analysis. 1994, ACM:Seattle,Washington,UnitedStates.

14. Kumar, V., R. Furuta, andR.B. Allen,Metadata visualization for digital libraries:interactivetimelineeditingandreview,inProceedingsofthethirdACMconferenceonDigitallibraries.1998,ACM:Pittsburgh,Pennsylvania,UnitedStates.

15. Spangler, S., J.T. Kreulen, and J. Lessler.MindMap: utilizingmultiple taxonomiesand visualization to understand a document collection. inSystem Sciences, 2002.HICSS.Proceedingsofthe35thAnnualHawaiiInternationalConferenceon.2002.

16. Tufte, E.R. and G.M. Schmieg, The Visual Display of Quantitative Information.AmericanJournalofPhysics,1985.53(11):p.1117‐1118.

17. Wood, L.E.,User Interface Design: Bridging the Gap from User Requirements toDesign.1997:CRCPress,Inc.320.

18. Souders, S., High Performance Web Sites: Essential Knowledge for Front­EndEngineers:O'ReillyMedia,Inc.168.

19. Dumas, J.S.and J.C.Redish,APracticalGuidetoUsabilityTesting.1999: IntellectBooks.416.

30

20. Nielsen, J.Heuristics forUserInterfaceDesign. 20052005[cited20092009‐05‐13];Availablefrom:http://www.useit.com/papers/heuristic/heuristic_list.html.