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


 Introduction of JSON added the capability of building flexible and complex data
structures using JavaScript.
For the sake of clarity and ease of understanding, the results and analysis of the design of this
software is divided into three main parts.
 Core Framework
The JavaScript library which has been developed to facilitate a visualization
dashboard
 Data Set Description
Methods of describing the visualization data sets and the reasons to adopt such an
approach
 Web application
Visualization dash board hosted in a web site to demonstrate the capabilities and
scenario of usage of GViz framework

5.2.2.1 Core Framework
GViz framework contains all the key components written as client side JavaScript library to
facilitate the creation of visualization dashboards on top of a web page. When designing a
programming model for the framework we had to face a lot of challenges.

 Keeping all the functionalities inside the client browser: We decided to develop the
entire application as an entirely client side JavaScript library in order to maximize the
re-usability aspect.
 Asynchronous programming model: In order to keep the responsiveness and to cater
to the remote data access, AJAX technologies have been used.

5.2.2.2 Data Set Description
Data available in the respective data source needs to be described in order to create
meaningful visualizations out of it. We have adopted Google‟s Data Set Publishing Language
(DSPL) as the representation language for the data and metadata datasets.

DSPL is the language introduced by Google to be used in their visualization tool named
Google Public Data Explorer. DSPL is made open and free to be used by Google to
encourage the usage of it in other related products. Although DSPL is new it has the potential
to gain considerable acceptability among the web developer community because of the wide
reach of the Google technologies in the web development arena. This potential popularity and


the rich expressive power proved by the capabilities in Google public data explorer was the
prime reason behind incorporating DSPL into the framework.

5.2.2.3 Designer and Code Generator
What GViz Framework provides is the underlying structure to build visualization dashboards
on a web page. To improve the usability of the framework we have created a designer and
code generator which would automate the process of creating a dashboard.

5.3 Performance Improvement

5.3.1 Increasing the Load Time
When building web applications, the most important factor is the time to load it into the client
browser. The load time of an application plays a crucial role in determining its popularity.
Therefore we have come up with various mechanisms to reduce the load time of a dashboard
which uses the GViz Framework.

Figure 5-2 Load Time Information

5.3.1.1 Content Delivery Networks

We use Google‟s Content Delivery Network (CDN) to load Google‟s Ajax libraries including
all the important jQuery. This gives a significant advantage over loading the library form the
local domain.

 Decreased Latency

A CDN distributes the static content across servers in various, diverse physical
locations. When a user‟s browser resolves the URL for these files, their download
will automatically target the closest available server in the network. In the case of
Google‟s AJAX Libraries CDN, what this means is that any users not physically
near the web server will be able to download jQuery faster than if you force them
to download it from the server running the web site.


Although there are a number of CDNs available, Google is offering the service
free of charge.

 Increased Parallelism
To avoid needlessly overloading servers, browsers limit the number of
connections that can be made simultaneously. Depending on the browser, this
limit may be as low as two connections per hostname.
Using the Google AJAX Libraries CDN eliminates one request to the site,
allowing more of the site‟s local content to download in parallel. It does not make
an enormous difference for users with a six concurrent connection browser, but
for those still running a browser that only allows two, the difference is noticeable.

 Better Caching

The greatest benefit of using the Google AJAX Libraries CDN is that the users
may not need to download jQuery at all.

No matter how well optimized a site is, if jQuery is hosted locally then the users
must download it at least once. Each of the users probably already has dozens of
identical copies of jQuery in their browser‟s cache, but those copies of jQuery are
ignored when they visit the site.

However, when a browser sees references to CDN-hosted copies of jQuery, it
understands that all of those references do refer to the exactly same file. With all
of these CDN references pointing to exactly the same URLs, the browser can trust
that those files are truly identical and won't waste time re-requesting the file if it's
already cached. Thus, the browser is able to use a single copy that's cached on-
disk, regardless of which site the CDN references appear on.

This creates a potent "cross-site caching" effect which all sites using the CDN
benefit from. Since Google's CDN serves the file with headers that attempt to
cache the file for up to one year, this effect truly has amazing potential. With
many thousands of the most trafficked sites on the Internet already using the
Google CDN to serve jQuery, it's quite possible that many of the users will never
make a single HTTP request for jQuery when they visit sites using the CDN.


Even if someone visits hundreds of sites using the same Google hosted version of
jQuery, they will only need to download it once!

5.3.1.2 Compressing the JavaScript Code
It is a standard practice for many JavaScript libraries to compress the code by removing white
spaces, comments and shortening lengthy variable names. There are tools available to
automatically perform this code compression. In this project we are using Mozilla‟s Rhino.

5.3.2 Using Fast Data Structures
Since this is a data intensive application, it is very important to handle data efficiently. We
have used JSON [31] data objects to handle data inside the framework. We have adopted the
schema for our main JSON data structure from Google Data Table specification.

6 Discussion
6.1 Core Framework
GViz framework is developed to enhance the available map services to visualize geo data.
Nowadays web sites have integrated maps on the web pages to show business data. This
would only give a limited set of functionalities. Online maps do not offer much flexibility for
easy customization. Custom modification to the available map will require a considerable
amount of development effort which is not practical for a small business website.

The structure of the GViz framework can be considered as a collection of,
 Custom-written code
 Reusable libraries
 Web APIs
From one point of view it can be perceived as an integration of available services. But the
underlying which made that integration possible is a result of extensive research and
development.

Building a framework for data visualization is a challenging task when compared to
developing an application with a predefined set of visualization elements. This framework
provides the basis to embed a rich set of visualization easily into a web page. Since a web


page is accessible independent of the platform, this kind of visualization can be universally
accessed.

The project was started with the aim to build a geo data visualizer. At the beginning we
wanted to develop an application which would leverage the functionalities of the services like
Google Maps to represent geographical data. The intention was to integrate the mapping
functionalities with data visualization which would serve the purpose of a geo data visualizer.
As we went on with the implementation, we came to realize that JavaScript is a more suitable
option for building this kind of application.

6.2 Supporting Services - Designer and Code Generator
In order to enhance the usability and the marketability of the framework, we have developed
a designer and code generator to easily create a visualization dashboard using the framework.
This service can be accessed through a web site and the generated code can be downloaded to
be deployed in any preferred server.

This service is aimed at the less experienced users to easily get what they want without going
for advanced developer support. Even the experienced developers can benefit from this
service as it would greatly reduce the initial setup and configuration time. Another advantage
of this is that they can familiarize themselves with the coding style used before making
customizations.

6.3 Coding
The complete system was iteratively re-factored and the system architecture was enhanced
several times to achieve a better solution for the problem. In the earlier versions the system
was highly coupled, with less cohesion. With the use of object oriented concepts the
complexity could be reduced critically. With the introduction of event driven architecture
(EDA), implementation problems of asynchronous paths and event handling could be
simplified. With the usage of design patterns these requirements could be more achievable.

6.3.1 Use of design patterns
Data source components and visualization components are supported by the framework using
the adapter design pattern. Data Providers facilitate connection between those components


and the framework. For a third party, for a data source component, a custom written data
provider can be used as the adapter for the framework. Usage of this design pattern enables
the framework to be supported for custom developed components by the user according to the
requirements. APIs and specifications provided for both data source components and
visualization components make it easy for the user to develop custom components and help
the framework to be extendable.

Event driven architecture was implemented using the custom developed „event‟ class and by
reusing the jQuery event support. This is the use of observable design pattern in GViz
framework. This pattern enables the framework to decouple events from the flow of the
remaining codes and easily support asynchronous calls such as file load events from an
external server. Asynchronous nature enables the framework to support multiple
asynchronous calls in paralleled paths.
Decorator design pattern is used for compatibility requirements of the GViz framework.
DSPL objects and data table objects are converted to a JSON object when the object is taken
into the framework. Inside the framework JSON objects are used to access data items from
the data object as JSON is very easy and efficient to process. Decorator pattern is also used
when JSON data is required to feed to visualization components. This design pattern enables
the framework to be compatible with many input data structures like XML, string and CSV
files.

6.3.2 Documentation Generation
Maintaining documentation for a rapidly developing project is one of the problems we faced.
Maintaining commented code as the development document was time consuming as the
classes, methods and components were dynamically added, changed and removed. Modules
of the framework were included in different files so viewing the big picture was impossible
with comments. Maintaining an external document was also impractical due to the
synchronization issues with code to the document.

Due to the above mentioned reasons we had to go for an automatic document generation
solution. First we tried with DocumentJS document generation tool which comes with
JavascriptMVC which was mentioned in the chapter Literature Survey. But then we found
that DocumentJS is not that popular, so the user community is less. Then we moved to the
YUI Doc, which is the documentation solution available for the well-known YUI JavaScript


library. We selected it as the documentation solution as it has a better user community, ease
of implementation and due to the visual quality of YUI Doc.

YUI Doc generates html documents for the JavaScript codes using a specific comment format
above the code and using special tags describing the properties of the code such as its type
(e.g.: Method, Module and etc.) and description of the code.

6.4 Development Process
It is very important to have a good development process in place when you are working as a
team. With the experience gathered in the industrial training we tried to adopt those best
practices to streamline the development process.

6.4.1 Agile approach
Since this is a highly research oriented project we were unable to define all the specifications
upfront. We had to do extensive research about available products and the capabilities of
available technologies. When we proceeded with the project, we came to realize that it is
essential to take an iterative approach to correctly identify what needs to be done.

First we built a prototype web dashboard without a framework. It contained some of the key
functionalities we identified to be important for a business dashboard like maps, charts,
graphs and remote data access (Google Doc). From that prototype we understood the basic
requirements of a framework which would facilitate building such dashboards.
Later on we had three main iteration cycles to improve the features and performance of the
framework.

6.4.2 Test Driven Development
One of the main inefficiencies occurring in software development is the implementation of
unnecessary functionality rather than focusing mainly on the objectives. This creates
unnecessary effort, causes time overrun, causes cost overrun and introduces unnecessary
complexity to the software. Important features are not given sufficient attention. Test driven
development is one of the best solutions for this problem. After the design of the system is
prepared, a set of test cases are written to test the required features. This avoids unnecessary
features and focuses the programmer on the basic requirements first. During the development
process test cases are tested. Initially only some of the test cases are passed and at the
completion all the test cases should be passed.


After we started the final iteration after the architecture and design was confirmed we started
a test driven development. QUnit is the framework used for the GViz framework which is an
add-on for jQuery. Using QUnit we write unit test cases for each component we write. After
the component is correctly implemented, the test case is passed.

Test driven development helps to identify if another component breaks the functionality of a
previously developed component as all the test cases are tested after a new component is
developed. As QUnit is another JavaScript framework it tests JavaScript code inside the same
web browser. Therefore this can be easily used to identify any browser dependent
incompatibility by testing in different browsers.

7 Conclusion and Future Work
With the rapid growth of the internet, the load for a web server is always increasing.
Therefore it is vital to delegate the work of showing web content to the client browsers as
much as possible. In this research we have explored ways and means to achieve this goal in
the context of web data visualization. The value of the product lies in its ability to be
extended to use various other web visualization tools.

In future we hope to develop the framework as a marketable product. DSPL generating
service is expected to be given as a service for the users all over the world to be able to
generate their own custom visualization dashboards. Documentation for the framework will
be hosted for public access under GNU licenses.

We can categorize the expected future work under basic two approaches.

 Extensions to the existing framework
 Enhancement of the framework

This categorization includes both functional and non-functional improvements possible under
each category.

7.1 Extensions for the existing framework
Under this section we are going to describe the possible growth of the GViz framework under
the current architecture of the framework. Assumptions and design concepts developed


during the Level 4 Project module will remain as it is and only external logic and components
will be added to the framework.

7.1.1 Addition of Data Providers
As the GViz framework explicitly provides a documented API for GViz Data Providers, it is
easy to plug in a new data provider as an adapter to the main framework. For example a
YAML type data provider can be implemented as a new adapter to facilitate YAML data type
as an input data type.

7.1.2 Addition of Visualization Components
Similar to Data Providers, using the existing explicit API for Visualization Components, we
can introduce new visualization components to the framework just by introduction of a new
adapter to the framework. Addition of Data Providers and Visualization Components to the
framework is possible due to the use of Adapter Design Pattern and modular programming
practices used in the development of the framework. Using the existing framework it can
easily load external dependencies required for both Data Providers and Visualization
Components before it loads the components.

Introduction of new Data Providers and Visualization components raises the requirement of a
new set of data converters in order to maintain communication among each of them and
among components and the core of the framework. GViz framework provides an API for data
converters too. New data converters can be easily integrated into the system using the given
API.

7.1.3 Improvement of interconnected events
Event based interconnection is already provided by the framework. Those events can be
improved and many types of events such as drag events added. These events will only be
useful and required when data and visualization components are supporting those events. Due
to that reason, events should only be introduced to the framework when they are required.

7.1.4 Geo specific component development
The framework can be made more specialized for geography related data visualization by
introduction of new features and constraints. Selected map visualization component can be
improved as a custom component improving its data visualization capability.


7.1.5 Snapshot capture facility
Already some visualization components provide the facility to take a snapshot as an image
file. GViz framework can be modified such that is outputs a snapshot of the entire framework
in a form such as an image file.

7.1.6 Enhancement of the framework
This section describes the next milestones of the framework. These enhancements would
change the design of the framework. However basic design rationale will remain the same for
the given types of enhancements. Therefore the well tested core architecture will be reused
for any of the changes mentioned below.

7.1.7 Audio integration
Basically GViz framework is a visualization framework. But it is not expected to be restricted
only to data visualization. Usage of sound is a good technique to sensitize the user about the
nature of the data. With the support of HTML5 we hope to integrate an audio system to the
framework.

7.1.8 Generalize parallelization of components
In future we expect to broaden the capability of the framework by making the user able to use
multiple data tables as data sources. Then an asynchronous DSPL loading, asynchronous
dependency loading, asynchronous data loading and asynchronous Visualization Component
loading will be implemented independently. If Visualization Components are dependent on
multiple data tables, a barrier will be implemented to load every data table before
Visualization Components are loaded.

7.1.9 Java based high performance processing interface
Some Visualization Components may require a higher amount of processing. And also as we
expect to implement some CPU intensive codes into the framework, a Java Applet based
processing API will be designed. Java Virtual Machine will do the processing more
efficiently than in JavaScript engine in the web browser.

7.1.10 WebGL support
WebGL is one of the most important technologies in the future for data visualization. Use of
the GPU of the user computer for complex visual computations through the interface of
OpenGL, will make very sophisticated data visualization a reality. In the near future we will
find readily available visualization software based on WebGL, which can easily be converted


into Visualization Components. Fulfilling these requirements we are going to implement
support for WebGL in GViz framework.

7.1.11 Data Insertion Functionality
GViz framework was initially designed to visualize a given data source to the user. But
during the development we understood the potential of using the framework for inserting,
editing and deleting existing data from the data source. This will enable the user to edit data
while looking at the data through the framework.


References
[1] N. Schuurman, GIS: a short introduction. Wiley-Blackwell, 2004.
[2] S. Few, “Data Visualization: Past, Present and Future.”
[3] “Google News Visualizations,” 25-Aug-2011. [Online]. Available:
http://googlesystem.blogspot.com/2007/11/google-news-visualizations.html. [Accessed: 25-
Aug-2011].
[4] “FredericMartin - Twitter and Co: Twitter Network Dynamic Visualization,” 25-Aug-2011.
[Online]. Available: http://fredericmartin.typepad.com/twitter/2009/02/twitter-network-
dynamic-visualization.html. [Accessed: 25-Aug-2011].
[5] “DDtrac User Guide: Target Performance Chart>,” 25-Aug-2011. [Online]. Available:
http://www.ddtrac.com/demo/wiki.asp?page=Target+Performance+Chart. [Accessed: 25-Aug-
2011].
[6] “Gadgets comes to Google Docs | - CNET News,” 25-Aug-2011. [Online]. Available:
http://news.cnet.com/8301-10784_3-9898520-7.html. [Accessed: 25-Aug-2011].
[7] “DBIx::Chart 0.02 - Perl DBI Extension for rendering charts and graphs,” 25-Aug-2011. [Online].
Available: http://cpansearch.perl.org/src/DARNOLD/DBIx-Chart-0.05/dbixchart.html. [Accessed:
25-Aug-2011].
[8] “Facebook Friendships on World Map fbKnol,” 25-Aug-2011. [Online]. Available:
http://fbknol.com/facebook-friendships-world-map/. [Accessed: 25-Aug-2011].
[9] “Open Access | Steven Can Plan,” 25-Aug-2011. [Online]. Available:
http://www.stevencanplan.com/category/accessibility/open-access/. [Accessed: 25-Aug-2011].
[10] “Projects — FUNDP,” 25-Aug-2011. [Online]. Available:
http://www.fundp.ac.be/en/research/projects/page_view/06276001. [Accessed: 25-Aug-2011].
[11] S. Yoshihama, N. Uramoto, S. Makino, A. Ishida, S. Kawanaka, and F. De Keukelaere, “Security
Model for the Client-Side Web Application Environments. IBM Tokyo Research Laboratory
presentation,” 2007.
[12] D. Yu, A. Chander, N. Islam, and I. Serikov, “JavaScript instrumentation for browser security,” in
Proceedings of the 34th annual ACM SIGPLAN-SIGACT symposium on Principles of programming
languages - POPL ’07, Nice, France, 2007, p. 237.
[13] “What is GIS? | GPS Systems,” 25-Aug-2011. [Online]. Available: http://gpssystems.net/what-is-
gis/. [Accessed: 25-Aug-2011].
[14] “Axiis : Data Visualization Framework,” 25-Aug-2011. [Online]. Available:
http://www.axiis.org/index.html. [Accessed: 25-Aug-2011].
[15] “Google Maps API Family - Google Code,” 25-Aug-2011. [Online]. Available:
http://code.google.com/apis/maps/index.html. [Accessed: 25-Aug-2011].
[16] “Javascript Libraries.” *Online+. Available: http://javascriptlibraries.com/. *Accessed: 04-Sep-
2011].
[17] “jQuery: The Write Less, Do More, JavaScript Library.” *Online+. Available: http://jquery.com/.
[Accessed: 04-Sep-2011].
[18] “jQuery UI - Home.” *Online+. Available: http://jqueryui.com/. *Accessed: 04-Sep-2011].
[19] “jQuery UI - ThemeRoller.” *Online+. Available: http://jqueryui.com/themeroller/. [Accessed: 26-
Aug-2011].
[20] “MooTools - a compact javascript framework.” *Online+. Available: http://mootools.net/.
[21] “JavaScriptMVC.” *Online+. Available: http://javascriptmvc.com/. *Accessed: 04-Sep-2011].
[22] “ensure - Ensure JavaScripts/HTML/CSS are loaded on-demand when needed - CodeProject.”
[Online]. Available: http://www.codeproject.com/KB/ajax/ensure.aspx. [Accessed: 30-Aug-
2011].

GViz Framework Page ix

[23] “gdata-objectivec-client - Google Data APIs Objective-C Client Library - Google Project Hosting.”
[Online]. Available: http://code.google.com/p/gdata-objectivec-client/. [Accessed: 04-Sep-
2011].
[24] “guava-libraries - Guava: Google Core Libraries for Java 1.5+ - Google Project Hosting.” *Online+.
Available: http://code.google.com/p/guava-libraries/. [Accessed: 04-Sep-2011].
[25] “Google Maps Javascript API V3 Basics - Google Maps JavaScript API V3 - Google Code,” 26-Aug-
2011. [Online]. Available:
http://code.google.com/apis/maps/documentation/javascript/basics.html. [Accessed: 26-Aug-
2011].
[26] “Bing Maps V7 Interactive SDK,” 26-Aug-2011. [Online]. Available:
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMap1. [Accessed: 26-Aug-2011].
[27] “Ovi Maps API Developer’s Guide: Getting Started,” 26-Aug-2011. [Online]. Available:
http://api.maps.ovi.com/devguide/getting_started.html. [Accessed: 26-Aug-2011].
[28] “Charts Gallery - Google Chart Tools - Google Code,” 26-Aug-2011. [Online]. Available:
http://code.google.com/apis/chart/interactive/docs/gallery.html. [Accessed: 26-Aug-2011].
[29] “Charts Gallery - Google Chart Tools: Image Charts - Google Code.” *Online+. Available:
http://code.google.com/apis/chart/image/docs/gallery/chart_gall.html. [Accessed: 30-Aug-
2011].
[30] “Dashboard Development by ComponentArt – Silverlight and WPF Dashboards for SharePoint
and SQL Server,” 25-Aug-2011. [Online]. Available:
http://www.componentart.com/services/consulting.aspx. [Accessed: 25-Aug-2011].
[31] Douglas Crockford <douglas@crockford. com>, “The application/json Media Type for JavaScript
Object Notation (JSON),” Jul-2006. [Online]. Available: https://tools.ietf.org/html/rfc4627.

GViz Framework Page x

Appendix I– Abbreviation

2D – Two Dimensional

3D – Three Dimensional

AJAX – Asynchronous JavaScript and XML

API – Application Programming Interface

CDN – Content Delivery Network

CSV – Comma Separated Value

DOM – Document Object Model

DSPL – Data Set Description language

EDA – Event Driven Architecture

GIS – Geographical Information System

GUI – Graphical User Interface

HTML – Hyper Text Markup Language

HTTPS – Hyper Text Transfer Protocol

JSON – Java Script Object Notation

OOP – Object Oriented Programming

SDK – Software Development Kit

UI – User Interface

XML – Extended Markup Language

GViz Framework Page xi

Appendix II– API Reference

Classes
gviz.convert
gviz.convert.selObjDecorator
gviz.data
gviz.data.dspl
gviz.data.table
gviz.dataprovider
gviz.dataprovider.csv
gviz.dataprovider.gdoc
gviz.dataprovider.jsonfile
gviz.dataprovider.jsonstr
gviz.dataprovider.xml
gviz.dataprovider.xmlstr
gviz.event
gviz.load
gviz.vizcomp
gviz.vizcomp.bingmap
gviz.vizcomp.gcombochart
gviz.vizcomp.ggeochart
gviz.vizcomp.gimagechart
gviz.vizcomp.gmap
gviz.vizcomp.gpiechart
gviz.vizcomp.gtable
gviz.vizcomp.hichart
gviz.vizcomp.ovimap

Important API Documentation

Class gviz.convert

Data conversion components are implemented

Properties

geocoderDataIndex - object
Order of received geo coded geo data is indicated by this index

geocoderExecuted - object
Flag indicating whether the geo code was executed

geocorderInputBuffer - object
Received geo coded data stored in this array buffer

Methods
geocoder
void geocoder ( )
Asynchronously fires appropriate event after geo coding
Returns: void

GViz Framework Page xii

getFromLocalStorage
string getFromLocalStorage ( )
Returns a string from local storage
Returns: string

jsonStrToJson
Object jsonStrToJson ( )
Returns the JSON object from the string
Returns: Object

jsonToStr
string jsonToStr ( )
Returns the string from the JSON object
Returns: string

parseXML
Object parseXML ( )
Core function of Parser library
Returns: Object

removeFromLocalStorage
void removeFromLocalStorage ( )
Deletes a string from local storage
Returns: void

removeSpaces
string removeSpaces ( )
Returns a string removing spaces
Returns: string

saveInLocalStorage
void saveInLocalStorage ( )
Saves a string in local storage
Returns: void

selectionToObject
Object selectionToObject ( )
Returns an object created from a given row and a column
Returns: Object

text2xml
Object text2xml ( )
Convert text to XML DOM
Returns: Object

xml2json
Object xml2json ( )
Converts xml documents and xml text to json object
Returns: Object

xmlStrToJson
Object xmlStrToJson ( )
Returns the JSON object from the XML string
Returns: Object

xmlStrToXml
Object xmlStrToXml ( )

GViz Framework Page xiii

Returns the XML object from the XML string
Returns: Object

xmlToJson
Object xmlToJson ( )
Returns the JSON object from the XML object
Returns: Object

Class gviz.convert.selObjDecorator

Decorator for selsction object

Properties

gviz - object
Main namespace

Methods
getSelectedCol
Object getSelectedCol ( )
Returns the selected column
Returns: Object

getSelectedCols
Object getSelectedCols ( )
Returns the selected columns
Returns: Object

getSelectedRow
Object getSelectedRow ( )
Returns the selected row
Returns: Object

getSelectedRows
Object getSelectedRows ( )
Returns the selected rows
Returns: Object

Class gviz.data.dspl

DSPL related operations

Properties

jsonObj - object
JSON object of the DSPL file

Methods
getColumn
Object getColumn ( )
Returns JSON object of column of table of DSPL file for the given column index

GViz Framework Page xiv

Returns: Object

getColumnIndex
int getColumnIndex ( )
Returns column index of table of DSPL file for the given column id
Returns: int

getColumns
Object getColumns ( )
Returns JSON object of columns of table of DSPL file
Returns: Object

getConcept
Object getConcept ( )
Returns JSON object of concept of DSPL file for the given table referance
Returns: Object

getConcepts
Object getConcepts ( )
Returns JSON object of concepts of DSPL file
Returns: Object

getDataProvider
Object getDataProvider ( )
Returns JSON object of data provider of the table of DSPL file
Returns: Object

getDimensions
Object getDimensions ( )
Returns JSON object of dimensions of a slice for given slice JSON object, of DSPL file
Returns: Object

getFile
string getFile ( )
Returns file name of the table of DSPL file
Returns: string

getInfo
Object getInfo ( )
Returns JSON object of information of the DSPL file
Returns: Object

getMetric
Object getMetric ( )
Returns JSON object of matrices for the given slice of DSPL file
Returns: Object

getProvider
Object getProvider ( )
Returns JSON object of provider information of the DSPL file
Returns: Object

getSlice
Object getSlice ( )
Returns JSON object of slice of DSPL file for the given slice id
Returns: Object

getSlices

GViz Framework Page xv

Object getSlices ( )
Returns JSON object of slices of DSPL file
Returns: Object

getTable
Object getTable ( )
Returns JSON object of the table of DSPL file
Returns: Object

getVizcompProperties
Object getVizcompProperties ( )
Returns JSON object of properties of visualization components for a given slice id
Returns: Object

hasConcepts
boolean hasConcepts ( )
Whether the DSPL file has concepts
Returns: boolean

hasDimensions
boolean hasDimensions ( )
Whether the given slice of DSPL file has dimensions
Returns: boolean

hasFile
boolean hasFile ( )
Whether data source of the table of DSPL file is a file
Returns: boolean

hasMetrics
boolean hasMetrics ( )
Whether the given slice of DSPL file has matrices
Returns: boolean

toJson
Object toJson ( )
Returns JSON object of the DSPL file
Returns: Object

toJsonStr
string toJsonStr ( )
Returns string value of JSON object of the DSPL file
Returns: string

Class gviz.data.table

Data table related operations

Properties

jsonObj - object
JSON object of the data table

Methods

GViz Framework Page xvi

bindColumnHeaders
void bindColumnHeaders ( )
Bind relative column headers of columns of the data table for each given column In header it includes
id, name and type
Returns: void

getColumn
Object getColumn ( )
Returns JSON object of column of the data table for a given column id
Returns: Object

getColumnCount
int getColumnCount ( )
Returns number of columns of the data table
Returns: int

getColumnId
string getColumnId ( )
Returns id of column of the data table for a given column index
Returns: string

getColumnLabel
string getColumnLabel ( )
Returns label of column of the data table for a given column index
Returns: string

getColumns
Object getColumns ( )
Returns JSON object of collection of columns of the data table
Returns: Object

getColumnType
string getColumnType ( )
Return column type of column of the data table for a given column index
Returns: string

getRowObjects
Object getRowObjects ( )
Returns JSON object of collection of rows of the data table for a given column index
Returns: Object

getRows
Object getRows ( )
Returns JSON object of collection of values of rows of the data table for a given column index
Returns: Object

getSlice
Object getSlice ( )
Return JSON object of the slice of the data table for a given slice id in a given DSPL file
Returns: Object

setColumnId
void setColumnId ( )
Set concept id as the column id of column of the data table for a given column index
Returns: void

setColumnLabel
void setColumnLabel ( )

GViz Framework Page xvii

Set concept name as the column label of column of the data table for a given column index
Returns: void

setColumnType
void setColumnType ( )
Set column type of column of the data table for a given column index
Returns: void

toJson
Object toJson ( )
Returns JSON object of the data table
Returns: Object

toJsonStr
string toJsonStr ( )
Returns string value of JSON object of the data table
Returns: string

Class gviz.event

Event processing is implemented here

Properties

dataLoaded - object
Data loaded event

dataProviderConfig - object
Data provider configuration event

dependencyConfig - object
Dependency configuration event

dependencyLoaded - object
Dependency loaded event

dsplLoaded - object
DSPL loaded event

dsplProviderConfig - object
DSPL provider configuration event

eventActions - object
Function to call on event fire

geoCodingCallback - object
Geo coding callback event

mEventName - object
Name of the event

select - object
Selection event

vizCompConfig - object

GViz Framework Page xviii

Visualization component configuration event

Methods
addListener
void addListener ( )
Add Listener a function to the event
Returns: void

hasListeners
boolean hasListeners ( )
Test whether the event has any listners
Returns: boolean

trigger
void trigger ( )
Fire the event
Returns: void

GViz Framework Page xix

GViz - Project Report

More Related Content

What's hot (9)

Similar to GViz - Project Report (20)

More from Maninda Edirisooriya (20)

Recently uploaded (20)

GViz - Project Report