The comparative analysis of selected interactive data presentation techniques on the example of the land use structure in the commune of Tomice

Abstract The authors present the results of a comparative analysis of selected techniques and programming tools for building interactive data presentation in the form of diagrams and maps generated in the browser. The results of an inventory of land use structure, which are a part of a geographic information system database of the commune of Tomice in district of Wadowice, were employed as input data. The research has shown that the tested tools have a similar design capacity; which makes it difficult to determine which of them is the best. Different factors contribute to choosing a particular tool. They include technical specification, project budget, license conditions, technical support and visualization possibilities.


Introduction
In the communication process strong expo sition of visual elements plays a particular role: pictures, animations and videos (M.Woźnia kowski 2014).Modern civilization is based on visualization, use of image and illustrative exemplification (H.Mamzer 2004).Visual sen sations become increasingly important due to the information overload.It results among others from the tendency to seek new visual experiences by users as well as from practical matters such as the attractiveness and clarity of communication which may facilitate quick acqui sition of the most vital information (M.Leszko wicz 2011).Communication based on image appeals to the imagination and is universal -"the visual culture has a chance to easily reach the recipient as it does not require a common and understandable language code, it goes beyond borders and nationalities (A.Siennicka 2015, p. 74).
In recent years, the dynamic development of Internet technologies can be observed.It is ac companied by increasing availability and di versity of techniques and design tools (K.Król 2016).Attractiveness of interactive visualiza tion of data on the Internet originates mostly from the functionality of the medium itself, the speed of access to information using it as well as the diversity of forms of its communication (D.Gotlib 2008, P. Kowalski 2012).Graphically attractive data presentations call attention significantly more than presentations which are only useful (M.Wieczerzycki 2014).While, interactivity assumes the possibility that the presentation will impact the recipient and si multaneously the recipient will impact the scope and form of the information being presented (A.Macioch, G. Malmon 2010).
The objective of the authors is a comparative analysis of selected interactive presentation techniques in the form of diagrams and maps presented in the browser window on the example of land use structure in the commune of Tomice (southern Poland).

Data visualization in the web browser window
With development and availability of techni ques and computer tools allowing collection and processing of data, evolution of digital vi sualization methods has taken place which allows content to be generated dynamically and interactively, multidimensionally and attrac tively for the recipient (M.Kukułka, D. Gotlib 2014;R. Rossi, N. Ahmed 2015).This evolu tion also takes place at the level of the manner of visualization, often threedimensional, more frequently adjusted to presentation using mobile devices.
The modern data visualization form re sponds to challenges brought on by an infor mation society with its increasing demands towards it.Creating visually attractive data presenta tions in the web browser window is not only reserved for specialized users.Software devel opers put increasing emphasis on its versatility, universality and availability -sets of generally available design tools and techniques are cre ated which allow among others data modeling and visualization, frequently in an automated manner.
This trend can be also observed concerning data presentations having a spatial reference.Numerous tools allowing interactive data pre sentation were prepared in such a way that their use requires only completion of source data and configuration of selected communi cation parameters.While, others are made available in the form of creators or generators, which in an automated way create data visuali zation.Others allow advanced and complex web applications to be created (K.Król 2015).

Materials and methods
Selected techniques and programming tools allowing generation of interactive data visuali zations in the form of maps, diagrams and graphs in the browser window were subject to a comparative analysis of functionality and usability (tab.1).
The analysis was performed based on the results of adhoc exploratory testing (W.Afzal et al. 2009, M. N. Chhabra 2012) which were conducted during creation, implementation and use of data visualization (web applications, web components) created in accordance with the approved design assumptions.
In the scenario of the tests observation and registration of remarks made during the design works using selected tools were provided for.

Main assumptions and design procedures
The main design assumption was to create a model visualization of statistical data in the form of diagrams which would constitute an indepen dent selfcontained component of a website.The design provided for creation of a com ponent in the form of a compact set of files or a single code (a string of signs saved in a hy pertext document), which may be moved between any websites and implemented in their structure which indicates their universality.Moreover, within the design assumptions it was approved that the graphic form and the principle of operation of the diagrams will be optional (depending on the technology of their generation), however they should be charac terized by interactivity (e.g. in the form of the possibility to modify the scope of the presented data or the form of their presentation by the user directly in the browser window).In the design works also an attempt to illustrate data on maps and compare diagrams or graphs in a mana gement dashboard was provided for, i.e. inter active presentation of several diagrams or graphs simultaneously with the possibility to e.g.sort data.
Input data saved in the database of the spa tial information system, presenting the land use structure in particular territories of villages in the commune of Tomice, was transposed manually into a data array in accordance with the requirements of each of the design tech niques being tested.Arrays prepared in such a way, constituting the integral part of the hy pertext document, were used as a basis for visualization.Their development in the browser window was programmed using selected tech niques which were chosen in such a way that the basis of each of them was another techno logy which created a certain review of design alternatives.However, all tested tools are based on JavaScript, a popular scripting pro gramming language.N. Bryant and J. Wildfire acted analogically in their studies (2016) within which they tested design possibilities of the "Webcharts" tool based on the D3 JavaScript library (DataDriven Documents).
Data visualizations prepared based on JavaScript libraries were also described by M. Bostock and coauthors (2011) and L.R. Nair and coauthors (2016).They compared pos sibilities of data visualizations using the D3 JavaScript library and the Tableau application (Tableau Software), and they performed a re view of techniques and design tools based on JavaScript and allowing data visualization in the browser window.O. ElTayeby and coauthors (2013) indicated differences between D3 libra ries and Highcharts.While L. Zhang and co authors (2012) compared functionality and usability of selected applications allowing visual analytics of data shared commercially and within the Open Source license.

Characteristics of selected design techniques
AmCharts is a JavaScript library allowing generation of diagrams, graphs and maps in the browser window (using shared maps of the globe, countries or the user's own materials im ported from the SVG file) (I.Logre et al. 2014).The library was chosen due to the precisely developed graphic form of data presentation, interactivity, and the possibility to publish data in a spatial reference and extended API (Application Programming Interface).
Flot (JavaScript plotting library for jQuery) is a JavaScript library using jQuery and allowing generation of interactive visualizations in the browser window (M.Blackstock, R. Lea 2012).Flot allows among others programming of chan ges of the degree of zooming the data view as well as capturing and dragging the graph area using the mouse cursor.
One of the intensely developing and simulta neously generally available tools which allows Interactive data presentation technologies in the form of diagrams or Google Charts were selected due to their general availability, graphic attractiveness, diversity of data visualization forms as well as universality and extended API programming interface (tab.2).
Various data visualizations can be also ge nerated using Cascading Style Sheets (CSS).Namely, they describe the form of presenting objects displayed in the browser window, however they can be also used as an indepen dent and unique design technique.
Input data for visualization included results of surveys regarding the land use structure, constituting a part of the Geographic Informa tion System (GIS) prepared for the commune of Tomice.

Geographic Information System of the commune of Tomice
The commune of Tomice is situated in the county of Wadowice (Małopolskie Voivodship) and it consists of six villages: Lgota, Radocza, Tomice, Witanowice, Woźniki and Zygodowi ce.Tomice has an area of 41.5 km 2 , it borders with town Wadowice and the following four communes: Brzeźnica, Spytkowice, Wieprz and Zator (G.Łopatecki 2011).
Vector maps of Tomice were prepared ba sed on the principal map obtained at the County Documentation Centre of Geodesy and Carto graphy in Wadowice as well as documentation provided by the Municipal Office of Tomice.Initial data was obtained during field surveys and site visits.
The GIS system for Tomice was created using the QGIS program which is available free of charge (Open Source) and developed by a community of users from all over the world.QGIS allows collecting, processing, analyzing and publishing spatial information in various formats (K.Król, T. Salata 2013).In databases of the Geographic Information System of the commune of Tomice, which con stituted a plugin of vector maps (layers), among others register of monuments, street addresses, road network with the assessment of its condition, inventory of residential buildings with respect to the landform features, inventory of exits from public roads, records of the ele ments of technical utilities network, urban in ventory of buildings, results of studies and analyses in the field of planning and spatial management, including the analysis of the ownership structure, the area structure of indi vidual farms, settlement network as well as the land use structure and the water surface ero sion study were included.
From the created database, the land use study was selected for an interactive presenta tion in the online browser window in the form of structural diagrams (apart from spatial presen tation of the phenomenon).
The quality attribute, which in this case is information about the manner of land use, assigned to reference units, was presented using the chorochromatic method.The refe rence unit were areas of soil categories within particular lands constituting a part of parcels in the former land register system (among others Austrian-Hungarian) corresponding to the con cept of a parcel.In order to distinguish them, commonly used colors were applied.Land use forms determine land in terms of functionality from the point of view of the use of its individual fragments (B.Prus 2014).
Land classification involved assigning catego ries to objects based on the criteria concerning land use.It was performed in accordance with the conditions of correctness of the logical di vision in a multiplelevel manner, based on the system of land use feature modification.The correct classification fulfilled three conditions: it is clear (the division was conducted accord ing to one principle), it is separable (the sig nificance scope of isolated objects is mutually exclusive) and it is also complete, i.e. the total area of the isolated elements is identical to the surface area of the land for which the classifi cation was conducted (W.Żyszkowska et al. 2012).

Results and conclusions
Presenting study results using cartographic communication, it is possible to base on nu The land use structure in the commune of Tomice was presented using the percentage share of the surface area of particular groups of land within the total area of the settlements, separated in accordance with the Regulation of the Minister of Regional Development and Construction dated 29 March 2011 on the regis ter of land and buildings (Rozporządzenie 2001).In the Regulation six groups of land were distinguished: farm land, woodland, de veloped and urbanized land, ecological areas, land under water and other land (tab.3).
The land use structure of the commune of Tomice indicates the agricultural nature of the commune.The share of farm land in the total area of each settlement exceeds 60%, and on the scale of the commune it is a little more than 71% (tab.4).
Woodlands occupy more than 10% of the area in each village, and on the scale of the commune it is nearly 16% of the surface area.
Developed and urbanized land, excluding communication areas, occupy several percent of the surface area in each settlement.The largest percentage is observed in the case of the village Tomice.Also here suburbanization changes, manifested in the occurrence of com pact residential estates with an urban nature, are most visible.This process may be caused by directly neighboring with the town Wado wice.Communication areas occupy from 2.5% to 4.5% in each unit.
In the commune of Tomice land under water constitute a large percentage of its area (fig.1).It is particularly visible in the village Tomice where this form of land use accounts for more than 15% which is associated with the presence of fish ponds in the area (G.Łopatecki 2011).

JavaScript Charts & Maps -"amCharts"
The API programming interface of the am Charts library allows programming of advanced chart functionalities which may have a form of extended, multidimensional data visualizations.For users without programming knowledge, creators of the library made available an editor which allows creating presentations in the browser window by configuration of selected diagram parameters or graph parameters using dropdown lists and checkboxes.Apart from pie diagrams (fig.2), column graphs and line graphs (developed using the AmCharts.make-Chartfunction) and their many variations, the library allows data presentation in the spatial Here, it should be noted that the printed figure does not fully reflect the nature of interactive source: own study using the amCharts library diagrams.Visualizations generated using the amCharts library can be modified directly in the browser window, selected elements can be captured and dragged or expand which not only increases their attractiveness for the user, but also their clarity.
The fundamental data source for graphs generated using amCharts is a data array con stituting a part of the JavaScript code (tab.5), placed directly in the hypertext file.Advanced users can use other data sources, e.g.MySQL base.However, it is associated with creation of a PHP script which will 'download' data from the base (Connect to MySQL) and transform it into the JSON format (prints out the data).

Flot Charts
Use of the Flot library is possibly only after prior implementation of jQuery JavaScript (Flot constitutes a plugin of the jQuery library).JQuery is one of the most popular JavaScript libraries used to create web applications.JQuery advantages include simple implemen tation in the hypertext document structure, ease of transformation and modification as well as functionality (R. Bennett et al. 2014;K. Król, L. Szomorova 2015).Flot diagrams or graphs (fig.3) are generated in the SVG (Scalable Vector Graphics) format, and in older browsers in the VML (Vector Markup Lan guage) format.In the basic version of a dia gram or chart, source data is downloaded from the array (tab.6) which constitutes a part of the JavaScript code.Using the Flot library it is possible to create among others column Table 5. AmChart data array (JavaScript code) var chart = AmCharts.makeChart("chartdiv", { "type": "pie", "theme": "light", "dataProvider": [ { "typ": "Tereny zabudowane", "litres": 31.26}, { "typ": "Grunty rolne", "litres": 426.33 }, { "typ": "Grunty leśne", "litres": 95.1 }, { "typ": "Grunty pod wodami", "litres": 25.46 }, { "typ": "Tereny komunikacyjne", "litres": 21.12 }, { "typ": "Nieużytki", "litres": 0.72 } ], Source: own study using the amCharts library Figure 3. Interactive presentation of data using the Flot library, ("screenshot"); source: own study using the Flot library graphs and pie diagrams (also in 3D) or line graphs as well as advanced data dashboards integrating numerous types of diagrams and graphs.It is also possible to use the library to create an interactive map, however only after previously preparing input data necessary to generate it in SVG format.

Google Visualization API
Using Visualization API, it is possible to create pie, column and line graphs as well as maps.Diagrams and graphs are generated in the browser window within the hypertext docu ments using Adobe Flash technology as well as SVG or VML formats.
The fundamental data source presented in the form of Google Charts is a twodimensional table (array) (tab.7).Thanks to SQL inquiries regarding the "Datasource" service (Chart Tools Datasource protocol) it is possible to obtain data also from sources, such as Google Spreadsheets or Google Fusion Tables.More over, Visualization API allows programming of additional functionalities in the form of tools controlling the scope of data presented using diagrams and graphs -toolbars and drop down lists, as well as data animations.
Using Visualization API, three functional ities, allowing data presentation management (controls), were implemented and presented in the form of a dashboard also called a control panel.Dashboards most of all allow organiza tion of the numerous diagram or graph pre sentations, frequently of various types, which have the same source of data.Functionalities are produced in the browser window using a JavaScript category -google.visualization.
ControlWrapper.The JavaScript code is im plemented in the HTML (HyperText Markup Language) document structure.
In the created application to be used by the user, a toolbar, a dropdown list and a data table (fig.4) were provided.They allow sorting, hiding and exposing data presented in the browser window.Therefore, visualization is fully interactive, and the scope of presented data changes upon the user's request.Data consti tuting the basis of a presentation was collected in the array (JavaScript object: DataTable) which was implemented directly in the HTML code (tab.8).
From among numerous types of diagrams and graphs which can be programmed using Visualization API, the percentage share of farm land in particular villages of the commune of Tomice was presented in the form of a structural pie diagram.
Visualization API refers to libraries uploaded on external servers.It is possible to download them, to merge project component files and to activate it from any data carrier, e.g.CDROM, i.e. without Internet access, however, it is non compliant with Google license provisions.Source: own study using the Google Visualization API Diagram presentation in the browser window <div id="piechart" style="width: 900px; height: 500px;"></div> Source: own study using the Google Visualization API

CSS Charts
In the structure of the CSS code implemented in the HTML document, which produces a dia gram or a graph in the browser window, there is no actual reference to numerical data (tab.9).Cascading Style Sheets impact only the for mat of object presentation causing a kind of "impression" or mapping of the diagram view by a "mirage" of generated objects which have a defined size and color, and they overlap one another.In reality, diagram columns are ob jects with defined attributes and they can be encrypted as e.g. a table (<tables>), a point list (<li>) or a definition list (<dl>).Therefore, they are not generated based on data arrays or data collected in external files.A plug-in of diagrams or graphs with advanced functionalities cre ated in such a way, animations and spatial data reference is possible, however only after application of external libraries and script lan guages.

Summary
It is hard to clearly indicate which of the tested tools is the best.Normally, choosing one of them depends on design assumptions and the budget to implement a given design.In profes sional commercial designs it is recommended to use an amCharts or Google Charts library which has relatively clear license conditions, guarantee technical support and make exten sive documentation available.However, they can also be used in amateur designs in accor dance with license provisions.
The technique to generate diagrams in the browser window using only CSS can be treated more as a curiosity then design routine, even though it does not apply scripts which de creases the amount of data downloaded from the server and presented in the browser win dow, therefore it can be successfully used in efficiency-oriented designs or mobile applica  tions.Furthermore, its use is completely free from any licensing limitations of use.
The manner in which a given tool visualizes data may impact the choice of a given tool.Inter active data visualization on maps of the globe, countries or regions in the amCharts or Visual ization API edition can significantly increase the attractiveness of presenting e.g.contact data or spatial phenomena.Even though de sign possibilities of the tested tools are similar, only Visualization API and amCharts allow an interactive map to be generated in the browser window without any additional components and programming procedures.
Advanced use of each of the described tools requires specialized programming knowledge, practice and fluent knowledge of API, however their use in the basic scope is relatively easy and limited to implementation of the chart code in the hypertext document structure.Data which will be presented also requires completion.
The design techniques and tools being de scribed allow creation of graphically diverse, interactive graphs, diagrams and other data presentations which may constitute a com ponent of an Internet service.Due to their significant usability, attractive graphic form and relatively easy API, these tools gain in creasing popularity and they can be success fully used to present various data also in the spatial reference.

Fig 1 .
Fig 1. Spatial diversity of land use in the Tomice commune; source: own study using the QGIS

Figure 4 .
Figure 4. Interactive presentation of data using the Google Chart API in the browser ("screenshot"); source: own study using the Visualization API

Table 1 .
Programming techniques and design tools subjected to comparative analysis * data array written directly in the hypertext document; source: own study presentation of data in an attractive way in the form of interactive diagrams and graphs is Google Visualization API (Y.Zhu 2012).Visualization API is a set of JavaScript language categories, developing of which can be imple mented in the structure of hypertext docu ments.Google Charts constitute a tool to present data, while Visualization API is a tech nique to share it in the online browser window.

Table 2 .
Selected types of diagrams and graphs generated in the browser using Google Visualization API

Type of map, diagram or graph Techniques and design tools Basic data source
* data array written directly in the hypertext document; source: own study based on Google Developers

Table 3 .
Percentage of groups and types of land use in the total area of each village in the commune of Tomice

Table 4 .
The structure of land use in the commune of Tomice (percentages) Source: own study reference.Users can use interactive maps of the globe and maps of selected countries.Data presentation on a map other than maps made available by the library creators is possible, however it requires the preparation of a base map.

Table 6 .
Exemplary of Flot chart data array (JavaScript code)

Table 7 .
The snippet of HTML and JavaScript presenting the pie diagram (Google Charts) in a browser window

Table 9 .
Comparative analysis of the selected design tools