Short Overview of the Compared Languages

First, we briefly introduce each language. All visualisation languages will then be compared in detail in Sect. 4.2.2.

ViZml and GPL

Wilkinson [Wil05]11 describes a »grammar of graphics« by means of an algebra. Based on this graphic algebra, two languages are used by Wilkinson to allow for the description and automated production of graphics. Both were intended to be non-proprietary languages and introduced as open standards, however to the best of our knowledge, they are only used in SPSS. The first is the Graphics Production Language (GPL), which is an operational grammar-based language. The second is the Visualisation Markup Language (ViZml), a declarative markup language based on XML and defined by an XML schema. Both languages complement each other, having different benefits. While GPL can be used to specify graphics very concisely, ViZml is more extensible and can be easily checked by tools, based on its XML schema definition. GPL can also be generated from ViZml. ViZml is split into three parts that may be varied independently – the data, structure and style part. For styling, ViZml reuses CSS and SVG terms as much as

possible, but it cannot directly be linked to CSS style sheets.

An example for a ViZml mapping is given in Listing 4.1, which shows a structure definition for a two-dimensional line chart, including axis labelling and colour settings. Also the concise definition of mappings to ranges of visual attributes is possible in ViZml, for example a data variable may be mapped to a range of visual (colour) values as shown in Listing 4.2.

<color variable=’range’ low=’navy’ high=’red’>

Listing 4.2: ViZml – Example of mapping the data variable range to a colour range.

An example for a GPL program is given by Listing 4.3. GPL programs consist of statements, which are basically made up from a label defining the type of statement, and a set of functions. Graphic algebra expressions (using the cross, nest and blend operators) are also considered to be functions. The corresponding graphic is shown in Fig. 4.8.

4.2. VISUALISATION LANGUAGES

1 <!-- Structure -->

<graph id="graph" cellStyle="graphStyle"> <!-- Size -->

<location method="fixed" part="right" value="100%"/>

<location method="attach" part="right" target="container_39754"/>

6 <coordinates> <dimension>

<axis>

<label purpose="auto" style="labelStyle">

<descriptionGroup target="sourceVariable_39994">

11 <description name="label"/> </descriptionGroup>

</label>

<majorTicks markStyle="majorTicksStyle3" style="majorTicksStyle"/> </axis>

16 </dimension> <dimension>

<axis>

<label purpose="auto" style="labelStyle2"> <text>Mean (</text> 21 <descriptionGroup target="y"> <description name="label"/> </descriptionGroup> <text>)</text> </label>

26 <majorTicks markStyle="majorTicksStyle4" style="majorTicksStyle2"/>

</axis> </dimension> </coordinates>

<line positionModifier="stack" style="lineStyle">

31 <binStatistic dimensions="1" gridType="square"/>

<summaryStatistic convertIntervalToSingleValue="true" method="mean"/>

<color id="color_39751" affect="main" cycle="cycle" missing="silver" scale="bipolarWhite" variable="y"> <summaryStatistic method="mean"/> </color> 36 <x variable="sourceVariable_39994"/> <y variable="y"/> </line> </graph>

<container id="container_39754" clip="false">

Listing 4.1: ViZml (Visualisation Markup Language) – Example of a line chart (excerpt).

GGRAPH

/GRAPHDATASET NAME="graphdataset" VARIABLES=schtyp MEAN(write)[name="MEAN_write"] female /GRAPHSPEC SOURCE=INLINE.

4 BEGIN GPL

SOURCE: s=userSource(id("graphdataset"))

DATA: schtyp=col(source(s), name("schtyp"), unit.category()) DATA: MEAN_write=col(source(s), name("MEAN_write"))

DATA: female=col(source(s), name("female"), unit.category())

9 COORD: rect(dim(1,2), cluster(3,0))

GUIDE: axis(dim(3), label("type of school")) GUIDE: axis(dim(2), label("Mean write"), delta(5))

GUIDE: legend(aesthetic(aesthetic.color.interior), label("female")) SCALE: linear(dim(2), min(40), max(60))

14 ELEMENT: interval(position(female*MEAN_write*schtyp), color.interior(female), shape.interior( shape.square))

END GPL.

Listing 4.3: GPL (Graphics Production Language) – Example of a grouped bar graph, taken from http://www.ats.ucla.edu/stat/spss/library/ggraph_examples.htm, accessed: 02.07.2015.

CHAPTER 4. ANALYSIS OF THE STATE OF THE ART

Figure 4.8: GPL – Example of a grouped bar graph (as described by Listing 4.3). In a grouped bar graph, bars are clustered in groups that emerge from examining an additional (nominal) attribute, in this example the sex of the participants.

4.2. VISUALISATION LANGUAGES

VizQL

VizQL is a declarative language that extends the abilities of SQL by formatting and visualisation capabilities. This is inspired by the fact that SQL already offers some abilities to structure, sort and group data. The VizQL definitions are used by a query analyser to generate both visualisation settings and SQL, respectively MDX12 for querying relational databases and OLAP servers [HSM07].

Mackinlay states in [MHS07] that VizQL is based on an improved algebra from the A Presentation Tool (APT) [Mac86a] and »the ability to compile into database queries«. He also compares Wilkinson’s algebraic approach to VizQL and describes the main distinguishing feature as that it »clearly describes the row and column structure of small multiple views of data«. Both statements show that VizQL is, even more than GPL, targeted at the visualisation of tabular data. VizQL was first developed for the Polaris prototype and is now the basis of the commercial Tableau visualisation software (cf. Sect. 4.1.1 and Fig. 4.9).

Figure 4.9: Tableau – User interface for VizQL. Although VizQL is readable, it is not intended to be written manually, but through a GUI.

Protovis

Protovis is a declarative visualisation language by Michael Bostock and Jeffrey Heer that has implementations as an embedded DSL in JavaScript [BH09] and Java [HB10]. It was designed to benefit from the advantages of declarative languages while still keeping an »intermediate level

CHAPTER 4. ANALYSIS OF THE STATE OF THE ART

of abstraction« to allow for flexible customisation of visualisations. This compromise between a declarativity and flexibility is achieved by using functions as mapping definitions, passed to other functions as (higher level) arguments. Also compare for Listing 4.4. The general declarative approach of the language allows for easily generating visualisations for other platforms. In the Java version, even the event model is »decoupled from the runtime platform« [HB10], in order to support cross-platform development.

When comparing visualisation languages in the next section, we refer to the JavaScript version of Protovis if not stated otherwise.

new pv.Panel() .width(150) .height(150) .add(pv.Bar) 5 .data([1, 1.2, 1.7, 1.5, .7]) .bottom(2) .width(20) .height(function(d) d * 80) .left(function() this.index * 25 + 2)

10 .strokeStyle(function(d) (d > 1) ? "red" : "black") .root.render();

Listing 4.4: Protovis – Example of a bar chart. In Protovis, visualisation settings are specified by chaining function calls one after another, each call working on the return value of the previous call (method chaining). By this means, first, a panel is described and then a bar is added to this panel. The bar in turns is passed an array of source data values, static presentation values for defining bottom position and width, but also dynamic values as functions calculating height, left position and stroke style (colour) from the given data. Finally, the render action is triggered just like the declarative settings

have been done before.