Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Geo-Data Visualization Framework                  (GViz)                                   Group Members:                 ...
DeclarationThis thesis is a report of the project work and research carried out in the Department ofComputer Science and E...
AbstractProject Title: Geo-Data Visualization Framework (GViz)Authors:       M. W. Edirisooriya,               B. P. P. Fe...
AcknowledgementAt this very important achievement of our academic careers we would like to remember allthe members in our ...
Table of ContentDeclaration .................................................................................................
3.13 Adobe Flash.............................................................................................................
5.2     Evolution of GViz Framework .................................................................................. 49 ...
References ..................................................................................................................
Figure 4-17 Usage of Charts Visualization within GViz framework ...................................... 40Figure 4-18 Colle...
1 IntroductionData visualization is the study of visual representation of data. The main goal of datavisualization is to c...
2 Aims      Research on different data and information visualization techniques.      Identifying existing geographic re...
3 Literature ReviewGeo data visualization is a specific area of       data visualization. We researched on datavisualizati...
3.2.1 Tree Map VisualizationA tree map is useful when it is required to visualize a large amount of data in several levels...
Figure 3-3 Example of Network Visualization [4]3.3 Time Variant Data VisualizationCharts and graphs were the main data vis...
Figure 3-4 Bar Charts [5]3.3.2 Method 2Animated charts and graphs can be used for representing the third dimension as the ...
Figure 3-6 Axis Bar Charts [7]3.4 Geo MapsGeo maps are the main visualization elements in geo-related data visualization. ...
visualization technique, Networks. Geo locations involved with connections are given lightcolors which enables this map to...
Figure 3-9 Example Animated 3D Geo-Data Visualization [10]Figure 3-9 is an animated 3D visualization of population density...
3.6 Common Problems in Geo Data Visualization      Representing multidimensional data: This problem may occur when visual...
3.7.3 JSON formatSimilar to XML format but other than “<” and “>” tags it uses other characters to simplify thedata. More ...
launch browser-based security attacks. Un-trusted JavaScript code should go through arewriting process which identifies re...
Technologies related to data visualization were rapidly evolving at the time of research so wetried to use the cutting edg...
Figure 3-10 Example GIS Integration [13]3.13 Adobe FlashAdobe Flash is the most popular technology for visualization in we...
Figure 3-11 Example Axiis Integrated Visualization [14]3.15 Google Maps APIGoogle Maps is a well-known map provider for ma...
Figure 3-12 Uses of Google Maps API [15]3.16 Google Visualization APIThis provides several tools for making data more comp...
3.18 JavaScript LibrariesWhen it comes to client side web technology, JavaScript libraries play a major role. They aredeve...
Due to the above mentioned reasons, client side web developers try to stick with a singleJavaScript library that provides ...
jQuery also supports a lot of user interface related API functions that are very important inuser event handling, which ar...
Figure 3-15 - Themeroller screenshot [19]3.18.3 Wijimo LibraryWijmo [19] has two libraries for commercial use and open sou...
Figure 3-16 - Wijmo Datepicker component [19]As technology moves from server side to client side, these types of readymade...
MooTools is a very useful library to be used for complex JavaScript framework programminglike GViz framework.             ...
Figure 3-18 - Sample DocumentJS document [21]3.18.6 Ensure LibraryEnsure [22]is a dynamically JavaScript loading add-on th...
4 Design and implementation of GViz FrameworkGViz Framework lifecycle consist of three major iterations. Since it is a res...
visualization is done in a separate layer with Flash on top of the map layer. The scope of theproject in the initial itera...
Figure 4-3 Interactions in DetailThe Google Maps and Google Fusion Tables are the basic web service used in map basedvisua...
Considering the functional aspects of the framework, an application developed using GVizVisualization Framework resides on...
files, SQL databases while users can develop their own adaptors for custom data sources.Detailed description of the activi...
Writing our own visualization components using flex / flash was very time consuming andcomplex activity. If we were to bin...
Figure 4-7 GViz High Level Architecture (Iteration 2)The flow diagram of GViz can be found in the following figure. GViz i...
Figure 4-8 Flow DiagramThe sequence of activities within GViz is shown in above figure where the sequence numbersindicates...
•Initializes Google APIs to use Googe JavaScript DataTable Class as intermediate data transfer  1    mechanism.      •Call...
Core module provides the flexibility to plug-in new Adapters for Data Visualization throughconfiguration on the webpage. I...
Any custom Adapter implementation should adhere to the above specification and it shouldbe implemented in gviz.data.adapte...
components with events. As within Java Script, the procedural programming is not workingdue to asynchronous behavior, the ...
wrapped with the GViz event system within the framework. The data to be visualized can beprovided in Google data table for...
4.5.1.2 Bing Map ServiceThis is another Java script map service API with a bunch of options provided by Microsofttargeting...
Figure 4-15 Example Bing Map [26]Giving the options to display is done while creating the Bing map object. The given optio...
For the programmers with Ovi service, it provides a detailed API. The main task was to wrapthis API with our framework str...
data displayed on chart fires an event on the geographical location. The event subscriber thencan catch the event, process...
framework according to the GViz style so that any other visualization component can listento the events and incorporate.Th...
With the integration of those components, the GViz framework was customizable withvarious options. The chart adapters were...
Figure 4-19 GViz Architecture (Iteration 3)In GViz Framework V2.0 major improvements are done in the following areas.    ...
Figure 4-21 gviz.dataprovider.xml4.7.2 GViz VizCompsIn GViz Framework V2.0 VizComps requires minor configuration to visual...
Few examples of VizComps are shown below.                                Figure 4-23 gviz.vizcomp.gdoc                    ...
     Dependency Configuration        Data Provider Configuration        VizComp ConfigurationThey enable flexible integ...
<?xml version="1.0" encoding="UTF-8"?> <dspl>  <info>   <name>    <value>InfoName</value>   </name>   <description>    <va...
Apart from the basic DSPL Schema the Framework also supports Extended Attributes whichcan move in page configuration of Vi...
Dashboards are very popular in enterprise level data visualization applications. Therefore wefocused on creating a reusabl...
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
GViz - Project Report
Upcoming SlideShare
Loading in …5
×

GViz - Project Report

986 views

Published on

Our final year project report.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GViz - Project Report

  1. 1. 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 MORATUWAThis 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
  2. 2. DeclarationThis thesis is a report of the project work and research carried out in the Department ofComputer Science and Engineering, University of Moratuwa, from September 2010 toAugust 2011.Except where references are made to other work, the content of the thesis is original andincludes the work done in collaboration as a team. This thesis has not been submitted to anyother 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 DateGViz Framework Page i
  3. 3. AbstractProject 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 WeerawaranaContents:GViz Framework is a Geo-Data Visualization Framework build using JavaScript. It enablesto reuse existing JavaScript API‟s, libraries and components to build complex datavisualization dashboards for the web with integrated event binding to interact betweencomponents. 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 withvisualization components such as charts, graphs etc. But using more than one component tovisualize the data makes things more complex and very hard for the application to evolve. Itbecomes extremely difficult to provide interaction among visualization components and toallow scalability of the application to use different data sources and new visualizationcomponents.GViz Framework addresses the above problems by providing a simple mechanism ofintegration and a single point of configuration using a XML (DSPL). The extendable natureof the Framework provides a flexible mechanism for integrating new visualizationcomponents and data sources by using its adapter interface.The Framework is directly usable for web developers to build complex dashboards for the useof scientists, economists, policy makers, engineers, researchers and etc., interested invisualizing geographically distributed data.Keywords: GViz framework, Geo-data visualization, Data Visualization, JavaScriptFramework, Visualization ComponentsGViz Framework Page ii
  4. 4. AcknowledgementAt this very important achievement of our academic careers we would like to remember allthe 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 hersupport 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 hiscommitment from scheduling all the project related evaluations at the correct time toproviding correct feedback after careful review of the project.Our gratitude also goes to all the lecturers and Staff members of the Computer Science andEngineering Department for their dedicated support in educating us to become moreknowledgeable human beings.Last but not least, we would like to remember all our batch mates in the department for theunforgettable time we had as CSE family members.GViz Framework Page iii
  5. 5. Table of ContentDeclaration .................................................................................................................................. iAbstract ......................................................................................................................................iiAcknowledgement ................................................................................................................... iiiTable of Content ..........................................................................................................................List of Figures .......................................................................................................................... iii1 Introduction ........................................................................................................................ 12 Aims.................................................................................................................................... 23 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) ................................................................. 13GViz Framework Page
  6. 6. 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 ................................................................................................... 234 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 ...................................................................................... 455 Results and analysis .......................................................................................................... 48 5.1 Importance of visualization dashboards .................................................................... 48GViz Framework Page i
  7. 7. 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................................................................................. 546 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 .................................................................................. 577 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 .............................................................................. 61GViz Framework Page ii
  8. 8. References ................................................................................................................................. ixAppendix I – API Reference ..................................................................................................... xi List of FiguresFigure 3-1 Evolution of Data Visualization [2] ......................................................................... 3Figure 3-2 Example of Tree Map Visualization [3] ................................................................... 4Figure 3-3 Example of Network Visualization [4] .................................................................... 5Figure 3-4 Bar Charts [5] ........................................................................................................... 6Figure 3-5 Animated Charts [6] ................................................................................................. 6Figure 3-6 Axis Bar Charts [7] .................................................................................................. 7Figure 3-7 Example Network Geo-Data Visualization [8] ........................................................ 7Figure 3-8 Example Descriptive Geo-Data Visualization [9] .................................................... 8Figure 3-9 Example Animated 3D Geo-Data Visualization [10] .............................................. 9Figure 3-10 Example GIS Integration [13] .............................................................................. 14Figure 3-11 Example Axiis Integrated Visualization [14] ....................................................... 15Figure 3-12 Uses of Google Maps API [15] ............................................................................ 16Figure 3-13 - List of JavaScript libraries [16].......................................................................... 17Figure 3-14 - Sample jQuery code ........................................................................................... 18Figure 3-15 - Themeroller screenshot [19] .............................................................................. 20Figure 3-16 - Wijmo Datepicker component [19] ................................................................... 21Figure 3-17 - Sample MooTools code [20] .............................................................................. 22Figure 3-18 - Sample DocumentJS document [21] .................................................................. 23Figure 3-19 - Sample Ensure code [22] ................................................................................... 23Figure 4-2 Logical View of the System ................................................................................... 25Figure 4-3 Interactions in Detail .............................................................................................. 26Figure 4-4 Development View of the System.......................................................................... 26Figure 4-5 Visualization Framework Activity Diagram .......................................................... 27Figure 4-6 GViz Data Framework Activity Diagram .............................................................. 28Figure 4-7 GViz High Level Architecture (Iteration 2) ........................................................... 30Figure 4-8 Flow Diagram......................................................................................................... 31Figure 4-9 Activity Sequence Description ............................................................................... 32Figure 4-10 GViz Core functionality categorization ............................................................... 32Figure 4-11 DSPL and Data Adapters ..................................................................................... 33Figure 4-12 Visualization Adapter Specification .................................................................... 34Figure 4-13 Using Several Map Services within GViz Framework ........................................ 35Figure 4-14 Overview of Google Map service [25] ................................................................. 36Figure 4-15 Example Bing Map [26] ....................................................................................... 38Figure 4-16 Ovi map integration [27] ...................................................................................... 39GViz Framework Page iii
  9. 9. Figure 4-17 Usage of Charts Visualization within GViz framework ...................................... 40Figure 4-18 Collection of Google Charts [28] ......................................................................... 41Figure 4-20 gviz.dataprovider.jsonstr ...................................................................................... 43Figure 4-21 gviz.dataprovider.xml .......................................................................................... 44Figure 4-22 VizComp Specification ........................................................................................ 44Figure 4-23 gviz.vizcomp.gdoc ............................................................................................... 45Figure 4-24 gviz.vizcomp.gtable ............................................................................................. 45Figure 5-2 Load Time Information .......................................................................................... 52GViz Framework Page iv
  10. 10. 1 IntroductionData visualization is the study of visual representation of data. The main goal of datavisualization is to communicate information effectively and clearly in an easilyunderstandable manner. Data visualization is a broad area. In this project we address the subtopic 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 tohave ways and means of generating visual objects. We have identified the potential of web2.0 technologies to provide a visualization solution. There are a number of public webservices 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 libraryThe service we are building is run totally on the client side of a web page using the abovementioned services. The GViz Framework has been developed as a JavaScript library likeJQuery which can be called to add visualizations to a web page.GViz Framework Page 1
  11. 11. 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 securityGViz Framework Page 2
  12. 12. 3 Literature ReviewGeo data visualization is a specific area of data visualization. We researched on datavisualization 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 byhand, wasting a lot of labor but it became much easier with the development of printingtechnology. In earlier times printing was carried out by using analog techniques which wereproblematic for standardizing and evaluating the data visualization. With the advancement ofdigital image processing and raster graphic theories it became much easier to correctly designa data visualization diagram.3.2 Visualization ElementsIn almost all data visualization requirements including geo relevant data visualization, acommon set of visualization elements like pie charts, column charts are used. In each suchelement it has a set of inherent advantages and inherent disadvantages. Therefore the type ofvisualization element should be carefully selected within the available visualization elementsconsidering the type of data, volume of data, most important dimensions of data and also byconsidering whether it is continuous or discrete. Other than the commonly used visualizationelements we have researched on tree maps and networks which are very useful forrepresenting geo relevant data.GViz Framework Page 3
  13. 13. 3.2.1 Tree Map VisualizationA tree map is useful when it is required to visualize a large amount of data in several levels ofhierarchies. Using different colors and textures it can visualize so much of data as a tree mapuses the whole 2D space of the tree map area. That much of data cannot be visualized usingan ordinary chart or a graph as they cannot make the visualization content in the wholeavailable area denser. Although it is suitable for comparing a lot of gathered data it is notuseful to analyze the variation of a particular variable with the change with respect to anothervariable like in charts. Figure 3-2 Example of Tree Map Visualization [3]3.2.2 NetworkA network is a very useful visualization element when it is required to visualize the existenceof interconnection between distinct geo locations and to represent the amount of connectivitybetween 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 theconnection line between geo locations. Thickness of the line, color and texture of line can bechanged accordingly.When there are many geo locations existing nearby, the clarity can be maintained by focusingon the geo location relation and by hiding or blurring other connections existing nearby, asshown below.GViz Framework Page 4
  14. 14. Figure 3-3 Example of Network Visualization [4]3.3 Time Variant Data VisualizationCharts and graphs were the main data visualization elements in 2D data visualization. Whenrequired to represent 3D data, several charts were required for the visualization. Even afterthe visualization has moved from paper to a computer monitor it introduced the new conceptof Dynamic Data Visualization. This method is capable of presenting animations enabling itto represent the third dimension using the time axis as the third dimension. With the use of acomputer screen it is possible to visualize 3D charts or such representations to visualize dataup to three dimensions. But only using a 2D screen it is a challenge to visualize 3D data in a2D area. Third dimension has to be visualized in one of the three following ways.3.3.1 Method 1Represent the third dimension in the same 2D space for each point in 3D space. e.g.: Barchart with many columns in each x value. This method is not suitable for representing datahaving many values for all three dimensions.GViz Framework Page 5
  15. 15. Figure 3-4 Bar Charts [5]3.3.2 Method 2Animated charts and graphs can be used for representing the third dimension as the timedimension. For example heights of a simple column chart can be changed with the timerepresenting the change of other two dimensions in the time domain. Figure 3-5 Animated Charts [6]3.3.3 Method 3Charts with 3 axes can be used to visualize the time variant data. The following example is a3- Axis bar chart.GViz Framework Page 6
  16. 16. Figure 3-6 Axis Bar Charts [7]3.4 Geo MapsGeo maps are the main visualization elements in geo-related data visualization. Distributionof data with respect to geo-location can be accurately represented only with geo-maps. Themain disadvantage, in geo-maps is that they need more 2D space to represent data becausesome regions in a map are concentrated with data and some are not. Overlapping ofconcentrated data is a main problem in geo-map visualization. Zooming is the only acceptedway to distinguish overlapping data but it makes the user tired and wastes the time. This isthe 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 describesthe interconnections between geo locations. This map representation is an extension of theGViz Framework Page 7
  17. 17. visualization technique, Networks. Geo locations involved with connections are given lightcolors which enables this map to visualize a large amount of data. Locations with higheramount of interconnections are not individually represented but regions with higherconnections are highlighted in light colors. Similarly individual connections between twolocations are not clearly displayed; instead connections with higher concentration ofconnections are highlighted in blue (This map was used to visualize interconnections inFacebook).This type of visualization is suitable for a large amount of geo locations and interconnectionsbut 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 geolocations. A little amount of data can be visualized as a default on the map. Descriptive datafor each location is visualized inside the interactive pop up. This type is useful forrepresenting a complex set of geo related data for a limited number of geo locations.GViz Framework Page 8
  18. 18. 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 whichcan also be represented with a shaded 2D map. But using 3D animated maps it can visualizemore complex data than this application.3.5 Usage of ColorsIn 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 understandthe visualization. Brightness and contrast are the main parameters applicable in gray scalevisualizations which are also very important in the case of colors as well. But sometimes it isnot the intensity but the color which makes the visualization poor in quality. For example ayellow object in the white background is hard to distinguish. And also it is important not touse colors like green and red for distinguishing objects as color blind people cannot recognizethe differences.The other importance in color is the attitude of humans towards different colors. For examplethe color red represents strong feelings like fear and green represents nature. When differentcolors are automatically allocated in a visual system there is a tendency to bias some objectwith certain colors rather than others which may not be expected by the system. And also theuse of colors should be matched for the type of occasion the visualization is used. Somefancy colors may be suitable for playful children but may not be used for professionalapplications.GViz Framework Page 9
  19. 19. 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 standardsAccording to the aim of our project we need to visualize data obtained from different types ofdata sources in different formats. Types of data sources are as follows.  Files  Online document  Web service  Database  Manually entered dataData formats that were found to be useful are as follows.3.7.1 TablesThe most generic data type is the Table type. It is easy to directly convert these types of datainto other data types supporting visualization API.3.7.2 XML formatThere are several schemas popular and there are competitive standards which have differentadvantages. Some schemas are very generic but require a lot of storage capacity. Some othersare good in space requirements but generality and parsing complexity is high.GViz Framework Page 10
  20. 20. 3.7.3 JSON formatSimilar to XML format but other than “<” and “>” tags it uses other characters to simplify thedata. More readable than some XML formats and JavaScript level parsers are available indefault in modern web browsers. Therefore it is easy to use JSON format for our framework.3.7.4 YAML formatYAML is another data representation format that is similar to XML and JSON but it is morereadable than them.3.7.5 CSV formatCSV is an acronym for “Comma Separated Values”. Usually large amounts of data are storedin 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 bespecified in Meta data. During the research we found a new such protocol developed byGoogle released very recently known as DSPL. (Dataset Publishing Language). DSPL is anopen standard where a DSPL data source is a Zip file which comprises a collection of CSVfiles and an XML file describing metadata of CSV file content. We went through variousDSPL standards describing different types of data.3.8 Security ConcernsTwo main security vulnerabilities have been observed in the pure data visualizationframework. Each of them can be prevented using external modules that can be implementeduncoupled with the main framework.3.8.1 Transmission SecurityWhen the system obtains data from a distant located data source, data security should beimplemented. One of the well-known secure solutions is using SSL layer for transport layersecurity which would maintain the confidentiality and authenticity of the data.If HTTPS is not supported by the infrastructure, the system itself can implement data securityusing application level encryption. Encryption and decryption adaptors can be implementedin data source and in the interface in client side which accepts data. In such an instance thekey exchange should be done in some other way.3.8.2 Client Side SecurityClient-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 toGViz Framework Page 11
  21. 21. launch browser-based security attacks. Un-trusted JavaScript code should go through arewriting process which identifies relevant operations, modifies questionable behaviors, andprompts 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 dataexists in the web browser. This can happen due to the security vulnerabilities that exist in theiframe web control. In modern web browsers, it implements new HTML5 specifications thatcontrol the data flow in both directions using sandboxes.Another implementation possibility of iframe was found using the open source Google Cajatool. It can be used as an add-on for Eclipse or Ant which recompiles JavaScript code into asecure format at the development phase.3.9 JavaScript Object OrientationAs GViz Framework is to be developed using JavaScript we need to have a good designapproach to structure the code. Since JavaScript is a very flexible language we must put in anextra 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 programminglanguages like Java, C++ and C#, JavaScript can support OOP because it supports inheritancethrough prototyping as well as properties and methods. We can write well encapsulated codethat can be reused. In JavaScript, functions are first-class objects. They can be stored invariables, 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 andexpressiveness when dealing with functions. Using these features of the language we canbuild a classically object oriented JavaScript framework.3.10 Technology ResearchWhile the literature review was going on we researched on the already existing technologiesused for geo related data visualization and the tools used to implement them. We preferredmore 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 tobe used in the project to achieve maximum level of functionality and usability for the enduser. (e.g.: Reusing Google Visualization API)GViz Framework Page 12
  22. 22. Technologies related to data visualization were rapidly evolving at the time of research so wetried to use the cutting edge technology as possible. (e.g.: HTML5 and DSPL) We wanted tomaintain our framework as independent as possible from external dependencies, which led usto come out with a client side JavaScript framework.We researched on the following technologies and tools during the process of the literaturereview.3.11 OpenGL and XNAThe OpenGL is an open source graphic programming library API supporting highperformance 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 moreabstract API for graphics programming. XNA is a Microsoft proprietary product similar toOpenGL but with some more abstraction than OpenGL. A large amount of reusable graphicobjects are available for XNA than OpenGL. However these two are not web basedtechnologies. 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 waysthat 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 displayingall forms of geographically referenced information. It helps you answer questions and solveproblems by looking at your data in a way that is quickly understood and easily shared. GIStechnology can be integrated into any enterprise information system framework.GViz Framework Page 13
  23. 23. Figure 3-10 Example GIS Integration [13]3.13 Adobe FlashAdobe Flash is the most popular technology for visualization in web based applications. Itsimplifies most visualization designs as it provides many visualization elements such as barcharts and pie charts. A simple code can bind data to such charts from web services or otherkinds of data source. Flash applications are developed on the open source platform, FlexBuilder.Although programming Flash with ActionScript is easier it requires a special Flash Playerplug-in to be installed in the local computer which introduces other dependencies andsecurity risks like LSO (Local Storage Object) cookies.3.14 Axiis – Open source Library for Data VisualizationAxiis has been designed to be a concise, expressive, and modular framework that letdevelopers and designers create compelling data visualization solutions by assembling easyto understand building blocks into simple or complex visual representations of data. Axiis isbuilt upon the Degrafa graphics framework and Adobe Flex. Axiis provides pre-builtvisualization components as well as abstract layout patterns and rendering classes that allowyou to create your own unique visualizations.GViz Framework Page 14
  24. 24. Figure 3-11 Example Axiis Integrated Visualization [14]3.15 Google Maps APIGoogle Maps is a well-known map provider for many web applications. Google Mapssatellite 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 ofGoogle Maps and put it directly on our own site. It allows developers to integrate GoogleMaps into their websites. It is a free service. It lets us add relevant content and customize thelook 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 specificdata can be overlaid. Although initially only a JavaScript API, the Maps API has sinceexpanded to include an API for Adobe Flash applications, a service for retrieving static mapimages, and web services for performing geo coding, generating driving directions, andobtaining elevation profiles.GViz Framework Page 15
  25. 25. Figure 3-12 Uses of Google Maps API [15]3.16 Google Visualization APIThis provides several tools for making data more comprehensible. Special URLs can be usedto embed graph and chart images in users own web pages. This is based on JavaScript. TheGoogle 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 ofgadgets. This allows dynamic and interactive charting. The key facility is the GoogleCharting tools.3.17 Data Set Publishing Language (DSPL)This is a representation language for the data and metadata of datasets. Datasets described inthis 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 applicationsGViz Framework Page 16
  26. 26. 3.18 JavaScript LibrariesWhen it comes to client side web technology, JavaScript libraries play a major role. They aredeveloped by a number of skilled programmers and have their own paradigms. In other wordsJavaScript libraries should be distinguished from C++ libraries and Java libraries. JavaScriptlibraries are not just libraries performing a specific task on top of the JavaScript API providedby the web browser. Most JavaScript libraries are cross browser compatible (i.e. handlesbrowser dependent codes internally) and introduces a new programming paradigm to theprogrammer. It needs some experience to master such a library. Most popular JavaScriptlibraries 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 anddashboard 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 scriptinglanguage, amount of code dependencies are directly proportional to the size of the frameworkwhich directly slows down the page load process. Not only that, as most JavaScriptframeworks use a similar public attributes like „$‟ symbol, usage of multiple number oflibraries, increase the risk of conflict of functionality. This is a special problem that can beidentified only in JavaScript libraries. Figure 3-13 - List of JavaScript libraries [16]GViz Framework Page 17
  27. 27. Due to the above mentioned reasons, client side web developers try to stick with a singleJavaScript library that provides all the major functionalities and to develop add-ons on top ofthat library to fulfill other functionalities. Therefore selection of the correct JavaScript libraryis a critical part of the client side web architecture. That library should support almost all therequirements of the software product. UI and other facilities are usually provided in built intothe library.We used jQuery as the base library and used jQueryUI and Wijmo for designing GVizdashboard. 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 whichrepresent different types of programming paradigms. Next we will discuss them in detail.3.18.1 jQuery JavaScript LibraryjQuery [17] is the most widely used open source JavaScript library for client side webdevelopment. It has cross browser compatibly for every API it provides. jQuery is basically aHTML document access modal that traverses through the DOM and apply JavaScriptoperations. It facilitates event handling more easily than ordinary JavaScript. jQuery APIprovides encapsulated functions for AJAX request handling that simplifies processes such asXML file load operation from a server. Figure 3-14 - Sample jQuery codeGViz Framework Page 18
  28. 28. jQuery also supports a lot of user interface related API functions that are very important inuser event handling, which are not provided by the ordinary JavaScript. And also becausethere are a large number of plug-ins that are available jQuery dominates the JavaScriptlibraries currently available.3.18.2 jQueryUI JavaScript LibraryjQueryUI [18] is an open source advanced user interface development platform that runs ontop of the jQuery API. As mentioned earlier jQuery provides a lot of browser independenthigh level functions that are utilized by the jQueryUI library. jQueryUI introduces a modifiedset 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 existingHTML 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 byadding 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 UIrelated 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 thedeveloper 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 enablesthe user to abstract the styles to be used for the UI controls in the entire web page. Forexample 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 theJavaScript add-ons related to UI are compatible with jQueryUI and its theming scheme,Themeroller as in the figure given below.GViz Framework Page 19
  29. 29. Figure 3-15 - Themeroller screenshot [19]3.18.3 Wijimo LibraryWijmo [19] has two libraries for commercial use and open source. We used open sourceversion Wijmo for GViz dashboard. Wijmo is a widget library with more than 30 widgets inbuilt. This library runs on top of jQueryUI API. In other words Wijmo provides a very highlevel abstraction for development of UI controls.GViz Framework Page 20
  30. 30. Figure 3-16 - Wijmo Datepicker component [19]As technology moves from server side to client side, these types of readymade componentsare very useful for rapid development. This library provides almost all the basic UI featuresprovided by a server side technology like ASP.NET. However data binding and updating isstill 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 comparedto server based web controls. And the other important fact is that functionality andappearance 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 jQuerylibrary but with a different paradigm. jQuery functionality is mainly based on the traversal ofdocument object model (DOM) and applying changes on it. MooTools is for object orienteddevelopment in JavaScript. Natural JavaScript does not support pure object orientedimplementations like Java. Features like inheritance, attribute, method and constructor is notsupported by natural JavaScript. MooTools allows programmer to program an object orientedcode and it converts the code into the browser compatible natural JavaScript. ThereforeGViz Framework Page 21
  31. 31. MooTools is a very useful library to be used for complex JavaScript framework programminglike GViz framework. Figure 3-17 - Sample MooTools code [20]MooTools not only supports object oriented programming, but it supports other facilitiessupported by jQuery such as UI related programming and event handling. MooTools providessome special functions such as chaining codes and periodically executable codes. And alsothere are many add-ons to MooTools as well but not as many as for jQuery.3.18.5 JavascriptMVC LibraryJavascriptMVC [21] is a JavaScript implementation framework for MVC (Modal ViewControl) design pattern for UI design. The purpose of the pattern is to isolate visual relatedcomponents from the underlying logic behind the components and their control plan fromeach other. JavascriptMVC is based on top of jQuery library and emphasizes the importanceof 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 documentGViz Framework Page 22
  32. 32. Figure 3-18 - Sample DocumentJS document [21]3.18.6 Ensure LibraryEnsure [22]is a dynamically JavaScript loading add-on that can load JavaScript files and CSSfiles according to the demand which is given by the code itself. This JavaScript library is aspecial 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 JavaScriptcode for the server to avoid unnecessary load delays. Figure 3-19 - Sample Ensure code [22]GViz Framework Page 23
  33. 33. 4 Design and implementation of GViz FrameworkGViz Framework lifecycle consist of three major iterations. Since it is a research orientedproject, initially the research took place to identify the requirements suitable to build theframework and to find existing solutions. Geo Data Visualization as an emerging technologymade it challenging to identify the type of technologies suitable for the Framework. Since itwas hard to define a generic solution the project was initiated in the following manner inprototype basis.4.1 First IterationDuring the first iteration we started to build the framework focusing on visualizing the datawhich has a geographical distribution mainly done on a map. In addition to the datarepresentation on a map, there were other user interactions using events to make the systemmore 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 FrameworkInitially it visualized Geo-Data using Google Maps API by employing the latest trends andtechnologies of data visualization. GViz is a web based application which consists of a richclient (Flash based) and data server (coded in Java). Geo-Data is represented in a map using acollection of map tiles provided by Google Maps Flash API. Using the web browser, userscan interact with the map interface and data through the indicators on the UI. TheGViz Framework Page 24
  34. 34. visualization is done in a separate layer with Flash on top of the map layer. The scope of theproject 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 followingdiagram. The web browser is considered as the front-end visualization software for theframework. Figure 4-2 Logical View of the SystemGViz Framework Page 25
  35. 35. Figure 4-3 Interactions in DetailThe Google Maps and Google Fusion Tables are the basic web service used in map basedvisualization. The overall deployment of the Framework is shown in the following diagram. Figure 4-4 Development View of the SystemGViz Framework Page 26
  36. 36. Considering the functional aspects of the framework, an application developed using GVizVisualization Framework resides on the client browser which communicates with Googleservices (Preferably Google Maps Service & Fusion Table Service)using HTTP protocol. It‟sbasically a rich client developed using Flash.The application uses flash plug-in for its execution and therefore its processes and threads arecoupled together among the application, flash plug-in and browser.Detailed description of the activities taking place is visualized in the activity diagram in thefollowing figure. Figure 4-5 Visualization Framework Activity DiagramThe framework also allowed data from various data sources to be plugged into the systemwhere they can be synchronized with Google fusion tables. It consisted of a module whichprovides the main foundation of synchronization providing the facility to bind data from CSVGViz Framework Page 27
  37. 37. 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 shownbelow. Figure 4-6 GViz Data Framework Activity Diagram4.1.1 Problems EncounteredIf we had used a separate data server written in Java and running on a local computer, wewould have needed to have our own web service to connect the data server and front endapplication. It was an extra burden on the framework implementation. We had to have areliable and highly available web service along with our framework. Writing a separate webservice is quite tedious than using an existing well known service. So we gave up the optionof 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 wasto synchronize the local data with the online fusion table. That was also done through a localprogram written in Java. There we had to access the online Google data tables from a rowjava program running on a local machine. The aim was to put the data on online tables as thesame as they locate in the local data bases. But the java program to do this had to accessseveral external libraries such as Gdata [23] and Guava [24]. The most annoying issue wasthat the Google fusion table didn‟t handle duplicate records. It caused many issues insynchronization. The fusion tables also had several limitations such as they can properlysupport only the Google visualization.GViz Framework Page 28
  38. 38. Writing our own visualization components using flex / flash was very time consuming andcomplex activity. If we were to bind the data supplied through the web service, and build ourcomponents using a visualization component generation library such as Axiis [14], it wouldreduce our focus on designing a new framework for visualization. Writing our visualizationcomponents was not a major requirement for GViz framework. So we decide to reuseexisting 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 initialprototype (done in first iteration) technology selection of the Framework was changed toJavaScript. It is basically to build a Client Side Geo Data Visualization Framework with allthe advantages of the above with additional flexibility to use it to be configured also in ServerSide.The Framework resides on the Client Browser as shown in the above architecture diagram. Itmanages to bind data sources with visualization components on client side reducing the costfor servers.The implementation of the Framework can be categorized to four main modules  .GViz Data Adapters  GViz Visualization Adapters  GViz Core Modules  GViz SupportiveGViz Framework Page 29
  39. 39. Figure 4-7 GViz High Level Architecture (Iteration 2)The flow diagram of GViz can be found in the following figure. GViz inputs data sourcesthrough Data Adapters and displays Visualizations using Visualization Adapters. The data(Raw Data) coming from Data Adapter is described using a data description language calledData Set Publishing Language (DSPL). The DSPL is also input to the Framework using aseparate Data Adapter Designed for DSPL (To take from XML File or String). TheFramework provides the Data as well as the Meta Data information for the VisualizationAdapters. Visualization adapters are configurable to provide different effects and they alsoneed to be configured to handle the data using the DSPL provided.GViz Framework Page 30
  40. 40. Figure 4-8 Flow DiagramThe sequence of activities within GViz is shown in above figure where the sequence numbersindicates their precedence. The functionality taking place in each stage is described in thefollowing figure.GViz Framework Page 31
  41. 41. •Initializes Google APIs to use Googe JavaScript DataTable Class as intermediate data transfer 1 mechanism. •Calls XML Data Adapter (Returns XML Dom Object) to get DSPL document. 2 •Fires DSPL Loaded Event after DSPL is loaded which provides DSPL Object. 3 •Calls Other Data Adapters (Returns Google Data Table Object) by Invoking Table Loadand. 4 •Fires TableLoaded Event after DataTable is loaded which provides DataTable Object . 5 •Fires Data Loaded Event witch provides DataTable& DSPL Objects. 6 •Provide DataTable & DSPL Objects to Visualization Adapters which dispalys data on webpage 7 Figure 4-9 Activity Sequence Description4.3 GViz Modules Event Handler DSPL Core Adapter Functions Handler GViz Core Data Visualization Adapter Adapter Handler Handler Figure 4-10 GViz Core functionality categorizationGViz core is the main component in GViz which initializes the functionalities of theFramework. Since Data Adapters are allowed to have asynchrony behavior to load data fromservers GViz uses Event Driven Architecture (EDA) to optimize the browser performance.To use EDA GViz Events were implemented within the core using JavaScript (SinceJavaScript doesn‟t natively support Non-DOM events).GViz Framework Page 32
  42. 42. Core module provides the flexibility to plug-in new Adapters for Data Visualization throughconfiguration on the webpage. It also uses Ensure JavaScript library to load adapters ondemand while managing the main data flow.GViz Data Table (Which is a wrapper of Google Data Table) consists of methods whichenable the visualization components to simplify its configuration. GViz Data DSPL providesextended functionality to provide direct access to data. GViz DSPL uses jQuery to handlecross browser concerns while parsing the data in DSPL XML DOM Object. GViz Frameworkiteration 2 supported a subset of DSPL Specification as shown in the below example.4.4 GViz Data AdaptersGViz 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 AdaptersGViz DSPL Adapter specification requires the input data to be according to the DSPLschema. Output Data should be contained in GViz DSPL Object which wraps the XML DOMObject where the framework can provide it to Visualization Components. After the Adapterdoes the data loading and conversion steps it can fire DSPL Loaded Event by providing theGViz DSPL Object as parameters.GViz Data Adapter specification has no restriction on the type of input data but its outputshould be a GViz Data Table which wraps the Google Data Table object.GViz Framework Page 33
  43. 43. Any custom Adapter implementation should adhere to the above specification and it shouldbe implemented in gviz.data.adapter namespace. During this iteration GViz was consistedwith Google Docs Data Adapter & XML File DSPL Adapter.4.5 Visualization AdaptersGViz Visualization Adapters are subdivided into two categories of Visualization MapAdapters & Visualization Component Adapters. Specification of Visualization Adapters isshown below. Visualization Adapter GViz Data Table Object Visualize Data on web page GViz DSPL Object Data, DSPL to Adapter Mapping & Adapter Configuration Figure 4-12 Visualization Adapter SpecificationThe specification of adapters differs only from its namespace requirements. VisualizationMap Adapters should be implemented in gviz.visualization.map.adapter & VisualizationComponent Adapters in gviz.visualization.component.adapter namespaces.4.5.1 Map AdapterThis is the main adapter the GViz framework has. The purpose of this adapter is to give theuser a geo graphical view of the visualization. The user can get an idea on the region thevisualization is currently on.A developer on the GViz framework can integrate several maps services commonly availablein the web applications. The adoptability for various kinds of maps from various kinds ofvendors is achieved through the map adapters. If a developer needs to add a new map type, heneeds only to write an adapter in the given format. Then the new map can be integrated intothe framework with interaction with other components. The importance is the interaction. Thevarious 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 aneven mechanism. The map visualization is totally connected with the other visualizationGViz Framework Page 34
  44. 44. components with events. As within Java Script, the procedural programming is not workingdue to asynchronous behavior, the interconnection of the several map adapters are handledthrough the GViz event system. The following diagram shows the interaction of three maptypes from different vendors within the GViz Framework. Figure 4-13 Using Several Map Services within GViz FrameworkIf there are new map services in the future, the future developer can also bind it to ourframework. Here is a detailed description on the various map types used up to now. The mainrequirement is to have a JavaScript API from the map service so that it can be integrated tothe GViz Framework written in JavaScript.4.5.1.1 Google Map ServiceGoogle maps provide APIs [25] in various web compatible languages. As the GViz isdeveloped in JavaScript, the Google Maps Java Script API was used within GVizFramework. The main advantage of using Google Maps is that we can use an easy interactionwith the Google visualization components within the framework. The inbuilt event system isGViz Framework Page 35
  45. 45. wrapped with the GViz event system within the framework. The data to be visualized can beprovided in Google data table format, Java Script Object Notation (JSON) format, XMLformat or in CSV format. This data binding compatibility of Google maps provides a hugeease in writing Google map adapter for the framework. The Google maps don‟t alwaysrequire having the geographical locations in the latitude, longitude format. It translates thenames of the location (e.g.: town, country, place, etc.) to the relevant latitude longitudecoordinates using the inbuilt geo coding mechanism provided by Google. As all thoseinfrastructure services are freely available, the integration into Google Map adapter was easy.The displaying features and characteristics for the map visualization can be provided throughan option JSON object. So the Google map adapter was provide so that a technical user canintegrate more options to the adapter. The following diagram shows the behavior of a Googlemap. 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 themap fires the relevant indices of the clicked location from the table. So the event catcher hasto look into the given indices of the data table and extract the data to be displayed from thetable. The event is based on the location and the event processing is to extract the relevantdata bound with that location. The location base events are the main idea of our geo relateddata visualization.GViz Framework Page 36
  46. 46. 4.5.1.2 Bing Map ServiceThis is another Java script map service API with a bunch of options provided by Microsofttargeting the web and mobile application developments. The Bing service [26] requires theuser 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 processesof the Bing maps are based on AJAX. So the performance is very attractive even in adynamic application with regular changes. The main reason for providing an adapter for theBing maps is that it provides a very good SDK in Java Script. The Bing Map Java Script APIis a great option to integrate it with the GViz framework. The adapter was provided so thatthe 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 mechanismwith the Bing API. Currently the Bing map adapter is with extendable basic features. TheBing maps within the GViz framework catches the events from the various othervisualization 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 thisMicrosoft service is integrated with Google service upfront so that that any service from anyvendor 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 theGoogle Geo Coding service which is freely accessible on the web. So the location based datacan be displayed without much effort. The geographical locations are encoded into geocoding 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 todisplay 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 getthe performance we required within the GViz Framework.The following picture shows a basic behavior of a Bing map on a web application.GViz Framework Page 37
  47. 47. Figure 4-15 Example Bing Map [26]Giving the options to display is done while creating the Bing map object. The given optionsare displayed on the map. Display options such as zoom level, focusing place and map typeare the commonly used options. If the user is fluent enough with Bing API, then he/she cancustomize the map with the desired options. The addition of Bing map into GViz frameworkdid 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 GVizframework in extending its API.4.5.1.3 OVI Map ServiceOvi [27] is another great map service provided by Nokia. This service is with a rich JavaScript library so that it can be integrated into any web service with ease. Like Bing map, thisservice is also fast loading; fast-startup and fast browsing map service. The functionality ofthe Ovi is much similar to the Bing map service. This service is also based on thegeographical coding of latitude and longitude pairs. The Ovi provides several visualizationoptions on the map including some dynamic creation with the user interactions. So the datasources should provide the geographical location in lat-long pairs. As GViz framework is notusing the data table with lat-long pairs, we have to give a separate geo coding service to thisOvi 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 newlyadding service is with a Java Script API.GViz Framework Page 38
  48. 48. For the programmers with Ovi service, it provides a detailed API. The main task was to wrapthis API with our framework structure so that the user can use Ovi service within the GVizframework. There are several options for visualization and the user can provide them to Oviservice through our framework.Ovi requires a registered account to get the maximum features with the map service. LikeBing, 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 cooperationwith the other components using events.4.5.2 Chart AdapterTo provide visualization connected to the maps, we have integrated charting adapters tovisualize the data related to geographical regions. Those charting adapters are the heart of theframework as they handle the total visualization with the maps. The maps also listen to theevents on the charts and behave according to the interaction. The charts are also from theexternal services and the integration is done through the Java Script APIs. The interactionamong charts and maps were achieved through the GViz event mechanism. The selection of aGViz Framework Page 39
  49. 49. data displayed on chart fires an event on the geographical location. The event subscriber thencan 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 frameworkIn using visualization chart adapters, our main concern is on the Google Visualization API.4.5.2.1 Google Interactive ChartsGoogle provide a set of interactive charts with rich java Script APIs [28]. The main advantagein 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 commonwrapping style and provided the wrappers for them. Using the GViz wrappers for googlecharts, the user can create charts on his web application with a set of input data such as datasource, drawing div and the display options. The events from the charts are handled in theGViz Framework Page 40
  50. 50. framework according to the GViz style so that any other visualization component can listento the events and incorporate.The Google APIs are freely accessible so that we could use and extract the relevant optionsfrom the chart gallery. The Animated interactive charts provide a vast set of chart stylesincluding bar, pie, geo, radar, area and line charts. There are charts to suit multi-dimensionaldata sets and there are charts such as pie charts to suit the single dimensional data sets. Theuser can chose the chart style according to the required dimension of his data set to bedisplayed. The underlying data table for Google charts is the Google data table created fromwrapping the JSON object. Initially the JSON object is created within the framework andthen for the use of the chats, the Google data table is created. The events are fired based onthis Google data table and so we have to read the Google table to get the data fired with theevents. The following is a collection of charts that we can use with GViz adapters. Figure 4-18 Collection of Google Charts [28]GViz Framework Page 41
  51. 51. With the integration of those components, the GViz framework was customizable withvarious options. The chart adapters were created so that a user with a good knowledge onthose Google APIs can get the maximum level of visualization within our framework.4.5.2.2 Google Image ChartsGoogle also provides a Java Script image chart API [29] which we can integrate into ourframework. The importance of having an image chart is that we can save the charts as imagesand use them in any other documentation. The charts also have the event mechanism so thatthey too can be integrated into the interaction. Integration of the image charts increased thecustomizability of the visualization elements of the GViz Framework.4.6 GViz Supportive ModulesGViz Framework uses Google Caja HTML Sanitizer as a security module. By default themodule 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 theframework.4.7 Current Iteration (GViz Version 2.0)This iteration‟s major concern was to improve GViz flexibility while utilizing theperformance. Major architectural improvements have been made to achieve the aboveobjective. XML File XML Data Web Browser (Page) String JSON File JSON Source GViz Core String CSV File Google Doc DSPL Events GViz Convert JQuery & JSON XML Geo Data Configurations Slice Builder Load Data JSON Handler Provider Slice Slice ..….. Slice 1 2 n DSPL Configurations VizComp Config Binding Data Page Config Points Extended DSPL DSPL Provider GMap Dependency OviMap Data Provider BarChart GTable Dependency Config Visualization ComponentsGViz Framework Page 42
  52. 52. 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 & DSPL4.7.1 GViz Data ProvidersGViz Framework V2.0 both DSPL & Data can be input to the Framework using sameProviders. 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 betweendifferent data formats. GViz core only handles JSON data therefore Data Providers shouldconvert 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 tooperate. { rows: [{c:[{v: Work}, {v: 11}]}, {c:[{v: Eat}, {v: 2}]}, Few examples of a GViz Data Providers are shown below. {c:[{v: Commute}, {v: 2}]}, {c:[{v: Watch TV}, {v:2}]}, {c:[{v: Sleep}, {v:7}]} ] } Figure 4-20 gviz.dataprovider.jsonstrGViz Framework Page 43
  53. 53. Figure 4-21 gviz.dataprovider.xml4.7.2 GViz VizCompsIn GViz Framework V2.0 VizComps requires minor configuration to visualize the dataprovided by the Core. Specification of VizComp is shown in the Figure. . Figure 4-22 VizComp SpecificationHere data slice is a selection of data columns in JSON format which adhere to the JSON dataspecification for Google Visualization API as well as GViz Framework Data. GoogleVisualization API components can directly visualize the data provided by the data slice & forother components it can be visualized according to their particular API facilitated by GVizData Table Wrapper.In new event model Map Selection & Visualization Component Selection Events are replacedby Selection event which is associated with GViz Event Handlers.GViz Framework Page 44
  54. 54. Few examples of VizComps are shown below. Figure 4-23 gviz.vizcomp.gdoc Figure 4-24 gviz.vizcomp.gtable4.7.3 Configuration & DSPLGViz Framework V2.0 consists of page level configuration using 4 major configurationpoints.  DSPL Provider ConfigurationGViz Framework Page 45
  55. 55.  Dependency Configuration  Data Provider Configuration  VizComp ConfigurationThey enable flexible integration of custom components as well as using existing components.GViz in page configuration for Data Providers is shown in the following example. gviz.data.load({provider:gviz.dataprovider.xml ,source:dsplnew.xml});Gviz Provider in page configuration also supports to add optional attributes as JSON objectswhich can be added as options:{ <JSON>} similar to provider & source attributes.Similarly VizComps can also be configured in page as shown in the following example. gviz.vizcomp.load({component:gviz.vizcomp.gpiechart,sliceId:map_slice,contain erId:pie_div, options: { is3D: true, title : 2010 Election }});Here also options is not compulsory and vary depending the VizComps used.GViz Framework also consists of rich implementation of DSPL Schema. It includes theaddition of Concepts separately. A sample DSPL used in GViz Framework V2.0 is shownbelow.GViz Framework Page 46
  56. 56. <?xml version="1.0" encoding="UTF-8"?> <dspl> <info> <name> <value>InfoName</value> </name> <description> <value>InfoDescription</value> </description> <url> <value>InfoURL</value> </url> </info> <provider> <name> <value>ProviderName</value> </name> <url> <value>ProviderURL</value> </url> </provider> <topics> <topic id="TopicID"> <info> <name> <value>TopicName</value> </name> </info> </topic> </topics> <concepts> <concept id=District_ID> <info> <name> <value>District</value> </name> <description> <value>District</value> </description> </info> <table ref=column1/> </concept> </concepts> <slices> <slice id=map_slice> <dimension concept=District_ID/> <metric concept=UPFA_ID/> </slice> <slice id=table_slice> <dimension concept=District_ID/> <metric concept=UPFA_ID/> </slice> </slices> <tables> <table id=table_ID> <column id=column1 type=string/> <column id=column2 type=number/> <column id=column3 type=number/> <data> <file> dataFile </file> </data>GViz Framework </table> Page 47 </tables> </dspl>
  57. 57. Apart from the basic DSPL Schema the Framework also supports Extended Attributes whichcan move in page configuration of VizComps & Data Providers to DSPL.As an exampleadditional attributes can be added to define the required VizComp configuration to data slicenode. <slice id=map_slice component=gviz.vizcomp.gmap containerId=map_div options={"showTip":"false"}>Similarly GViz Data Provider information can be added to the data node of the DSPL asshown below. <data provider = gviz.dataprovider.csv options={"showTip":"false"}> 5 Results and analysis5.1 Importance of visualization dashboardsIn modern day business applications, it is very important to convey information to a viewer asquickly 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 thisare specific to the defined task from scratch. When we proceeded with the project, we cameto 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 thisapproach is to develop a platform independent easily accessible visualization solution.GViz Framework Page 48
  58. 58. Dashboards are very popular in enterprise level data visualization applications. Therefore wefocused on creating a reusable framework which would enable a user to easily customizedashboards according to their needs and preferences5.2 Evolution of GViz Framework5.2.1 First IterationDuring the first iteration of the project the technology selection was based on the followingarguments.  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 alternativesTechnology Alternatives Selection ReasonServer C++ Java Dependency of the project architectureprogramming C# on the Google Maps is high and Googlelanguage Java map‟s API is based on Java. Java is open source and well tested. Java has higher level design potentials than C++.Server database MSSQL MySQL MySQL is open source, easy to developsystem PostgreSQL with an UI in Windows platforms. It can MySQL be run using the WAMP server.Geo GoeServer GoogleMaps Google Maps is a flexible GIS systemInformation PostGIS with online map provider that has anSystem GoogleMaps extendable API with many facilities. The API is provided for development in JavaScript, Flash, etc.Web server IIS GlassFish GlassFish is open source and good in its Apache simplicity. It has inbuilt test clients to GlassFish test the web server.Client side HTML5 Flash Flash is one of the technologies whichvisualization JavaScript have the potential of building richtechnology Flash visualization components for web &GViz Framework Page 49

×