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

GViz Framework Page i

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 ii

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 iii

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

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 i

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 ii

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 iii

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 iv

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 1

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.


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.


Figure 4-9 Activity Sequence Description

4.3 GViz Modules

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).

1

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

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

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

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

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

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

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

GViz Core

Event Handler

DSPL Adapter

Handler

Visualization Adapter Handler

Data Adapter Handler

Core Functions


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.

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

Visualization Adapter GViz Data Table Object

GViz DSPL Object

Data, DSPL to Adapter Mapping

& Adapter Configuration

Visualize Data

on web page


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.

Web Browser (Page) GViz Core

Data

Provider

DSPL

&

Data

Data

Source

JSON Load

Handler

DSPL

Data

Slice Builder

Slice

1

Slice

2

..….. Slice

n

VizComp Config Binding

GViz Convert

JSON XML Geo

JQuery Events

Co

nfi

gura

tio

ns

Visualization Components

Configurations

Exte

nd

ed D

SPL

Page Config Points

DSPL Provider

Dependency

Data Provider

Dependency Config

GMap

OviMap

BarChart

GTable

XML File XML

String JSON

File JSON

String CSV File

Google Doc


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.

Few examples of a GViz Data Providers are shown below.

Figure 4-20 gviz.dataprovider.jsonstr

{

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

{c:[{v: 'Eat'}, {v: 2}]},

{c:[{v: 'Commute'}, {v: 2}]},

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

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

]

}


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 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.

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.

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

gviz.vizcomp.load({component:'gviz.vizcomp.gpiechart',sliceId:'map_slice',contain

erId:'pie_div', options: {

is3D: true,

title : '2010 Election'

}});


<?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> </table> </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.

Similarly GViz Data Provider information can be added to the data node of the DSPL as

shown below.

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.

<slice id='map_slice' component='gviz.vizcomp.gmap'

containerId='map_div' options='{"showTip":"false"}'>

<data provider = 'gviz.dataprovider.csv'

options='{"showTip":"false"}'>


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

programming

language

C++

C#

Java

Java Dependency of the project architecture

on the Google Maps is high and Google

map‟s API is based on Java. Java is open

source and well tested. Java has higher

level design potentials than C++.

Server database

system

MSSQL

PostgreSQL

MySQL

MySQL MySQL is open source, easy to develop

with an UI in Windows platforms. It can

be run using the WAMP server.

Geo

Information

System

GoeServer

PostGIS

GoogleMaps

GoogleMaps Google Maps is a flexible GIS system

with online map provider that has an

extendable API with many facilities. The

API is provided for development in

JavaScript, Flash, etc.

Web server IIS

Apache

GlassFish

GlassFish GlassFish is open source and good in its

simplicity. It has inbuilt test clients to

test the web server.

Client side

visualization

technology

HTML5

JavaScript

Flash

Flash Flash is one of the technologies which

have the potential of building rich

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.

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/


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.

GViz Framework Page ix

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/.

[Accessed: 04-Sep-2011]. [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 x

[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. [Accessed: 04-Sep-2011].

GViz Framework Page xi

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 xii

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 xiii

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 xiv

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 xv

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 xvi

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 xvii

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 xviii

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 xix

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

Date post:	27-Jan-2015
Category:	Technology
Upload:	maninda-edirisooriya
View:	103 times
Download:	0 times