Web Visualization - Tools and Approaches for Information Visualization on the Web

Page 1

Web
Visualization
 
 Tools
&
Approaches
for
Information
Visualization
on
the
Web

Tópicos
Avançados
em
Engenharia
Informática
2
 
 Programa
Doutoral
em
Engenharia
Informática
 
 Universidade
de
Aveiro

PEDRO
LOPES

pedrolopes@ua.pt

Abstract
 
 The
 Web,
 once
 solely
 a
 repository
 for
 texts
 and
 images,
 is
 evolving
 into
 a
 comprehensive
 platform
where
any
kind
of
community
‐
scientific,
media,
entertainment,
etc
‐
can
publish
 knowledge.
Knowledge
is
derived
from
information,
thus,
in
a
scientific
area
it
is
of
utmost
 importance
 to
 make
 the
 information
 available
 as
 fast
 as
 possible.
 Along
 with
 the
 web
 evolution,
 web
 development
 tasks
 have
 also
 evolved.
 Nowadays,
 it
 is
 easier
 and
 faster
 to
 develop,
test
and
deploy
novel
applications.
Therefore,
it
is
essential
for
any
researcher
to
 know
the
existing
set
of
tools
that
are
most
adequate
to
his
work.
Information
visualization
 is
one
of
the
research
areas
where
this
awareness
is
more
relevant.
Any
researcher,
at
some
 point
of
his
work,
needs
to
publish
information
online
relying
on
some
kind
of
visualization
 technique.
This
report
shows
some
of
the
most
modern
approaches
and
tools
available.
The
 purpose
is
to
make
researchers
aware
of
these
tools,
enabling
their
usage
in
scientific
work
 and
simplifying
online
publishing
tasks.

2

Table
of
Contents
 
 Abstract ...................................................................................................................... 2
 Table
of
Contents........................................................................................................ 3
 1.
Introduction............................................................................................................ 5
 2.
History .................................................................................................................... 7
 3.
Web2.0 ................................................................................................................. 10
 3.1
Technologies.................................................................................................... 10
 3.1.1
Flash ................................................................................................................ 11
 3.1.2
Silverlight......................................................................................................... 11
 3.1.3
AJAX ................................................................................................................ 11
 3.2
Approaches...................................................................................................... 12
 3.2.1
Textual
content
visualization .......................................................................... 12
 3.2.2
Maps ............................................................................................................... 14
 3.2.3
Interactive
Timelines....................................................................................... 15
 3.2.4
Mindmaps ....................................................................................................... 16
 3.3
Tools................................................................................................................ 17
 3.3.1
Flash ................................................................................................................ 17
 3.3.2
Silverlight......................................................................................................... 19
 3.3.3
AJAX ................................................................................................................ 20
 3.3.4
Summary ......................................................................................................... 25
 4.
Requirements ....................................................................................................... 26
 4.1
User
Requirements .......................................................................................... 26
 4.2
Interface .......................................................................................................... 27
 5.
Conclusion ............................................................................................................ 28
 References ................................................................................................................ 29
 
 3

4

1.
Introduction
 
 World
 Wide
 Web
 is
 evolving
 to
 become
 the
 primary
 media
 for
 knowledge
 exchange.
 The
 Internet
is
now
the
main
platform
for
electronically
delivered
content,
whether
it
is
scientific
 information,
news,
entertainment
or
simple
personal
stories.
Web
evolution
led
to
the
birth
 of
Web2.0.
With
it,
a
new
wave
of
applications
appeared,
empowering
the
user
with
control
 over
the
web.
This
shift
in
control
resulted
in
several
new
hot
applications
that
enable
users
 to
publish
their
own
personal
content
[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
 on
 usability,
 user
 interface
 and
 available
 features.
 Data
 and
 information
 visualization
 has
 been
 one
 of
 the
 subjects
 of
 this
 shift
 to
 web
 applications.
This
raised
a
new
class
of
challenge,
mostly
due
to
resource
consumption
and
 complex
 web
 architectures.
 Even
 before
 Web2.0
 or
 even
 Google,
 there
 were
 several
 challenges
 in
 web‐based
 data
 visualization
 [2].
 With
 the
 evolution
 of
 the
 Internet,
 so
 have
 the
challenges
changed.
 The
 focus
 is
 now
 divided
 in
 three
 main
 challenges:
 moving
 complex
 desktop
 visualization
 applications
 to
 a
 web
 environment,
 improve
 existing
 user
 interfaces
 by
 reducing
usability
complexities
[3,
4]
and
creating
powerful
–
but
simple
–
data
visualization
 components
 that
 can
 be
 easily
 used
 by
 any
 developer,
 like
 GeoBoost
 [5]
 for
 instance.
 This
 report
 approaches
 the
 latter
 issue
 and
 tries
 to
 make
 a
 general
 overview
 over
 visualization
 components
that
can
be
helpful
to
everyday
developers
and
researchers.
 Considering
 that
 the
 web
 ecosystem
 is
 currently
 the
 main
 information
 exchange
 platform,
 developers
 and
 researchers
 need
 to
 publish
 information
 online
 and,
 in
 several
 cases,
large
datasets
have
to
be
published
in
an
attractive
format.
Several
frameworks
are
 being
 developed
 in
 the
 science
 world
 to
 facilitate
 this
 process,
 like
 WVFA
 [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
 generation
 web
 applications
 and
 a
 set
 of
 tools
 that
 can
 ease
 the
 task
 of
 creating
and
interactive
timeline
or
presenting
geographic
information.
 
 5

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
 section
 with
 some
 topics
 that
 web
 developers
 should
 take
 in
 account
 when
 designing
a
new
web
application.

6

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,
stylesheets
and
plugins.
The
possibilities
that
were
enabled
with
the
power
to
include
 visual
 information
 in
 a
 web
 page
 was
 immense.
 With
 this,
 developers
 started
 to
 include
 tables,
images
and
empowered
the
development
of
standards
like
Cascade
Styling
Sheets
–
 CSS
–
and
ECMAScript
–
Javascript.

Figure
1
‐
ViolaWWW
browser
showing
page
with
images

When
maturity
in
the
inclusion
of
visual
information
was
reached
it
was
time
to
include
 traditional
 desktop
 visualization
 components
 in
 web
 pages.
 Circa
 1997,
 Java
 applets
 appeared,
enabling
the
creation
of
applications
that
were
deployed
in
the
client;
thus,
being
 
 7

able
 to
 implement
 a
 new
 set
 of
 interface
 and
 visualization
 features.
 Along
 with
 these
 improvements,
developers
started
the
work
on
the
inclusion
of
3D
graphics
–
VRML
–
in
web
 pages
[8].
The
inclusion
of
VRML
content
in
web
pages
is
not
a
trivial
task
and
it
requires
a
 client‐side
 plugin
 for
 proper
 functionality.
 Hence,
 the
 users
 need
 to
 install
 a
 VRML
 application
in
order
to
see
the
three‐dimensional
data
displayed
online.
Java
applets
were
a
 more
 successful
 approach.
 Java
 was
 more
 widely
 installed
 than
 VRML
 and,
 additionally,
 it
 allowed
the
development
of
software
with
a
higher
level
of
complexity,
instead
of
the
simple
 VRML
models.
Even
with
all
the
advances,
VRML
is
still
used
in
several
fields
for
creating
3D
 environments
in
the
browser
[9,
10].
Java
applet
usage
is
decreasing
with
the
appearance
of
 novel
 client‐side
 technologies.
 Some
 of
 the
 best
 Java‐based
 information
 visualization
 tools
 (mixed
with
text‐mining)
are
Jonathan
Harris’
We
Feel
Fine1
(Figure
2)
and
Universe2.
These
 applications
 gather
 knowledge
 that
 is
 scattered
 through
 several
 blogs
 or
 RSS
 feeds
 and
 processes
it,
creating
astonishing
visual
results.
However,
with
the
advent
of
Web2.0,
a
new
 set
 of
 technologies
 gained
 significance
 in
 web
 development.
 Adobe
 Flash3
 Microsoft
 Silverlight4
and
AJAX
are
the
new
wave
of
technologies
that
empower
the
web
ecosystem.

Figure
2
‐
We
Feel
Fine
sample
interface

1 
We
Feel
Fine:
http://www.wefeelfine.org

 2 
Universe:
http://universe.daylife.com

 3 
Adobe
Flash:
http://www.adobe.com/products/flash

 4 
Microsoft
Silverlight:
http://www.silverlight.net

 
 8

Summarizing,
 the
 key
 point
 is
 that
 we
 have
 witnessed
 a
 shift
 in
 the
 main
 purpose
 of
 web
data
visualization.
About
10
years
ago,
the
goal
was
to
adapt
desktop‐based
techniques
 to
 web
 pages.
 This
 increased
 the
 web
 applications
 weight
 and
 resulted
 in
 a
 complex
 deployment
model.
Nowadays,
the
main
purpose
is
to
use
novel
web
technologies
to
offer
 desktop‐like
 solutions
 to
 users.
 With
 higher
 bandwidths
 and
 cross‐browser/cross‐platform
 technologies,
it
is
possible
to
create
web
applications
that
resemble
desktop
applications
in
 terms
 of
 appearance,
 resources
 and
 available
 features.
 However,
 deploying
 visualization
 applications
in
the
web
has
increased
the
complexity
of
existing
visualization
issues
[11]
and
 added
another
level
of
issues
related
to
the
amount
of
information
that
has
to
be
obtained
 and
processed
in
real‐time
by
client‐side
–
browser‐based
–
frameworks.

9

3.
Web2.0
 
 After
 the
 “dot‐com
 boom”,
 the
 Internet
 needed
 an
 orientation
 change.
 The
 exponential
 increase
on
the
number
of
web‐based
enterprises
led
to
a
sector
crisis.
The
change
came
in
 the
form
of
Web2.0
[12].
The
main
Web2.0
purpose
is
to
give
user
control
over
content.
The
 typical
 Web2.0
 business
 model
 consists
 in
 developing
 profitable
 concepts
 that
 can
 be
 maintained
 by
 users
 ‐
 Figure
 3.
 The
 majority
 of
 the
 Internet
 content
 does
 not
 come
 from
 specialized
 technicians.
 Nowadays,
 the
 content
 comes
 from
 end
 users.
 Applications
 like
 blogs,
micro‐blogs,
social
networks,
media
networks,
social
bookmarks
or
meta‐applications
 like
 mashups
 or
 workflows
 are
 currently
 the
 main
 trend
 in
 web
 applications.
 These
 applications
depend
on
users
to
create
content
and
publish
it
online.

Figure
3
‐
Web1.0
vs
Web2.0

3.1
Technologies
 As
previously
mentioned,
we
have
three
top
technologies
for
the
creation
of
Rich
Internet
 Applications
that
require
excellent
user
interface
and
data
visualization
features.
This
section
 encloses
a
brief
description
on
each
of
them.
Next,
there
are
practical
examples
of
modern
 visualization
approaches
implemented
with
these
technologies.

10

3.1.1
Flash
 The
 oldest
 one
 is
 Adobe
 Flash.
 Flash
 was
 initially
 created
 for
 designers
 and
 it
 allowed
 the
 creation
 of
 high‐quality
 and
 visually
 stimulating
 interfaces.
 Recently,
 Adobe
 has
 opted
 to
 update
the
newer
versions
to
a
much
more
developer‐oriented
version.
The
now
designated
 Flash
Platform
empowers
developers
in
the
creation
of
visually
richer
and
more
structurally
 complex
applications,
combining
server‐side
with
client‐side
development.
Despite
requiring
 a
plugin,
it
is
almost
completely
cross‐platform
and,
in
the
last
iterations,
allows
the
display
 of
complex
3D
models
and
the
processing
of
huge
datasets.
With
this,
it
is
easier
to
integrate
 data
and
generate
graphs
or
to
conceive
novel
visualization
structures.

3.1.2
Silverlight
 Flash’s
main
competitor
is
Microsoft
Silverlight.

Silverlight
has
almost
the
same
features
as
 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
 comes
to
applications
that
need
to
display
large
amounts
of
data
in
an
interactive
interface
 that
is
capable
of
following
several
usability
good
practices.
 The
 main
 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
 administrative
access
may
not
be
able
to
view
the
developed
components
in
their
browsers.

3.1.3
AJAX
 AJAX
stands
for
Asynchronous
Javascript
and
XML
and
it
is
the
main
alternative
to
Flash
and
 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
 Object
Model.
This
makes
AJAX
cross‐browser
and
cross‐platform.
It
also
means
that
it
does
 not
require
that
any
kind
of
pluging
installation.
 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

11

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
“white
screens”
between
user
clicks.

3.2
Approaches
 Data
visualization
interface
can
be
unique
in
terms
of
content,
elegance,
beauty
and,
above
 all,
 description.
 Histograms,
 tables,
 bar
 or
 pie
 graphs
 are
 used
 daily
 in
 the
 most
 diverse
 projects.
However,
there
are
other
ways
of
conveying
a
message
to
users
effectively
than
a
 simple
 histogram.
 This
 small
 section
 intends
 to
 introduce
 modern
 data
 visualization
 techniques
and
how
they
can
be
created
used
the
presented
technologies.
 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.
 In
 addition,
 it
 is
 also
 important
 to
 remember
 that
 most
 of
 the
 times
 the
 simpler
 methods
are
the
most
effective
ones.
This
advice
is
valid
not
only
to
data
visualization
but
 also
to
the
design
of
human‐computer
interfaces.

3.2.1
Textual
content
visualization
 The
 appearance
 of
 RSS
 feeds
 allowed
 users
 to
 syndicate
 content
 and
 publish
 it
 in
 formats
 that
can
be
used,
autonomously,
by
any
application,
leveraged
the
creation
of
several
new
 visualization
 tools.
 These
 visualization
 tools
 mostly
 provide
 timeline
 displays
 of
 news
 or
 graphical
display
of
relevant
topics.
 Newsmaps
 (Figure
 4)
 is
 a
 particular
 implementation
 of
 the
 traditional
 tree
 map
 view,
 developed
 in
 Flash.
 This
 information
 visualization
 approach
 organizes
 the
 hierarchical
 tree
 organization
in
several
connected
squares,
representing
news
and
relations
between
news.
 This
approach
can
be
very
useful
when
one
wants
to
display
large
textual
content
that
is,
in
 some
manner,
related.
Similar
data
visualization
mechanisms
can
be
implemented
to
gather
 information
 concerning
 a
 particular
 topic
 or
 interest
 area
 instead
 of
 simple
 reading
 the

12

international
 newspapers
 RSS
 feeds.
 A
 practical
 example
 could
 be
 the
 display
 of
 a
 medical
 ontology,
containing
diseases,
phenotypes
and
symptoms.
 The
same
team
behind
We
Feel
Fine
created
the
Universal
Daylife
viewer
(Figure
5)
to
 access
worldwide
news
data
searching
for
topics
and
displaying
them
in
a
virtual
universe.
 The
user
may
then
watch
the
sky
and
search
for
stars
and
constellations
which
are
dynamic
 relations
 obtained
 from
 the
 provided
 input.
 This
 viewer
 is
 a
 complex
 Java
 applet
 and
 is
 a
 remarkable
achievement
in
the
quality
of
these
kinds
of
applications.

5

Figure
4
‐
Newsmap
data
visualization
interface

6

Figure
5
‐
Universal
Daylife
viewer

5 
Newsmap:
http://newsmap.jp

 
 13

3.2.2
Maps
 Advances
in
the
technology
made
the
existence
of
world
maps
with
detailed
satellite
images
 possible.
 There
 are
 several
 map
 APIs
 that
 allow
 developers
 to
 create
 new
 layers
 of
 information
on
top
of
the
geographical
maps.
This
means
that
it
is
easier
and
faster
to
create
 visualization
 applications
 displaying
 geographical‐related
 data.
 Figure
 6
 shows
 how
 we
 can
 use
 the
 Google
 Maps
 API
 and
 connect
 it
 with
 the
 YouTube
 API
 to
 create
 a
 visualization
 application
that
shows
all
the
countries
that
participated
in
the
Eurovision
2009
contest
and
 enables
the
users
to
view
the
videos
of
the
songs
in
the
contest.
 The
several
maps
APIs
allow
connections
to
any
kind
of
application
and
the
display
of
 information
related
to
any
area.

Figure
6
‐
Google
Maps
Eurovision
Contest
viewer

6 
Universal
Daylife:
http://universe.daylife.com


 
 14

3.2.3
Interactive
Timelines
 Timelines
[13,
14]
traditionally
display
data
ordered
in
a
specific
date
scale.
However,
static
 timelines
 are
 not
 useful
 to
 present
 large
 amounts
 of
 information.
 Any
 of
 the
 mentioned
 technologies
allows
the
creation
of
interactive
timelines
that
may
include
a
mesh
of
content
 from
 separate
 areas
 and
 gathered
 from
 distinct
 sources.
 Figure
 7
 shows
 an
 interactive
 timeline,
developed
by
BBC,
displaying
the
most
relevant
events
in
British
History.

7

Figure
7
‐
British
History
interactive
timeline

The
Voyage
news
reader
(Figure
8)
displays
data
content
in
an
improved
timeline.
The
 content
 is
 highlighted
 with
 focus
 changes
 that
 create
 a
 depth
 experience
 in
 the
 browser.
 Users
can
navigate
in
the
timeline:
the
nearest
layer
is
the
most
recent
and
by
going
deeper
 they
 view
 older
 news.
 Once
 again,
 this
 kind
 of
 interactive
 timeline
 can
 be
 used
 in
 several
 distinct
scenarios
that
require
information
presentation
in
some
kind
of
sortable
scale.

7 
BBC
British
History
interactive
timeline:
http://bit.ly/pnRur

 
 15

8

Figure
8
‐
Voyage
news
reading
interface

3.2.4
Mindmaps
 Mindmaps
 [15]
 are
 data
 visualizations
 that
 present
 several
 connections
 and
 relations
 in
 a
 way
similar
to
subway
maps.
Using
interactive
mindmaps,
users
can
select
a
single
element
 and
view/navigate
inside
its
relations,
without
losing
context
information
on
the
remaining
 elements
of
the
map.
Static
mindmaps
are
poorer
but
they
provide
a
more
generic
overview
 on
 larger
 datasets.
 Figure
 9
 shows
 a
 mindmap
 containing
 the
 web
 search
 trends
 in
 2007
 related
like
a
subway
map.

8 
Voyage
RSS
News
Reader:
http://rssvoyage.com

 
 16

9

Figure
9
‐
Web
Trends
map
in
2007

3.3
Tools
 To
 use
 the
 presented
 technologies,
 developers
 do
 not
 need
 to
 start
 from
 scratch
 and
 develop
a
new
set
of
components
that
allow
them
to
create
modern
web
visualization
tools.
 There
are
several
toolkits
available
that
ease,
significantly,
developers’
tasks
and
allow
the
 creation
of
solutions
tailored
to
each
specific
project.

3.3.1
Flash
 The
 Flash
 Platform
 is
 a
 success
 case
 in
 merging
 complex
 data
 visualization
 with
 fully
 functional
 applications.
 Demandbase10
 (Figure
 10),
 ModelMetrics11
 or
 Nasdaq
 OMX12
 represent
state‐of‐the‐art
Flash‐based
applications
where
information
visualization
plays
the
 key
role.
These
applications
deal
with
several
databases
and
process
millions
of
records,
in
 real‐time,
before
presenting
them
to
the
users.

9 
Web
Trends
2007:
http://informationarchitects.jp/start

 10 
Demandbase:
http://www.adobe.com/flashplatform/apps/demandbase

 11 
ModelMetrics:
http://www.adobe.com/flashplatform/apps/model_metrics

 12 
Nasdaq
OMX:
http://www.adobe.com/flashplatform/apps/nasdaq

 
 17

Figure
10
‐
Demandbase
interface

To
 create
 smaller
 customized
 solution
 one
 can
 use
 the
 Flare13
 ActionScript
 collection.
 This
collection
contains
various
ActionScript
scripts
that
can
be
used
with
the
free
Flex
SDK14
 to
create
web‐based
visualization
applications.
The
available
scripts
provide
an
easy
way
to
 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
 multitude
of
categories
and
evaluated
elements
that
are
displayed,
automatically,
in
a
single
 composite
graph.

13 
Prefuse
Flare:
http://flare.prefuse.org

 14 
Adobe
Flex:
http://www.adobe.com/products/flex 
 
 18

Figure
11
‐
Prefuse
Flare
bar
example

3.3.2
Silverlight
 Descry15
 and
 several
 Telerik
 components16
 are
 perfect
 examples
 of
 Silverlight’s
 data
 visualization
capabilities.
With
them
it
is
possible
to
easily
create
novel
applications
that
can
 merge
 data
 gathered
 from
 several
 sources,
 presenting
 it
 to
 users
 in
 a
 captivating
 user
 interface.
Figure
12
shows
a
practical
Descry
example.
It
contains
data
from
USA’s
50
states
 regarding
obese
population
percentage.
Instead
of
traditional
bar
charts,
Descry’s
approach
 uses
T‐shirts
representing
each
state
that
are
colored
and
enlarged
according
to
the
state’s
 obesity
 parameters,
 creating
 a
 richer
 visualization
 interface
 that
 users
 can
 interact
 and
 analyze
in
real‐time.

15 
Descry:
http://www.visitmix.com/Lab/Descry

 16 
Telerik
Chart:
http://www.telerik.com/products/silverlight/chart.aspx

 
 19

17

Figure
12
‐
Descry
visualization
of
the
obese
population
in
the
United
States
of
America

3.3.3
AJAX
 To
 develop
 applications
 using
 AJAX,
 one
 can
 use
 any
 web
 application
 technology
 in
 the
 server‐side.
 Applications
 can
 have
 the
 background
 with
 simple
 HTML,
 XML,
 ASP.NET,
 Java,
 PHP,
 Python
 or
 any
 other
 server‐side
 controller
 language.
 Regarding
 the
 client‐side,
 there
 are
 many
 frameworks
 available
 for
 composing
 the
 typical
 rich
 user
 interface
 that
 remarks
 Web2.0
applications.
The
more
widely
used
AJAX
frameworks
are:
jQuery18,
script.aculo.us19,
 Prototype20
and
Dojo21.
 These
 frameworks
 were
 built
 for
 generic
 purposes.
 Despite
 the
 fact
 that
 they
 are
 not
 focused
on
solving
visualization
issues,
there
are
diverse
visualization
components
that
can
 be
easily
implemented.
To
create
state‐of‐the‐art
web
data
visualization
applications
there
 are
other
groups
of
more
focused
frameworks.
The
following
paragraphs
describe
the
best
 Javascript
visualization
toolkits
and
web‐based
visualization
applications.
 The
 first
 example
 comes
 from
 the
 worldly
 known
 MIT.
 MIT’s
 SIMILE
 Project22
 has
 several
teams
working
on
data
visualization
tools.
This
is
an
ongoing
research
project;
hence,
 























































 17 
Descry
Obesity:
http://www.visitmix.com/labs/descry/theobesityepidemic

 18 
jQuery:
http://jquery.com

 19 
Script.aculo.us:
http://script.aculo.us

 20 
Prototype
JavaScript:
http://www.prototypejs.org

 21 
Dojo
Toolkit:
http://www.dojotoolkit.org

 22 
SIMILE
Project:
http://simile.mit.edu

 
 20

there
 are
 only
 a
 few
 stable
 widgets
 available23.
 Timeline
 (Figure
 13)
 and
 Timeplot
 widgets
 are
 ideal
 for
 interactive
 timeline
 creation
 and
 the
 display
 of
 advanced
 time‐related
 information.

Figure
13
‐
SIMILINE
Timeline
example

The
 Javascript
 Information
 Visualization
 Toolkit24
 –
 JIT
 –
 is
 simple
 Javascript
 library
 to
 create
advanced
information
visualization
applications.
This
toolkit
allows
the
easy
creation
 and
 online
 display
 of
 mainly
 interactive
 trees
 and
 graphs.
 The
 focus
 is
 given
 to
 the
 easy
 creation
of
visualizations
displaying
relational
information.
Figure
14
shows
a
hyperbolic
tree
 containing
a
relation
map
of
the
elements
of
the
Pearl
Jam
band.
Users
can
select
any
band
 element
and
view,
in
real
time,
the
relations
they
have
within
the
music
industry.

23 
SIMILE
Widgets:
http://www.simile‐widgets.org

 24 
JIT:
http://www.thejit.org

 
 21

Figure
14
‐
JIT
Hyperbolic
relation
tree

The
 presented
 frameworks
 are
 good
 for
 some
 specific
 purposes.
 However,
 for
 more
 generic
purposes,
there
is
the
Google
Visualization
API25.
This
extensive
framework,
created
 and
supported
by
Google,
contains
several
useful
components
ranging
from
maps
to
tables,
 from
 word
 clouds
 to
 interactive
 charts.
 Most
 of
 the
 available
 components
 are
 also
 integrated
in
Java
AJAX
Google
Web
Toolkit26
framework.
Being
a
framework
developed
by
 Google,
 there
 is
 extremely
 good
 support
 and
 the
 quality
 of
 this
 framework
 cannot
 be
 questioned.

Using
Google
Visualization
API
it
is
possible
to
implement
some
of
the
modern
 visualization
 techniques
 mentioned
 previously.
 The
 more
 interesting
 feature
 in
 this
 API
 is
 that
 the
 source
 datasets
 can
 be
 easily
 obtained
 via
 Javascript.
 This
 means
 that
 one
 can
 























































 25 
Google
Visualization
API:
http://code.google.com/apis/visualization

 26 
Google
Web
Toolkit:
http://code.google.com/webtoolkit

 
 22

dynamically
mesh
several
data
sources
in
a
single
visualization
component.
Another
relevant
 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
 Annotated
 Time
 Line
 (Figure
 15)
 enables
 the
 creation
 of
 interactive
 timelines
 with
 relative
 ease.

Figure
15
‐
Google's
Annotated
Timeline

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‐ related
data
to
these
charts
providing
a
better
understanding
of
the
evolution
on
a
specific
 case.
For
instance,
one
can
provide
data
about
sales
results
for
a
given
company
on
an
entire
 year
and
push
the
“play”
button
and
watch
results
evolving
in
the
browser.

23

Figure
16
‐
Google's
Motion
Chart

As
 previously
 mentioned,
 maps
 are
 currently
 on
 top
 of
 the
 preferences
 for
 displaying
 geographical
 data
 [16].
 This
 is
 mostly
 due
 to
 the
 fact
 that
 several
 interactive
 maps
 have
 appeared
 online.
 Google
 is
 no
 exception
 and
 provides
 a
 comprehensive
 API
 allowing
 the
 creation
of
novel
applications
that
need
to
display
geographical
information.
It
is
possible
to
 create
several
visual
layers
of
information,
map
zones
or
even
real‐time
evolving
maps.
 Despite
 the
 fact
 that
 there
 are
 lots
 of
 modern
 trends
 in
 displaying
 data,
 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
 static
 HTML
 tables
 as
 these
 new
 tables
 can
 be
 sorted
 and
 paginated
 in
 real‐time.
 Figure
17
shows
a
dynamic
Google
Table
instance,
containing
three
data
fields.
The
data
in
 the
table
can
be
sorted
by
any
of
the
fields
and,
if
required,
can
even
be
edited
in
real
time.

Figure
17
‐
Google's
Table

24

3.3.4
Summary
 Nowadays,
 it
 is
 easy,
 to
 any
 experienced
 developer,
 to
 create
 an
 information
 visualization
 application
that
solves
his
data
representation
problem.
Whether
using
Flash,
Silverlight
or
 AJAX,
developers
can
create
interactive
visualizations
that
will
enrich
their
work
and,
at
the
 same
 time,
 present
 data
 to
 users
 in
 a
 captivating
 interface
 and
 offering
 an
 effective
 user
 experience.
 In
order
to
understand
the
generic
capabilities
of
the
described
tools,
Table
1
presents
a
 short
 comparison
 of
 the
 evaluated
 tools.
 Five
 fields
 were
 evaluated
 in
 a
 1
 to
 5
 scale;
 the
 fields
represent
the
main
features
of
the
tools.
Ease
of
Use
classifies
how
easy
it
is
to
create
 a
 simple
 solution
 using
 the
 select
 tool.
 Learning
 Curve
 is
 used
 to
 classify
 the
 process
 of
 creating
 advanced
 visualization
 applications
 with
 the
 selected
 tools.
 Adaptability
 evaluates
 how
the
selected
tool
is
adaptable
to
a
particular
issue
in
a
specific
scientific
area.
Number
 of
Tools
describes
the
number
and
diversity
of
the
available
frameworks
in
the
selected
tool.
 Future
represents
the
probability
of
further
developments
that
will
significantly
enhance
the
 selected
tool.
Finally,
Overall
classifies
the
overall
quality
of
the
tool.
 Table
1
‐
Tool
comparison

Flash

Silverlight

Javascript

Google
API









Learning
Curve









Adaptability

















Future









Overall









Ease
of
Use

Number
of
Tools

Legend:

 
 
 1
/
Very
Weak
/
Very
Hard
 
 2
/
Weak
/
Hard
 
 3
/
Moderate
 
 4
/
Strong
/
Easy
 
 5
/
Very
Strong
/
Very
Easy

25

4.
Requirements
 
 One
of
the
outcomes
of
this
report
is
to
provide
a
simple
guide
for
some
good
practices
and
 requirements
for
future
developers
of
web
data
visualization
applications.
The
idea
is
not
to
 detail
 user
 or
 technical
 requirements
 of
 any
 particular
 application
 but
 to
 provide
 a
 comprehensive
 list
 of
 topics
 that
 should
 be
 addressed
 by
 any
 web
 developer
 in
 order
 to
 create
richer
Internet
applications
that
result
in
improved
user
experiences.

4.1
User
Requirements
 The
following
user
requirements
should
be
accomplished
in
any
web
application,
especially
 in
the
current
era,
where
application
design
and
appearance
has
gained
significant
relevance
 [17].
 However,
 considering
 that
 one
 is
 trying
 to
 present
 large
 datasets
 with
 a
 modern
 visualization
technique,
these
features
become
even
more
crucial.
  Ease
of
use:
web
applications
should
be
easily
used
for
people
with
high
computer

skills
 but
 also
 for
 people
 with
 no
 background
 in
 computer
 science.
 End‐users
 sometimes
 face
 complex
 applications
 that
 only
 difficult
 their
 comprehension
 and
 understanding
of
the
presented
information.
  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
 themes
and
fonts,
and
should
also
make
keyboard
shortcuts
available
for
the
most
 relevant
actions.
  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
 application
usability.
This
can
be
achieved
through
small
help
boxes,
video
tutorials
 of
the
main
functionalities
or
a
manual
exemplifying
how
to
use
the
application’s
 key
features.
  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

26

should
present
feedback
to
the
users,
showing
that
the
system
“is
moving”.
With
 AJAX
patterns,
it
is
easier
to
create
this
fluid
execution
mechanism,
where
the
user
 realizes
what
is
happening
inside
the
application
through
an
interface
hint
instead
 of
staring
at
a
blank
screen
while
the
page
is
being
loaded.
Besides
having
a
fluid
 interface,
the
application
should
also
be
faster
in
the
background:
Steve
Souders’
 High
 Performance
 Web
 Sites
 [18]
 is
 the
 best
 source
 for
 what
 aspects
 should
 be
 taken
into
account
when
developing
a
novel
web
application.

4.2
Interface
 The
 user
 interface
 is
 the
 main
 contact
 point
 between
 the
 application
 and
 the
 users.
 It
 is
 through
it
that
users
interact
with
the
information,
meaning
that
it
is
what
the
users
will
see
 and
 use.
 Therefore,
 it
 is
 important
 for
 any
 web
 developer
 to
 follow
 a
 broad
 collection
 of
 good
practices
that
improve
the
overall
application
interface
quality.
Some
of
the
qualities,
 that
user
interfaces
should
have,
in
order
to
enhance
usability
[19],
are
the
following:
  Clean:
the
user
interface
should
be
as
clean
as
possible,
reducing
workspace
clutter

and
 the
 amount
 of
 data
 shown
 to
 users.
 It
 is
 better
 to
 present
 less
 information
 with
 more
 quality
 than
 more
 information
 filling
 the
 entire
 web
 page
 without
 any
 visible
distinction.
  Light:
web
applications
depend
on
the
available
bandwidth
to
operate
efficiently.
If

the
 interface
 is
 cluttered
 with
 heavy
 elements
 such
 as
 images
 and
 scripts
 it
 will
 require
longer
loading
times,
constraining
the
user
experience
from
the
start.
  Usable
 heuristics:
 a
 good
 idea
 to
 design
 human‐computer
 interfaces
 is
 to
 study

Nielsen’s
Usability
Heuristics
[20].
These
heuristics
have
gained
some
relevance
in
 the
 human‐computer
 interaction
 world
 and
 provide
 a
 good
 setup
 for
 any
 developer
 or
 designer.
 However,
 they
 are
 not
 obliged
 to
 follow
 these
 references
 but
they
are
an
initial
step
to
produce
quality
work.

27

5.
Conclusion
 
 The
 Internet
 has
 grown
 to
 provide
 the
 most
 complete
 application
 environment
 known
 to
 date.
 With
 this
 growth,
 applications
 have
 changed.
 The
 Web
 can
 now
 be
 understood
 as
 a
 complete
application
platform,
overcoming
many
of
the
desktop
faults.
With
this
in
mind,
it
 is
getting
more
and
more
important
that
researchers
publish
their
discoveries
and
research
 work
online.

 Visualization
techniques
are,
since
a
long
time
ago,
helpful
to
any
researcher
that
needs
 to
 display
 large
 datasets
 of
 information
 in
 a
 comprehensive
 manner.
 Tables,
 charts
 and
 many
 other
 types
 of
 graphs
 are
 traditional
 techniques
 to
 facilitate
 users’
 task
 of
 analyzing
 large
amounts
of
data.
Combining
both
these
key
ideas,
it
is
obvious
that
the
Internet
has
to
 support
these
data
visualization
techniques
and
enhance
them,
creating
interfaces
that
were
 not
possible
if
one
only
used
closed
desktop
applications.
 This
report
details
some
of
the
modern
techniques
that
are
replacing
static
tables
and
 charts
 as
 visualization
 components.
 Additionally,
 it
 presents
 tools
 to
 implement
 these
 techniques
 that
 can
 be
 easily
 adopted
 by
 any
 researcher
 to
 present
 his
 discoveries
 online.
 Interactive
 timelines,
 maps
 or
 motion
 charts
 are
 some
 of
 these
 techniques.
 They
 can
 be
 easily
deployed
with
the
described
frameworks.
These
Flash,
Silverlight
or
AJAX
frameworks
 will
 empower
 researchers
 with
 the
 tools
 needed
 to
 create
 next‐generation
 visualization
 components
and
present
large
datasets
of
information.
These
components
will
give
users
a
 faster
insight
on
the
knowledge
researchers
are
presenting,
thus,
increasing
result
visibility
 and
overall
usability.

28

References
 
 1.
 2.
 3.
 4.
 5.
 6.
 7.
 8.
 9.
 10.
 11.
 12.
 13.
 14.
 15.
 16.
 17.
 18.
 19.

Lopes,
P.,
Integração
de
Serviços
para
Extracção
de
Conhecimento,
in
Electronics,
 Telecommunications
 and
 Informatics
 Department.
 2008,
 University
 of
 Aveiro:
 Aveiro.
 Rohrer,
 R.M.
 and
 E.
 Swing,
 Web­based
 information
 visualization.
 Computer
 Graphics
and
Applications,
IEEE,
1997.
17(4):
p.
52‐59.
 Chi,
 E.H.,
 Improving
 Web
 usability
 through
 visualization.
 Internet
 Computing,
 IEEE,
2002.
6(2):
p.
64‐71.
 Olivares
 R,
 J.C.,
 et
 al.,
 Using
 Web
 Pages
 Accessible
 Design
 for
 the
 Correct
 Web
 Visualization.
 Latin
 America
 Transactions,
 IEEE
 (Revista
 IEEE
 America
 Latina),
 2007.
5(2):
p.
122‐127.
 Eick,
S.G.,
et
al.
GeoBoost:
An
AJAX
Web
2.0
Collaborative
Geospatial
Visualization
 Framework.
in
Aerospace
Conference,
2007
IEEE.
2007.
 Eibe,
 S.
 and
 O.
 Marban.
 WVFA:
 a
 Web
 visualization
 framework
 architecture.
 in
 IEEE
International
Conference
on
Information
Reuse
and
Integration.
2004.
 Wei,
P.‐Y.
Viola
Home
Page.

2008

[cited
2009
2009‐05‐15].
 Jern,
 M.
 3D
 data
 visualization
 on
 the
 Web.
 in
 Conference
 Proceeding
 of
 the
 Multimedia
Modeling
Conferecen,
MMM
'98.
1998.
 Jianghui,
Y.,
D.
Gracanin,
and
L.
Chang‐Tien.
Web
visualization
of
geo­spatial
data
 using
 SVG
 and
 VRML/X3D.
 in
 Image
 and
 Graphics,
 2004.
 Proceedings.
 Third
 International
Conference
on.
2004.
 Lai
 Feng,
 M.,
 A.
 Sourin,
 and
 K.
 Levinski.
 Function­based
 3D
 web
 visualization.
 in
 Cyber
Worlds,
2002.
Proceedings.
First
International
Symposium
on.
2002.
 Chen,
C.,
Top
10
unsolved
information
visualization
problems.
Computer
Graphics
 and
Applications,
IEEE,
2005.
25(4):
p.
12‐16.
 Oreilly,
 T.,
 What
 is
 Web
 2.0:
 Design
 Patterns
 and
 Business
 Models
 for
 the
 Next
 Generation
of
Software.
2007:
SSRN.
 Karam,
 G.M.,
 Visualization
 using
 timelines,
 in
 Proceedings
 of
 the
 1994
 ACM
 SIGSOFT
 international
 symposium
 on
 Software
 testing
 and
 analysis.
 1994,
 ACM:
 Seattle,
Washington,
United
States.
 Kumar,
 V.,
 R.
 Furuta,
 and
 R.B.
 Allen,
 Metadata
 visualization
 for
 digital
 libraries:
 interactive
timeline
editing
and
review,
in
Proceedings
of
the
third
ACM
conference
 on
Digital
libraries.
1998,
ACM:
Pittsburgh,
Pennsylvania,
United
States.
 Spangler,
 S.,
 J.T.
 Kreulen,
 and
 J.
 Lessler.
 MindMap:
 utilizing
 multiple
 taxonomies
 and
 visualization
 to
 understand
 a
 document
 collection.
 in
 System
 Sciences,
 2002.
 HICSS.
Proceedings
of
the
35th
Annual
Hawaii
International
Conference
on.
2002.
 Tufte,
 E.R.
 and
 G.M.
 Schmieg,
 The
 Visual
 Display
 of
 Quantitative
 Information.
 American
Journal
of
Physics,
1985.
53(11):
p.
1117‐1118.
 Wood,
 L.E.,
 User
 Interface
 Design:
 Bridging
 the
 Gap
 from
 User
 Requirements
 to
 Design.
1997:
CRC
Press,
Inc.
320.
 Souders,
 S.,
 High
 Performance
 Web
 Sites:
 Essential
 Knowledge
 for
 Front­End
 Engineers:
O'Reilly
Media,
Inc.
168.
 Dumas,
 J.S.
 and
 J.C.
 Redish,
A
 Practical
 Guide
 to
 Usability
 Testing.
 1999:
 Intellect
 Books.
416.

29

20.

Nielsen,
J.
Heuristics
for
User
Interface
Design.

2005
2005
[cited
2009
2009‐05‐ 13];
Available
from:
http://www.useit.com/papers/heuristic/heuristic_list.html.

30

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.