GViz - Project Report

Geo-Data Visualization Framework
(GViz)

Group Members:
M. W. Edirisooriya (070115U)
B. P. P. Fernando (070123R)
T. A. M. P. Fernando (070134C)
W.A.W.S.K. Wickramasinghe (070535G)

Project Supervisor:
Dr. Shahani Markus Weerawarana

Project Coordinator:
Dr. Shantha Fernando

Date of submission:
05th September 2011

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING
UNIVERSITY OF MORATUWA

This report is submitted in partial fulfillment of the requirements for the award of the degree of
Bachelor of the Science of Engineering at University of Moratuwa, Sri Lanka

Declaration

This thesis is a report of the project work and research carried out in the Department of
Computer Science and Engineering, University of Moratuwa, from September 2010 to
August 2011.

Except where references are made to other work, the content of the thesis is original and
includes the work done in collaboration as a team. This thesis has not been submitted to any
other university.

………………………………………. ……………………………………….
M. W. Edirisooriya B. P. P. Fernando

………………………………………. ……………………………………….
Date Date

………………………………………. ……………………………………….
T. A. M. P. Fernando W.A.W.S.K. Wickramasinghe

………………………………………. ……………………………………….
Date Date

………………………………………. ……………………………………….
Dr. Shahani Weerawarana Dr. Shantha Fernando

………………………………………. ……………………………………….
Date Date

GViz Framework Page i

Abstract

Project Title: Geo-Data Visualization Framework (GViz)
Authors: M. W. Edirisooriya,
B. P. P. Fernando,
T. A. M. P. Fernando and
W.A.W.S.K. Wickramasinghe.
Supervisor: Dr. Shahani Weerawarana
Contents:
GViz Framework is a Geo-Data Visualization Framework build using JavaScript. It enables
to reuse existing JavaScript API‟s, libraries and components to build complex data
visualization dashboards for the web with integrated event binding to interact between
components. The framework uses DSPL (Dataset Publishing Language) to represent data,
metadata of datasets and its relation with visualization components.

To visualize geo data in the web, there are many map API‟s freely available along with
visualization components such as charts, graphs etc. But using more than one component to
visualize the data makes things more complex and very hard for the application to evolve. It
becomes extremely difficult to provide interaction among visualization components and to
allow scalability of the application to use different data sources and new visualization
components.

GViz Framework addresses the above problems by providing a simple mechanism of
integration and a single point of configuration using a XML (DSPL). The extendable nature
of the Framework provides a flexible mechanism for integrating new visualization
components and data sources by using its adapter interface.

The Framework is directly usable for web developers to build complex dashboards for the use
of scientists, economists, policy makers, engineers, researchers and etc., interested in
visualizing geographically distributed data.

Keywords: GViz framework, Geo-data visualization, Data Visualization, JavaScript
Framework, Visualization Components

GViz Framework Page ii

Acknowledgement

At this very important achievement of our academic careers we would like to remember all
the members in our families for their unstinted support in every endeavor in our lives.

Next we would like to acknowledge our project supervisor, Dr. Shahani Weerawarana for her
support from the beginning, providing the initial project idea and guiding us to make the geo-
data visualization framework a reality.

Also our special thanks go to Level 4 Project Coordinator, Dr. Shantha Fernando for his
commitment from scheduling all the project related evaluations at the correct time to
providing correct feedback after careful review of the project.

Our gratitude also goes to all the lecturers and Staff members of the Computer Science and
Engineering Department for their dedicated support in educating us to become more
knowledgeable human beings.

Last but not least, we would like to remember all our batch mates in the department for the
unforgettable time we had as CSE family members.

GViz Framework Page iii

Table of Content
Declaration .................................................................................................................................. i
Abstract ......................................................................................................................................ii
Acknowledgement ................................................................................................................... iii
Table of Content ..........................................................................................................................
List of Figures .......................................................................................................................... iii
1 Introduction ........................................................................................................................ 1
2 Aims.................................................................................................................................... 2
3 Literature Review ............................................................................................................... 3
3.1 History of Data Visualization ...................................................................................... 3
3.2 Visualization Elements................................................................................................ 3
3.2.1 Tree Map Visualization........................................................................................ 4
3.2.2 Network................................................................................................................ 4
3.3 Time Variant Data Visualization................................................................................. 5
3.3.1 Method 1 .............................................................................................................. 5
3.3.2 Method 2 .............................................................................................................. 6
3.3.3 Method 3 .............................................................................................................. 6
3.4 Geo Maps .................................................................................................................... 7
3.5 Usage of Colors ........................................................................................................... 9
3.6 Common Problems in Geo Data Visualization ......................................................... 10
3.7 Dataset representation standards ............................................................................... 10
3.7.1 Tables ................................................................................................................. 10
3.7.2 XML format ....................................................................................................... 10
3.7.3 JSON format ...................................................................................................... 11
3.7.4 YAML format .................................................................................................... 11
3.7.5 CSV format ........................................................................................................ 11
3.8 Security Concerns ..................................................................................................... 11
3.8.1 Transmission Security........................................................................................ 11
3.8.2 Client Side Security ........................................................................................... 11
3.9 JavaScript Object Orientation ................................................................................... 12
3.10 Technology Research ................................................................................................ 12
3.11 OpenGL and XNA .................................................................................................... 13
3.12 Geographical Information Systems (GIS) ................................................................. 13

GViz Framework Page

3.13 Adobe Flash............................................................................................................... 14
3.14 Axiis – Open source Library for Data Visualization................................................. 14
3.15 Google Maps API ...................................................................................................... 15
3.16 Google Visualization API ......................................................................................... 16
3.17 Data Set Publishing Language (DSPL) ..................................................................... 16
3.18 JavaScript Libraries ................................................................................................... 17
3.18.1 jQuery JavaScript Library .................................................................................. 18
3.18.2 jQueryUI JavaScript Library.............................................................................. 19
3.18.3 Wijimo Library .................................................................................................. 20
3.18.4 MooTools Library .............................................................................................. 21
3.18.5 JavascriptMVC Library ..................................................................................... 22
3.18.6 Ensure Library ................................................................................................... 23
4 Design and implementation of GViz Framework............................................................. 24
4.1 First Iteration ............................................................................................................. 24
4.1.1 Problems Encountered ....................................................................................... 28
4.2 Second Iteration (GViz Version 1.0)......................................................................... 29
4.3 GViz Modules ........................................................................................................... 32
4.4 GViz Data Adapters .................................................................................................. 33
4.5 Visualization Adapters .............................................................................................. 34
4.5.1 Map Adapter ...................................................................................................... 34
4.5.1.1 Google Map Service ................................................................................... 35
4.5.1.2 Bing Map Service ....................................................................................... 37
4.5.1.3 OVI Map Service ........................................................................................ 38
4.5.2 Chart Adapter ..................................................................................................... 39
4.5.2.1 Google Interactive Charts ........................................................................... 40
4.5.2.2 Google Image Charts .................................................................................. 42
4.6 GViz Supportive Modules......................................................................................... 42
4.7 Current Iteration (GViz Version 2.0) ........................................................................ 42
4.7.1 GViz Data Providers .......................................................................................... 43
4.7.2 GViz VizComps ................................................................................................. 44
4.7.3 Configuration & DSPL ...................................................................................... 45
5 Results and analysis .......................................................................................................... 48
5.1 Importance of visualization dashboards .................................................................... 48

GViz Framework Page i

5.2 Evolution of GViz Framework .................................................................................. 49
5.2.1 First Iteration ...................................................................................................... 49
5.2.2 Second Iteration ................................................................................................. 50
5.2.2.1 Core Framework ......................................................................................... 51
5.2.2.2 Data Set Description ................................................................................... 51
5.2.2.3 Designer and Code Generator..................................................................... 52
5.3 Performance Improvement ........................................................................................ 52
5.3.1 Increasing the Load Time .................................................................................. 52
5.3.1.1 Content Delivery Networks ........................................................................ 52
5.3.1.2 Compressing the JavaScript Code .............................................................. 54
5.3.2 Using Fast Data Structures................................................................................. 54
6 Discussion ......................................................................................................................... 54
6.1 Core Framework ........................................................................................................ 54
6.2 Supporting Services - Designer and Code Generator................................................ 55
6.3 Coding ....................................................................................................................... 55
6.3.1 Use of design patterns ........................................................................................ 55
6.3.2 Documentation Generation ................................................................................ 56
6.4 Development Process ................................................................................................ 57
6.4.1 Agile approach ................................................................................................... 57
6.4.2 Test Driven Development .................................................................................. 57
7 Conclusion and Future Work ............................................................................................ 58
7.1 Extensions for the existing framework...................................................................... 58
7.1.1 Addition of Data Providers ................................................................................ 59
7.1.2 Addition of Visualization Components ............................................................. 59
7.1.3 Improvement of interconnected events .............................................................. 59
7.1.4 Geo specific component development ............................................................... 59
7.1.5 Snapshot capture facility .................................................................................... 60
7.1.6 Enhancement of the framework ......................................................................... 60
7.1.7 Audio integration ............................................................................................... 60
7.1.8 Generalize parallelization of components .......................................................... 60
7.1.9 Java based high performance processing interface ............................................ 60
7.1.10 WebGL support .................................................................................................. 60
7.1.11 Data Insertion Functionality .............................................................................. 61

GViz Framework Page ii

References ................................................................................................................................. ix
Appendix I – API Reference ..................................................................................................... xi

List of Figures
Figure 3-1 Evolution of Data Visualization [2] ......................................................................... 3
Figure 3-2 Example of Tree Map Visualization [3] ................................................................... 4
Figure 3-3 Example of Network Visualization [4] .................................................................... 5
Figure 3-4 Bar Charts [5] ........................................................................................................... 6
Figure 3-5 Animated Charts [6] ................................................................................................. 6
Figure 3-6 Axis Bar Charts [7] .................................................................................................. 7
Figure 3-7 Example Network Geo-Data Visualization [8] ........................................................ 7
Figure 3-8 Example Descriptive Geo-Data Visualization [9] .................................................... 8
Figure 3-9 Example Animated 3D Geo-Data Visualization [10] .............................................. 9
Figure 3-10 Example GIS Integration [13] .............................................................................. 14
Figure 3-11 Example Axiis Integrated Visualization [14] ....................................................... 15
Figure 3-12 Uses of Google Maps API [15] ............................................................................ 16
Figure 3-13 - List of JavaScript libraries [16].......................................................................... 17
Figure 3-14 - Sample jQuery code ........................................................................................... 18
Figure 3-15 - Themeroller screenshot [19] .............................................................................. 20
Figure 3-16 - Wijmo Datepicker component [19] ................................................................... 21
Figure 3-17 - Sample MooTools code [20] .............................................................................. 22
Figure 3-18 - Sample DocumentJS document [21] .................................................................. 23
Figure 3-19 - Sample Ensure code [22] ................................................................................... 23
Figure 4-2 Logical View of the System ................................................................................... 25
Figure 4-3 Interactions in Detail .............................................................................................. 26
Figure 4-4 Development View of the System.......................................................................... 26
Figure 4-5 Visualization Framework Activity Diagram .......................................................... 27
Figure 4-6 GViz Data Framework Activity Diagram .............................................................. 28
Figure 4-7 GViz High Level Architecture (Iteration 2) ........................................................... 30
Figure 4-8 Flow Diagram......................................................................................................... 31
Figure 4-9 Activity Sequence Description ............................................................................... 32
Figure 4-10 GViz Core functionality categorization ............................................................... 32
Figure 4-11 DSPL and Data Adapters ..................................................................................... 33
Figure 4-12 Visualization Adapter Specification .................................................................... 34
Figure 4-13 Using Several Map Services within GViz Framework ........................................ 35
Figure 4-14 Overview of Google Map service [25] ................................................................. 36
Figure 4-15 Example Bing Map [26] ....................................................................................... 38
Figure 4-16 Ovi map integration [27] ...................................................................................... 39

GViz Framework Page iii

Figure 4-17 Usage of Charts Visualization within GViz framework ...................................... 40
Figure 4-18 Collection of Google Charts [28] ......................................................................... 41
Figure 4-20 gviz.dataprovider.jsonstr ...................................................................................... 43
Figure 4-21 gviz.dataprovider.xml .......................................................................................... 44
Figure 4-22 VizComp Specification ........................................................................................ 44
Figure 4-23 gviz.vizcomp.gdoc ............................................................................................... 45
Figure 4-24 gviz.vizcomp.gtable ............................................................................................. 45
Figure 5-2 Load Time Information .......................................................................................... 52

GViz Framework Page iv

1 Introduction

Data visualization is the study of visual representation of data. The main goal of data
visualization is to communicate information effectively and clearly in an easily
understandable manner. Data visualization is a broad area. In this project we address the sub
topic of geo related data visualization in order to minimize the scope of the research [1].

The term visualization itself suggests the use of graphical means. Therefore it is needed to
have ways and means of generating visual objects. We have identified the potential of web
2.0 technologies to provide a visualization solution. There are a number of public web
services that can be used to create these drawings.

 Google Visualizations
 Google Maps
 Google Geo-coding
 Google Docs
 Bing Maps
 Ovi Maps
 jQuery
 Highcharts free charting library

The service we are building is run totally on the client side of a web page using the above
mentioned services. The GViz Framework has been developed as a JavaScript library like
JQuery which can be called to add visualizations to a web page.

GViz Framework Page 1

2 Aims

 Research on different data and information visualization techniques.
 Identifying existing geographic related data visualization methods and analyzing their
pros and cons.
 Study of technologies used for data visualization
 Identifying common business related requirements in data visualization
 Developing a generic open source framework capable of visualizing a variety of geo
related applications with customizable component interface
 Minimize limitations of particular proprietary tools and services
 Ensuring data security


3 Literature Review

Geo data visualization is a specific area of data visualization. We researched on data
visualization and were able to identify some important concepts in data visualization.

3.1 History of Data Visualization

Figure 3-1 Evolution of Data Visualization [2]

Historically paper was used for data visualization. Earlier it required preparing documents by
hand, wasting a lot of labor but it became much easier with the development of printing
technology. In earlier times printing was carried out by using analog techniques which were
problematic for standardizing and evaluating the data visualization. With the advancement of
digital image processing and raster graphic theories it became much easier to correctly design
a data visualization diagram.

3.2 Visualization Elements
In almost all data visualization requirements including geo relevant data visualization, a
common set of visualization elements like pie charts, column charts are used. In each such
element it has a set of inherent advantages and inherent disadvantages. Therefore the type of
visualization element should be carefully selected within the available visualization elements
considering the type of data, volume of data, most important dimensions of data and also by
considering whether it is continuous or discrete. Other than the commonly used visualization
elements we have researched on tree maps and networks which are very useful for
representing geo relevant data.


3.2.1 Tree Map Visualization
A tree map is useful when it is required to visualize a large amount of data in several levels of
hierarchies. Using different colors and textures it can visualize so much of data as a tree map
uses the whole 2D space of the tree map area. That much of data cannot be visualized using
an ordinary chart or a graph as they cannot make the visualization content in the whole
available area denser. Although it is suitable for comparing a lot of gathered data it is not
useful to analyze the variation of a particular variable with the change with respect to another
variable like in charts.

Figure 3-2 Example of Tree Map Visualization [3]

3.2.2 Network
A network is a very useful visualization element when it is required to visualize the existence
of interconnection between distinct geo locations and to represent the amount of connectivity
between two geo locations rather than describing the quantitative values of each geo location.
Type of connectivity and the amount of connecting parameter value can be described by the
connection line between geo locations. Thickness of the line, color and texture of line can be
changed accordingly.

When there are many geo locations existing nearby, the clarity can be maintained by focusing
on the geo location relation and by hiding or blurring other connections existing nearby, as
shown below.


Figure 3-3 Example of Network Visualization [4]

3.3 Time Variant Data Visualization
Charts and graphs were the main data visualization elements in 2D data visualization. When
required to represent 3D data, several charts were required for the visualization. Even after
the visualization has moved from paper to a computer monitor it introduced the new concept
of Dynamic Data Visualization. This method is capable of presenting animations enabling it
to represent the third dimension using the time axis as the third dimension. With the use of a
computer screen it is possible to visualize 3D charts or such representations to visualize data
up to three dimensions. But only using a 2D screen it is a challenge to visualize 3D data in a
2D area. Third dimension has to be visualized in one of the three following ways.

3.3.1 Method 1
Represent the third dimension in the same 2D space for each point in 3D space. e.g.: Bar
chart with many columns in each x value. This method is not suitable for representing data
having many values for all three dimensions.


Figure 3-4 Bar Charts [5]

3.3.2 Method 2
Animated charts and graphs can be used for representing the third dimension as the time
dimension. For example heights of a simple column chart can be changed with the time
representing the change of other two dimensions in the time domain.

Figure 3-5 Animated Charts [6]

3.3.3 Method 3
Charts with 3 axes can be used to visualize the time variant data. The following example is a
3- Axis bar chart.


Figure 3-6 Axis Bar Charts [7]

3.4 Geo Maps
Geo maps are the main visualization elements in geo-related data visualization. Distribution
of data with respect to geo-location can be accurately represented only with geo-maps. The
main disadvantage, in geo-maps is that they need more 2D space to represent data because
some regions in a map are concentrated with data and some are not. Overlapping of
concentrated data is a main problem in geo-map visualization. Zooming is the only accepted
way to distinguish overlapping data but it makes the user tired and wastes the time. This is
the reason we use some other visualization technique for the geo related data.

Figure 3-7 Example Network Geo-Data Visualization [8]

Figure 3-7 shows a type of geo related data representation on a map which mainly describes
the interconnections between geo locations. This map representation is an extension of the


visualization technique, Networks. Geo locations involved with connections are given light
colors which enables this map to visualize a large amount of data. Locations with higher
amount of interconnections are not individually represented but regions with higher
connections are highlighted in light colors. Similarly individual connections between two
locations are not clearly displayed; instead connections with higher concentration of
connections are highlighted in blue (This map was used to visualize interconnections in
Facebook).

This type of visualization is suitable for a large amount of geo locations and interconnections
but not for complex data set visualization (With many parameters).

Figure 3-8 Example Descriptive Geo-Data Visualization [9]

Figure 3-8 type is used for descriptive data set representation for a particular set of geo
locations. A little amount of data can be visualized as a default on the map. Descriptive data
for each location is visualized inside the interactive pop up. This type is useful for
representing a complex set of geo related data for a limited number of geo locations.


Figure 3-9 Example Animated 3D Geo-Data Visualization [10]

Figure 3-9 is an animated 3D visualization of population density in each geo location which
can also be represented with a shaded 2D map. But using 3D animated maps it can visualize
more complex data than this application.

3.5 Usage of Colors
In the current applications of data visualizations colors and textures play an important role.
Basically the colors and textures used should not disturb the eye to identify and understand
the visualization. Brightness and contrast are the main parameters applicable in gray scale
visualizations which are also very important in the case of colors as well. But sometimes it is
not the intensity but the color which makes the visualization poor in quality. For example a
yellow object in the white background is hard to distinguish. And also it is important not to
use colors like green and red for distinguishing objects as color blind people cannot recognize
the differences.

The other importance in color is the attitude of humans towards different colors. For example
the color red represents strong feelings like fear and green represents nature. When different
colors are automatically allocated in a visual system there is a tendency to bias some object
with certain colors rather than others which may not be expected by the system. And also the
use of colors should be matched for the type of occasion the visualization is used. Some
fancy colors may be suitable for playful children but may not be used for professional
applications.


3.6 Common Problems in Geo Data Visualization
 Representing multidimensional data: This problem may occur when visualizing
complex data. 3D or more dimensions can be using one or a combination of the above
mentioned visualization techniques.
 Some geographical locations are located far away and some are almost coincidental:
Instead of using a map another kind of data visualization element such as a chart can
be used to remove the physical distances among geo locations.
 Sense the differences of parameters correctly: Charts should be calibrated correctly in
the correct scale; either linear or logarithmic, so that they are correctly judged by the
human eye.
 Representing large amount of data in a 2D area: Only the required data can be filtered
out and according to the requirement, large data visualization mechanisms such as
tree maps can be used.

3.7 Dataset representation standards
According to the aim of our project we need to visualize data obtained from different types of
data sources in different formats. Types of data sources are as follows.

 Files
 Online document
 Web service
 Database
 Manually entered data
Data formats that were found to be useful are as follows.

3.7.1 Tables
The most generic data type is the Table type. It is easy to directly convert these types of data
into other data types supporting visualization API.

3.7.2 XML format
There are several schemas popular and there are competitive standards which have different
advantages. Some schemas are very generic but require a lot of storage capacity. Some others
are good in space requirements but generality and parsing complexity is high.


3.7.3 JSON format
Similar to XML format but other than “<” and “>” tags it uses other characters to simplify the
data. More readable than some XML formats and JavaScript level parsers are available in
default in modern web browsers. Therefore it is easy to use JSON format for our framework.

3.7.4 YAML format
YAML is another data representation format that is similar to XML and JSON but it is more
readable than them.

3.7.5 CSV format
CSV is an acronym for “Comma Separated Values”. Usually large amounts of data are stored
in files in CSV format. Metadata should be available for defining the content in CSV files.

The data given in the above formats should be according to a protocol that should be
specified in Meta data. During the research we found a new such protocol developed by
Google released very recently known as DSPL. (Dataset Publishing Language). DSPL is an
open standard where a DSPL data source is a Zip file which comprises a collection of CSV
files and an XML file describing metadata of CSV file content. We went through various
DSPL standards describing different types of data.

3.8 Security Concerns
Two main security vulnerabilities have been observed in the pure data visualization
framework. Each of them can be prevented using external modules that can be implemented
uncoupled with the main framework.

3.8.1 Transmission Security
When the system obtains data from a distant located data source, data security should be
implemented. One of the well-known secure solutions is using SSL layer for transport layer
security which would maintain the confidentiality and authenticity of the data.

If HTTPS is not supported by the infrastructure, the system itself can implement data security
using application level encryption. Encryption and decryption adaptors can be implemented
in data source and in the interface in client side which accepts data. In such an instance the
key exchange should be done in some other way.

3.8.2 Client Side Security
Client-side JavaScript assumes that all content in a window comes from the same source,
which is not true in Web 2.0[11]. It is well recognized that JavaScript can be exploited to


launch browser-based security attacks. Un-trusted JavaScript code should go through a
rewriting process which identifies relevant operations, modifies questionable behaviors, and
prompts the user (a web page viewer) for decisions on how to proceed when appropriate[12].

The other main security vulnerability exists in the client side which may reveal that data
exists in the web browser. This can happen due to the security vulnerabilities that exist in the
iframe web control. In modern web browsers, it implements new HTML5 specifications that
control the data flow in both directions using sandboxes.

Another implementation possibility of iframe was found using the open source Google Caja
tool. It can be used as an add-on for Eclipse or Ant which recompiles JavaScript code into a
secure format at the development phase.

3.9 JavaScript Object Orientation
As GViz Framework is to be developed using JavaScript we need to have a good design
approach to structure the code. Since JavaScript is a very flexible language we must put in an
extra effort to maintain the object oriented aspects of the code.

Even though it doesn‟t have a class style like in other popular object oriented programming
languages like Java, C++ and C#, JavaScript can support OOP because it supports inheritance
through prototyping as well as properties and methods. We can write well encapsulated code
that can be reused. In JavaScript, functions are first-class objects. They can be stored in
variables, passed into other functions as arguments, passed out of functions as return values,
and constructed at run-time. These features provide a great deal of flexibility and
expressiveness when dealing with functions. Using these features of the language we can
build a classically object oriented JavaScript framework.

3.10 Technology Research
While the literature review was going on we researched on the already existing technologies
used for geo related data visualization and the tools used to implement them. We preferred
more open source technologies, free services and open standards used for such technologies.
(e.g.: HTML5 over Adobe Flash) Maximum amount of reuse and reusability was expected to
be used in the project to achieve maximum level of functionality and usability for the end
user. (e.g.: Reusing Google Visualization API)


Technologies related to data visualization were rapidly evolving at the time of research so we
tried to use the cutting edge technology as possible. (e.g.: HTML5 and DSPL) We wanted to
maintain our framework as independent as possible from external dependencies, which led us
to come out with a client side JavaScript framework.

We researched on the following technologies and tools during the process of the literature
review.

3.11 OpenGL and XNA
The OpenGL is an open source graphic programming library API supporting high
performance 3D animation. It supports many languages such as C, C++, C#, Java and Pascal.
OpenGL is specially designed to use parallel functionalities of GPUs and provides a more
abstract API for graphics programming. XNA is a Microsoft proprietary product similar to
OpenGL but with some more abstraction than OpenGL. A large amount of reusable graphic
objects are available for XNA than OpenGL. However these two are not web based
technologies. So we decided not to use these languages for our project.

3.12 Geographical Information Systems (GIS)
A GIS allows us to view, understand, question, interpret, and visualize data in many ways
that reveal relationships, patterns, and trends in the form of maps, globes, reports, and charts.
It integrates hardware, software, and data for capturing, managing, analyzing, and displaying
all forms of geographically referenced information. It helps you answer questions and solve
problems by looking at your data in a way that is quickly understood and easily shared. GIS
technology can be integrated into any enterprise information system framework.


Figure 3-10 Example GIS Integration [13]

3.13 Adobe Flash
Adobe Flash is the most popular technology for visualization in web based applications. It
simplifies most visualization designs as it provides many visualization elements such as bar
charts and pie charts. A simple code can bind data to such charts from web services or other
kinds of data source. Flash applications are developed on the open source platform, Flex
Builder.

Although programming Flash with ActionScript is easier it requires a special Flash Player
plug-in to be installed in the local computer which introduces other dependencies and
security risks like LSO (Local Storage Object) cookies.

3.14 Axiis – Open source Library for Data Visualization
Axiis has been designed to be a concise, expressive, and modular framework that let
developers and designers create compelling data visualization solutions by assembling easy
to understand building blocks into simple or complex visual representations of data. Axiis is
built upon the Degrafa graphics framework and Adobe Flex. Axiis provides pre-built
visualization components as well as abstract layout patterns and rendering classes that allow
you to create your own unique visualizations.


Figure 3-11 Example Axiis Integrated Visualization [14]

3.15 Google Maps API
Google Maps is a well-known map provider for many web applications. Google Maps
satellite images are not in real time; they are several months or years old.

The Google Maps API is one of the Google technologies that help to take the power of
Google Maps and put it directly on our own site. It allows developers to integrate Google
Maps into their websites. It is a free service. It lets us add relevant content and customize the
look and feel of the map to fit with the style of our web site. By using the Google Maps API,
it is possible to embed Google Maps site into an external website, onto which site specific
data can be overlaid. Although initially only a JavaScript API, the Maps API has since
expanded to include an API for Adobe Flash applications, a service for retrieving static map
images, and web services for performing geo coding, generating driving directions, and
obtaining elevation profiles.


Figure 3-12 Uses of Google Maps API [15]

3.16 Google Visualization API
This provides several tools for making data more comprehensible. Special URLs can be used
to embed graph and chart images in users' own web pages. This is based on JavaScript. The
Google Visualization JavaScript API lets you access structured data and visualize that data,
using JavaScript in your web pages. The Google Visualization API also enables creation of
gadgets. This allows dynamic and interactive charting. The key facility is the Google
Charting tools.

3.17 Data Set Publishing Language (DSPL)
This is a representation language for the data and metadata of datasets. Datasets described in
this format can be processed by Google and visualized in the Google Public Data Explorer.
Therefore the data described in this format can be easily used in Google Visualization APIs.
There are some key features in this new technology like,

 Use existing data with an addition XML metadata file.
 Enable powerful visualization
 Can be used with Geo related data
 Fully open to use in our own applications


3.18 JavaScript Libraries
When it comes to client side web technology, JavaScript libraries play a major role. They are
developed by a number of skilled programmers and have their own paradigms. In other words
JavaScript libraries should be distinguished from C++ libraries and Java libraries. JavaScript
libraries are not just libraries performing a specific task on top of the JavaScript API provided
by the web browser. Most JavaScript libraries are cross browser compatible (i.e. handles
browser dependent codes internally) and introduces a new programming paradigm to the
programmer. It needs some experience to master such a library. Most popular JavaScript
libraries jQuery, MooTools, Prototype and Dojo fall into this category.

But there are some other types of special purpose libraries as well. But in our framework and
dashboard we did not want to use them. One of the major reasons is the size of the library.
Size of a JavaScript library is a very important and critical factor. As JavaScript is a scripting
language, amount of code dependencies are directly proportional to the size of the framework
which directly slows down the page load process. Not only that, as most JavaScript
frameworks use a similar public attributes like „$‟ symbol, usage of multiple number of
libraries, increase the risk of conflict of functionality. This is a special problem that can be
identified only in JavaScript libraries.

Figure 3-13 - List of JavaScript libraries [16]


Due to the above mentioned reasons, client side web developers try to stick with a single
JavaScript library that provides all the major functionalities and to develop add-ons on top of
that library to fulfill other functionalities. Therefore selection of the correct JavaScript library
is a critical part of the client side web architecture. That library should support almost all the
requirements of the software product. UI and other facilities are usually provided in built into
the library.

We used jQuery as the base library and used jQueryUI and Wijmo for designing GViz
dashboard. We considered MooTools and Dojo as well but due to the extra size of the library,
we decided not to use them.

During the literature survey we researched on different kinds of JavaScript libraries which
represent different types of programming paradigms. Next we will discuss them in detail.

3.18.1 jQuery JavaScript Library
jQuery [17] is the most widely used open source JavaScript library for client side web
development. It has cross browser compatibly for every API it provides. jQuery is basically a
HTML document access modal that traverses through the DOM and apply JavaScript
operations. It facilitates event handling more easily than ordinary JavaScript. jQuery API
provides encapsulated functions for AJAX request handling that simplifies processes such as
XML file load operation from a server.

Figure 3-14 - Sample jQuery code


jQuery also supports a lot of user interface related API functions that are very important in
user event handling, which are not provided by the ordinary JavaScript. And also because
there are a large number of plug-ins that are available jQuery dominates the JavaScript
libraries currently available.

3.18.2 jQueryUI JavaScript Library
jQueryUI [18] is an open source advanced user interface development platform that runs on
top of the jQuery API. As mentioned earlier jQuery provides a lot of browser independent
high level functions that are utilized by the jQueryUI library. jQueryUI introduces a modified
set of web controls other than the web controls in standard HTML. „Accordion‟, „Datepicker‟
and „Tab‟ are some of them that are frequently used in web pages. Some of the existing
HTML web controls can be replaced by the substitute controls introduced by jQueryUI.
jQueryUI Button is an example of such a control that is built using a div element and by
adding styles as a HTML button.

jQueryUI also provides some important functionality like „Draggability‟ and „Resizability‟
for div elements. As in modern web applications mainly use div elements for almost all UI
related controls, these functionalities are very useful for different types of applications.

jQueryUI enables to change, add and remove classes from HTML UI controls that give the
developer the flexibility to change styles dynamically and update them according to events.

Applying themes for jQueryUI controls is very easy due to the availability of Themeroller.
Themeroller can be used to test and apply custom themes for jQueryUI projects. It enables
the user to abstract the styles to be used for the UI controls in the entire web page. For
example header style will be used for headers used in tabs and top part of datepicker (i.e.
calendar control).

Similar to jQuery, jQueryUI is the dominating JavaScript UI library currently available.
jQueryUI too has a lot of dependent add-ons that are compatible with jQuery. Most of the
JavaScript add-ons related to UI are compatible with jQueryUI and its theming scheme,
Themeroller as in the figure given below.


Figure 3-15 - Themeroller screenshot [19]

3.18.3 Wijimo Library
Wijmo [19] has two libraries for commercial use and open source. We used open source
version Wijmo for GViz dashboard. Wijmo is a widget library with more than 30 widgets in
built. This library runs on top of jQueryUI API. In other words Wijmo provides a very high
level abstraction for development of UI controls.


Figure 3-16 - Wijmo Datepicker component [19]

As technology moves from server side to client side, these types of readymade components
are very useful for rapid development. This library provides almost all the basic UI features
provided by a server side technology like ASP.NET. However data binding and updating is
still a time consuming problem even with these libraries.

Although client side based web controls cannot handle large data sets, for most requirements,
client side widgets like Wijmo are very powerful as the response time is very low compared
to server based web controls. And the other important fact is that functionality and
appearance of the web page can be reused by any type of server side technology.

3.18.4 MooTools Library
„MooTools‟ [20]stands for “My Object Oriented Tools” which is a similar library to jQuery
library but with a different paradigm. jQuery functionality is mainly based on the traversal of
document object model (DOM) and applying changes on it. MooTools is for object oriented
development in JavaScript. Natural JavaScript does not support pure object oriented
implementations like Java. Features like inheritance, attribute, method and constructor is not
supported by natural JavaScript. MooTools allows programmer to program an object oriented
code and it converts the code into the browser compatible natural JavaScript. Therefore


MooTools is a very useful library to be used for complex JavaScript framework programming
like GViz framework.

Figure 3-17 - Sample MooTools code [20]

MooTools not only supports object oriented programming, but it supports other facilities
supported by jQuery such as UI related programming and event handling. MooTools provides
some special functions such as chaining codes and periodically executable codes. And also
there are many add-ons to MooTools as well but not as many as for jQuery.

3.18.5 JavascriptMVC Library
JavascriptMVC [21] is a JavaScript implementation framework for MVC (Modal View
Control) design pattern for UI design. The purpose of the pattern is to isolate visual related
components from the underlying logic behind the components and their control plan from
each other. JavascriptMVC is based on top of jQuery library and emphasizes the importance
of programming best practices in client side web design.

JavascriptMVC consists of four major parts.

1. StealJS – Dependancy management tool and a simple build tool.
2. FuncUnit – Functional testing solution.
3. jQueryMX – Plugins which are the building blocks of large jQuery applications:
model, view, controller, class and fixtures etc.
4. DocumentJS – Documentation tool that converts comments into a document


Figure 3-18 - Sample DocumentJS document [21]

3.18.6 Ensure Library
Ensure [22]is a dynamically JavaScript loading add-on that can load JavaScript files and CSS
files according to the demand which is given by the code itself. This JavaScript library is a
special purpose library which is different from the previously mentioned JavaScript libraries.

This library was used in GViz framework as it requires loading only the required JavaScript
code for the server to avoid unnecessary load delays.

Figure 3-19 - Sample Ensure code [22]


4 Design and implementation of GViz Framework
GViz Framework lifecycle consist of three major iterations. Since it is a research oriented
project, initially the research took place to identify the requirements suitable to build the
framework and to find existing solutions. Geo Data Visualization as an emerging technology
made it challenging to identify the type of technologies suitable for the Framework. Since it
was hard to define a generic solution the project was initiated in the following manner in
prototype basis.

4.1 First Iteration
During the first iteration we started to build the framework focusing on visualizing the data
which has a geographical distribution mainly done on a map. In addition to the data
representation on a map, there were other user interactions using events to make the system
more user-friendly and helpful. The project was initially divided into two main components,
(i.e.: Data Server and Visualization Application).

Figure 4-1 Architecture of the Framework

Initially it visualized Geo-Data using Google Maps API by employing the latest trends and
technologies of data visualization. GViz is a web based application which consists of a rich
client (Flash based) and data server (coded in Java). Geo-Data is represented in a map using a
collection of map tiles provided by Google Maps Flash API. Using the web browser, users
can interact with the map interface and data through the indicators on the UI. The


visualization is done in a separate layer with Flash on top of the map layer. The scope of the
project in the initial iteration can be summarized as below.

 Flash based web application that uses Google Map to represent Geo relevant data on
web browser.
 Flex Engine to provide a detailed visualization of the data on a selected area using
Adobe Flex.
 Client side Presentation Server module to cooperate with the Google Maps and
Google Fusion Tables to manage visualization and map representation and handle
user interactions from the front-end visualization.
 Data Server module to extract data from various input sources (i.e.: Excel sheets,
MySQL database, etc.), process and transfer, data and update online Fusion Tables.
 Web service to handle the message and signal parsing between the Data server and the
Client application
 This architecture gives a basic understanding on the system being developed. As this
is a web based framework, the web services and web browser display area are main
considerations of this framework. There is a separate data server to convert the data
into a common format and host them in the online Google Fusion Tables.

The major layers of the GViz Framework were implemented as shown in the following
diagram. The web browser is considered as the front-end visualization software for the
framework.

Figure 4-2 Logical View of the System


Figure 4-3 Interactions in Detail

The Google Maps and Google Fusion Tables are the basic web service used in map based
visualization. The overall deployment of the Framework is shown in the following diagram.

Figure 4-4 Development View of the System


Considering the functional aspects of the framework, an application developed using GViz
Visualization Framework resides on the client browser which communicates with Google
services (Preferably Google Maps Service & Fusion Table Service)using HTTP protocol. It‟s
basically a rich client developed using Flash.

The application uses flash plug-in for its execution and therefore its processes and threads are
coupled together among the application, flash plug-in and browser.

Detailed description of the activities taking place is visualized in the activity diagram in the
following figure.

Figure 4-5 Visualization Framework Activity Diagram

The framework also allowed data from various data sources to be plugged into the system
where they can be synchronized with Google fusion tables. It consisted of a module which
provides the main foundation of synchronization providing the facility to bind data from CSV


files, SQL databases while users can develop their own adaptors for custom data sources.
Detailed description of the activities taking place is visualized in the activity diagram shown
below.

Figure 4-6 GViz Data Framework Activity Diagram

4.1.1 Problems Encountered
If we had used a separate data server written in Java and running on a local computer, we
would have needed to have our own web service to connect the data server and front end
application. It was an extra burden on the framework implementation. We had to have a
reliable and highly available web service along with our framework. Writing a separate web
service is quite tedious than using an existing well known service. So we gave up the option
of having a data server to provide the data on local data bases over our web service.

Then we decided to replace our data server with online Fusion table. There the problem was
to synchronize the local data with the online fusion table. That was also done through a local
program written in Java. There we had to access the online Google data tables from a row
java program running on a local machine. The aim was to put the data on online tables as the
same as they locate in the local data bases. But the java program to do this had to access
several external libraries such as Gdata [23] and Guava [24]. The most annoying issue was
that the Google fusion table didn‟t handle duplicate records. It caused many issues in
synchronization. The fusion tables also had several limitations such as they can properly
support only the Google visualization.


Writing our own visualization components using flex / flash was very time consuming and
complex activity. If we were to bind the data supplied through the web service, and build our
components using a visualization component generation library such as Axiis [14], it would
reduce our focus on designing a new framework for visualization. Writing our visualization
components was not a major requirement for GViz framework. So we decide to reuse
existing well known components rather than writing our own components.

4.2 Second Iteration (GViz Version 1.0)
After identifying the requirements & suitable design for the Framework using the initial
prototype (done in first iteration) technology selection of the Framework was changed to
JavaScript. It is basically to build a Client Side Geo Data Visualization Framework with all
the advantages of the above with additional flexibility to use it to be configured also in Server
Side.

The Framework resides on the Client Browser as shown in the above architecture diagram. It
manages to bind data sources with visualization components on client side reducing the cost
for servers.

The implementation of the Framework can be categorized to four main modules
 .GViz Data Adapters
 GViz Visualization Adapters
 GViz Core Modules
 GViz Supportive


Figure 4-7 GViz High Level Architecture (Iteration 2)

The flow diagram of GViz can be found in the following figure. GViz inputs data sources
through Data Adapters and displays Visualizations using Visualization Adapters. The data
(Raw Data) coming from Data Adapter is described using a data description language called
Data Set Publishing Language (DSPL). The DSPL is also input to the Framework using a
separate Data Adapter Designed for DSPL (To take from XML File or String). The
Framework provides the Data as well as the Meta Data information for the Visualization
Adapters. Visualization adapters are configurable to provide different effects and they also
need to be configured to handle the data using the DSPL provided.


Figure 4-8 Flow Diagram

The sequence of activities within GViz is shown in above figure where the sequence numbers
indicates their precedence. The functionality taking place in each stage is described in the
following figure.


•Initializes Google API's to use Googe JavaScript DataTable Class as intermediate data transfer
1 mechanism.

•Calls XML Data Adapter (Returns XML Dom Object) to get DSPL document.
2

•Fires DSPL Loaded Event after DSPL is loaded which provides DSPL Object.
3

•Calls Other Data Adapters (Returns Google Data Table Object) by Invoking Table Loadand.
4

•Fires TableLoaded Event after DataTable is loaded which provides DataTable Object .
5

•Fires Data Loaded Event witch provides DataTable& DSPL Objects.
6

•Provide DataTable & DSPL Objects to Visualization Adapters which dispalys data on webpage
7

Figure 4-9 Activity Sequence Description

4.3 GViz Modules

Event
Handler

DSPL
Core Adapter
Functions
Handler
GViz
Core
Data Visualization
Adapter Adapter
Handler Handler

Figure 4-10 GViz Core functionality categorization

GViz core is the main component in GViz which initializes the functionalities of the
Framework. Since Data Adapters are allowed to have asynchrony behavior to load data from
servers GViz uses Event Driven Architecture (EDA) to optimize the browser performance.
To use EDA GViz Events were implemented within the core using JavaScript (Since
JavaScript doesn‟t natively support Non-DOM events).


Core module provides the flexibility to plug-in new Adapters for Data Visualization through
configuration on the webpage. It also uses Ensure JavaScript library to load adapters on
demand while managing the main data flow.

GViz Data Table (Which is a wrapper of Google Data Table) consists of methods which
enable the visualization components to simplify its configuration. GViz Data DSPL provides
extended functionality to provide direct access to data. GViz DSPL uses jQuery to handle
cross browser concerns while parsing the data in DSPL XML DOM Object. GViz Framework
iteration 2 supported a subset of DSPL Specification as shown in the below example.

4.4 GViz Data Adapters
GViz Data Adapters subdivided in to two categories of DSPL Adapters & Data Adapters.
The specifications of adapters are shown in following figures respectively.

Figure 4-11 DSPL and Data Adapters

GViz DSPL Adapter specification requires the input data to be according to the DSPL
schema. Output Data should be contained in GViz DSPL Object which wraps the XML DOM
Object where the framework can provide it to Visualization Components. After the Adapter
does the data loading and conversion steps it can fire DSPL Loaded Event by providing the
GViz DSPL Object as parameters.

GViz Data Adapter specification has no restriction on the type of input data but its output
should be a GViz Data Table which wraps the Google Data Table object.


Any custom Adapter implementation should adhere to the above specification and it should
be implemented in gviz.data.adapter namespace. During this iteration GViz was consisted
with Google Docs Data Adapter & XML File DSPL Adapter.

4.5 Visualization Adapters
GViz Visualization Adapters are subdivided into two categories of Visualization Map
Adapters & Visualization Component Adapters. Specification of Visualization Adapters is
shown below.

Visualization Adapter
GViz Data Table Object
Visualize Data
on web page
GViz DSPL Object

Data, DSPL to Adapter Mapping
& Adapter Configuration

Figure 4-12 Visualization Adapter Specification

The specification of adapters differs only from its namespace requirements. Visualization
Map Adapters should be implemented in gviz.visualization.map.adapter & Visualization
Component Adapters in gviz.visualization.component.adapter namespaces.

4.5.1 Map Adapter
This is the main adapter the GViz framework has. The purpose of this adapter is to give the
user a geo graphical view of the visualization. The user can get an idea on the region the
visualization is currently on.

A developer on the GViz framework can integrate several maps services commonly available
in the web applications. The adoptability for various kinds of maps from various kinds of
vendors is achieved through the map adapters. If a developer needs to add a new map type, he
needs only to write an adapter in the given format. Then the new map can be integrated into
the framework with interaction with other components. The importance is the interaction. The
various kinds of map services have different functionality. But within the GViz Framework,
all those kinds of maps are taken into a common architecture so that they are bound with an
even mechanism. The map visualization is totally connected with the other visualization


components with events. As within Java Script, the procedural programming is not working
due to asynchronous behavior, the interconnection of the several map adapters are handled
through the GViz event system. The following diagram shows the interaction of three map
types from different vendors within the GViz Framework.

Figure 4-13 Using Several Map Services within GViz Framework

If there are new map services in the future, the future developer can also bind it to our
framework. Here is a detailed description on the various map types used up to now. The main
requirement is to have a JavaScript API from the map service so that it can be integrated to
the GViz Framework written in JavaScript.

4.5.1.1 Google Map Service
Google maps provide APIs [25] in various web compatible languages. As the GViz is
developed in JavaScript, the Google Maps Java Script API was used within GViz
Framework. The main advantage of using Google Maps is that we can use an easy interaction
with the Google visualization components within the framework. The inbuilt event system is


wrapped with the GViz event system within the framework. The data to be visualized can be
provided in Google data table format, Java Script Object Notation (JSON) format, XML
format or in CSV format. This data binding compatibility of Google maps provides a huge
ease in writing Google map adapter for the framework. The Google maps don‟t always
require having the geographical locations in the latitude, longitude format. It translates the
names of the location (e.g.: town, country, place, etc.) to the relevant latitude longitude
coordinates using the inbuilt geo coding mechanism provided by Google. As all those
infrastructure services are freely available, the integration into Google Map adapter was easy.
The displaying features and characteristics for the map visualization can be provided through
an option JSON object. So the Google map adapter was provide so that a technical user can
integrate more options to the adapter. The following diagram shows the behavior of a Google
map.

Figure 4-14 Overview of Google Map service [25]

As the underlying data format for Google maps is Google data table, the click event of the
map fires the relevant indices of the clicked location from the table. So the event catcher has
to look into the given indices of the data table and extract the data to be displayed from the
table. The event is based on the location and the event processing is to extract the relevant
data bound with that location. The location base events are the main idea of our geo related
data visualization.


4.5.1.2 Bing Map Service
This is another Java script map service API with a bunch of options provided by Microsoft
targeting the web and mobile application developments. The Bing service [26] requires the
user to have a Bing map account registered with the Microsoft live or hotmail email account.
This is a very powerful visualization map service with a rich set of tools. The main processes
of the Bing maps are based on AJAX. So the performance is very attractive even in a
dynamic application with regular changes. The main reason for providing an adapter for the
Bing maps is that it provides a very good SDK in Java Script. The Bing Map Java Script API
is a great option to integrate it with the GViz framework. The adapter was provided so that
the fluent Bing user can get the maximum visualization option within the GViz framework.
We wrapped the Bing API with GViz structure and integrated the GViz event mechanism
with the Bing API. Currently the Bing map adapter is with extendable basic features. The
Bing maps within the GViz framework catches the events from the various other
visualization components, processes them and makes the adjustment in the map visualization.
This event driven movements on the map is a great achievement of the project as this
Microsoft service is integrated with Google service upfront so that that any service from any
vendor with a JavaScript API can be used successfully within the GViz Framework.

Unlike in the Google maps, the Bing maps require a latitude-longitude notation of a location.
So the conversion from location name to geo coding is required. For that purpose we used the
Google Geo Coding service which is freely accessible on the web. So the location based data
can be displayed without much effort. The geographical locations are encoded into geo
coding dynamically when required. As this is a web based project running on the internet,
this requirement was very simple to achieve. First we have to get the relevant locations to
display from the underlying GViz data table and convert them to their geographical latitude-
longitude pairs. The Bing map also has its own event mechanism and we had to wrap it to get
the performance we required within the GViz Framework.

The following picture shows a basic behavior of a Bing map on a web application.


Figure 4-15 Example Bing Map [26]

Giving the options to display is done while creating the Bing map object. The given options
are displayed on the map. Display options such as zoom level, focusing place and map type
are the commonly used options. If the user is fluent enough with Bing API, then he/she can
customize the map with the desired options. The addition of Bing map into GViz framework
did not reduce the available options of the original Bing service.

This fast loading, fast-startup and fast browsing map service is a great map adapter for GViz
framework in extending its API.

4.5.1.3 OVI Map Service
Ovi [27] is another great map service provided by Nokia. This service is with a rich Java
Script library so that it can be integrated into any web service with ease. Like Bing map, this
service is also fast loading; fast-startup and fast browsing map service. The functionality of
the Ovi is much similar to the Bing map service. This service is also based on the
geographical coding of latitude and longitude pairs. The Ovi provides several visualization
options on the map including some dynamic creation with the user interactions. So the data
sources should provide the geographical location in lat-long pairs. As GViz framework is not
using the data table with lat-long pairs, we have to give a separate geo coding service to this
Ovi map adapter too. Like in the Bing map, we provided a Google Map geo coding service.
Due to the rich Java Script API, integrating Ovi adapter with the GViz framework was easy.
Similarly any user can integrate an adapter for the GViz framework, provided that the newly
adding service is with a Java Script API.


For the programmers with Ovi service, it provides a detailed API. The main task was to wrap
this API with our framework structure so that the user can use Ovi service within the GViz
framework. There are several options for visualization and the user can provide them to Ovi
service through our framework.

Ovi requires a registered account to get the maximum features with the map service. Like
Bing, Ovi is also a commercial service which we can integrate with their free API.

The following picture shows a appearance of a Ovi map integration in a web application.

Figure 4-16 Ovi map integration [27]

Like in the above image, the integrated map behaves within the framework in cooperation
with the other components using events.

4.5.2 Chart Adapter
To provide visualization connected to the maps, we have integrated charting adapters to
visualize the data related to geographical regions. Those charting adapters are the heart of the
framework as they handle the total visualization with the maps. The maps also listen to the
events on the charts and behave according to the interaction. The charts are also from the
external services and the integration is done through the Java Script APIs. The interaction
among charts and maps were achieved through the GViz event mechanism. The selection of a


data displayed on chart fires an event on the geographical location. The event subscriber then
can catch the event, process it and handle the data on the event.

The following diagram shows the usage of charting tools within the GViz Framework

Figure 4-17 Usage of Charts Visualization within GViz framework

In using visualization chart adapters, our main concern is on the Google Visualization API.

4.5.2.1 Google Interactive Charts
Google provide a set of interactive charts with rich java Script APIs [28]. The main advantage
in using the Google Chart was that we could wrap the various chart APIs with GViz adapters.
Within the Gviz frameworks, the all charting components were taken into a common
wrapping style and provided the wrappers for them. Using the GViz wrappers for google
charts, the user can create charts on his web application with a set of input data such as data
source, drawing div and the display options. The events from the charts are handled in the


framework according to the GViz style so that any other visualization component can listen
to the events and incorporate.

The Google APIs are freely accessible so that we could use and extract the relevant options
from the chart gallery. The Animated interactive charts provide a vast set of chart styles
including bar, pie, geo, radar, area and line charts. There are charts to suit multi-dimensional
data sets and there are charts such as pie charts to suit the single dimensional data sets. The
user can chose the chart style according to the required dimension of his data set to be
displayed. The underlying data table for Google charts is the Google data table created from
wrapping the JSON object. Initially the JSON object is created within the framework and
then for the use of the chats, the Google data table is created. The events are fired based on
this Google data table and so we have to read the Google table to get the data fired with the
events. The following is a collection of charts that we can use with GViz adapters.

Figure 4-18 Collection of Google Charts [28]


With the integration of those components, the GViz framework was customizable with
various options. The chart adapters were created so that a user with a good knowledge on
those Google APIs can get the maximum level of visualization within our framework.

4.5.2.2 Google Image Charts
Google also provides a Java Script image chart API [29] which we can integrate into our
framework. The importance of having an image chart is that we can save the charts as images
and use them in any other documentation. The charts also have the event mechanism so that
they too can be integrated into the interaction. Integration of the image charts increased the
customizability of the visualization elements of the GViz Framework.

4.6 GViz Supportive Modules
GViz Framework uses Google Caja HTML Sanitizer as a security module. By default the
module is deactivated due to its performance issues. Apart from that GViz consists of Non-
DOM Event implementation which works as the functionality linkage through EDA for the
framework.

4.7 Current Iteration (GViz Version 2.0)
This iteration‟s major concern was to improve GViz flexibility while utilizing the
performance. Major architectural improvements have been made to achieve the above
objective.

XML File XML
Data
Web Browser (Page) String JSON
File JSON Source
GViz Core String CSV File
Google Doc DSPL
Events GViz Convert JQuery
&
JSON XML Geo
Data
Configurations

Slice Builder Load Data
JSON
Handler Provider
Slice Slice ..….. Slice
1 2 n DSPL
Configurations
VizComp Config Binding Data Page Config Points
Extended DSPL

DSPL Provider

GMap Dependency
OviMap
Data Provider
BarChart
GTable Dependency Config
Visualization Components


Figure 4-19 GViz Architecture (Iteration 3)

In GViz Framework V2.0 major improvements are done in the following areas.

 GViz Data Adapters (Referred as Data Providers in GViz Framework V2.0)
 GViz Visualization Adapters ( Referred as VizComps in GViz Framework V2.0)
 Configuration & DSPL

4.7.1 GViz Data Providers
GViz Framework V2.0 both DSPL & Data can be input to the Framework using same
Providers. Only requirement is for the data to be in correct format related to the provider.

For Data Providers gviz.convert namespace contains utility methods to convert between
different data formats. GViz core only handles JSON data therefore Data Providers should
convert the raw data format to JSON before providing to the GViz core.

The converted data should be in following JSON format in order for the GViz Core to
operate.
{

rows: [{c:[{v: 'Work'}, {v: 11}]},

{c:[{v: 'Eat'}, {v: 2}]},
Few examples of a GViz Data Providers are shown below.
{c:[{v: 'Commute'}, {v: 2}]},

{c:[{v: 'Watch TV'}, {v:2}]},

{c:[{v: 'Sleep'}, {v:7}]}

]

}

Figure 4-20 gviz.dataprovider.jsonstr


Figure 4-21 gviz.dataprovider.xml

4.7.2 GViz VizComps
In GViz Framework V2.0 VizComps requires minor configuration to visualize the data
provided by the Core. Specification of VizComp is shown in the Figure.

.

Figure 4-22 VizComp Specification

Here data slice is a selection of data columns in JSON format which adhere to the JSON data
specification for Google Visualization API as well as GViz Framework Data. Google
Visualization API components can directly visualize the data provided by the data slice & for
other components it can be visualized according to their particular API facilitated by GViz
Data Table Wrapper.

In new event model Map Selection & Visualization Component Selection Events are replaced
by Selection event which is associated with GViz Event Handlers.


Few examples of VizComps are shown below.

Figure 4-23 gviz.vizcomp.gdoc

Figure 4-24 gviz.vizcomp.gtable

4.7.3 Configuration & DSPL
GViz Framework V2.0 consists of page level configuration using 4 major configuration
points.

 DSPL Provider Configuration


 Dependency Configuration
 Data Provider Configuration
 VizComp Configuration

They enable flexible integration of custom components as well as using existing components.

GViz in page configuration for Data Providers is shown in the following example.

gviz.data.load({provider:'gviz.dataprovider.xml ',source:'dsplnew.xml'});

Gviz Provider in page configuration also supports to add optional attributes as JSON objects
which can be added as options:{ <JSON>} similar to provider & source attributes.

Similarly VizComps can also be configured in page as shown in the following example.

gviz.vizcomp.load({component:'gviz.vizcomp.gpiechart',sliceId:'map_slice',contain
erId:'pie_div', options: {
is3D: true,
title : '2010 Election'
}});

Here also options is not compulsory and vary depending the VizComps used.

GViz Framework also consists of rich implementation of DSPL Schema. It includes the
addition of Concepts separately. A sample DSPL used in GViz Framework V2.0 is shown
below.


<?xml version="1.0" encoding="UTF-8"?>
<dspl>
<info>
<name>
<value>InfoName</value>
</name>
<description>
<value>InfoDescription</value>
</description>
<url>
<value>InfoURL</value>
</url>
</info>
<provider>
<name>
<value>ProviderName</value>
</name>
<url>
<value>ProviderURL</value>
</url>
</provider>
<topics>
<topic id="TopicID">
<info>
<name>
<value>TopicName</value>
</name>
</info>
</topic>
</topics>
<concepts>
<concept id='District_ID'>
<info>
<name>
<value>District</value>
</name>
<description>
<value>District</value>
</description>
</info>
<table ref='column1'/>
</concept>
</concepts>
<slices>
<slice id='map_slice'>
<dimension concept='District_ID'/>
<metric concept='UPFA_ID'/>
</slice>
<slice id='table_slice'>
<dimension concept='District_ID'/>
<metric concept='UPFA_ID'/>
</slice>
</slices>
<tables>
<table id='table_ID'>
<column id='column1' type='string'/>
<column id='column2' type='number'/>
<column id='column3' type='number'/>
<data>
<file>
dataFile
</file>
</data>

GViz Framework
</table> Page 47
</tables>
</dspl>

Apart from the basic DSPL Schema the Framework also supports Extended Attributes which
can move in page configuration of VizComps & Data Providers to DSPL.As an example
additional attributes can be added to define the required VizComp configuration to data slice
node.

<slice id='map_slice' component='gviz.vizcomp.gmap'
containerId='map_div' options='{"showTip":"false"}'>

Similarly GViz Data Provider information can be added to the data node of the DSPL as
shown below.
<data provider = 'gviz.dataprovider.csv'
options='{"showTip":"false"}'>

5 Results and analysis
5.1 Importance of visualization dashboards
In modern day business applications, it is very important to convey information to a viewer as
quickly as possible. To achieve this, visual representations is a very effective approach.

Figure 5-1 Example Visualization Dashboard [30]

The above example is a commercially available customizable dashboard. Dashboards like this
are specific to the defined task from scratch. When we proceeded with the project, we came
to realize the need of a reusable solution to create visualizations.

In this research we focused on creating visualizations for the web. The main intention of this
approach is to develop a platform independent easily accessible visualization solution.


Dashboards are very popular in enterprise level data visualization applications. Therefore we
focused on creating a reusable framework which would enable a user to easily customize
dashboards according to their needs and preferences

5.2 Evolution of GViz Framework

5.2.1 First Iteration
During the first iteration of the project the technology selection was based on the following
arguments.

 Technology: Technology that effects on the architecture
 Alternative: Currently available possible alternative technologies
 Selection: Selected technology among the alternative technologies
 Reason : Reason for selecting the selected technology among the alternatives

Technology Alternatives Selection Reason

Server C++ Java Dependency of the project architecture
programming C# on the Google Maps is high and Google
language Java map‟s API is based on Java. Java is open
source and well tested. Java has higher
level design potentials than C++.
Server database MSSQL MySQL MySQL is open source, easy to develop
system PostgreSQL with an UI in Windows platforms. It can
MySQL be run using the WAMP server.
Geo GoeServer GoogleMaps Google Maps is a flexible GIS system
Information PostGIS with online map provider that has an
System GoogleMaps extendable API with many facilities. The
API is provided for development in
JavaScript, Flash, etc.
Web server IIS GlassFish GlassFish is open source and good in its
Apache simplicity. It has inbuilt test clients to
GlassFish test the web server.
Client side HTML5 Flash Flash is one of the technologies which
visualization JavaScript have the potential of building rich
technology Flash visualization components for web &


where a number of freely available
components can be found. One of the
unique feature of flash is it is quite
responsive in speed compared to other
web application technologies like Java
Script. Another factor is that Google
Maps is compatible with Flash.

After building the first prototype during the first iteration it was identified that the project is
moving some of Framework behavior to a generic application which can be configured to
behave differently. Apart from that the dependencies were very high especially when it
comes to the technology selection.

5.2.2 Second Iteration
Therefore with the start of the second iteration we have moved away from the above
technology selection & architecture to a framework built using JavaScript. Here are some
important facts we consider in selecting JavaScript as the suitable technology for us.

 JavaScript is selected as the core technology to create visualizations on top of a web
page. We have identified several factors to support that decision.
 Almost all modern browsers and many of the mobile browsers support JavaScript.
 JavaScript is independent of the operating system and only dependent on the web
browser.
 JavaScript is independent of the server scripting technologies but can be dynamically
generated using any type of server scripting technologies (ASP.NET, Java Servlets,
JSP, PHP and etc.)
 Many visualization components such as Maps, Charts and Graphs etc. are available as
open API and services.
 Provides flexibility to extend due to its late binding property.
 Facilitate interaction with HTML/HTML5, CSS as well as some of the other Rich
Client Technologies such as Flash, Silverlight.
 Introduction of Ajax which is a combination of JavaScript DHTML and XML
improved the range of use of JavaScript


GViz - Project Report

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Ähnlich wie GViz - Project Report

Ähnlich wie GViz - Project Report (20)

Mehr von Maninda Edirisooriya

Mehr von Maninda Edirisooriya (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

GViz - Project Report