The Overall Purpose of This Paper Is to Present Some Examples of Using Scalable Vector

Introduction

In five years we will realize that most people cannot read anymore and will only believe in what they see. The globalization will ask for a language independent style of reporting and communication: we call it visualization.
With the introduction of the computer we started producing bulky, often user-unfriendly, reports. First character based, then introducing simple static graphics. With Scalable Vector Graphic we are now able to create powerful dynamic intelligent graphics. Internet introduced a new way of distributing and accessing reports and data in an ever-growing frequency. The speed and volume often make it difficult for decision-makers to interpret this tsunami of information.

The overall purpose of this paper is to present some examples of using Scalable Vector Graphics (SVG) in reporting and in visualizing information. The design and the implementation techniques will be illustrated by providing an overview of the web application SIAG (Sick leave InterActive Graphics), designed to evaluate reported figures of sick leave of a major company.

More specially the document aims to detail the user side of the application architecture and the users interface by showing and evaluating some report examples.

In brief some technical details are given on the use of JavaScript and especially regular expressions and information about the data sources used, the way of data access and storage and the parsing off parameters.

The examples are extracted from the results of case study and pilot in improving the effective evaluation of sick rate reports of an international operating transport company employing over 25,000 people. In the examples the names and references to this organization were changed.

Sick Rate Reports

Sick leave of employees is costly and difficult to predict. In an organization were you are working with strict schedules the information about the actual sick leave and the long-term trends is vital for the business process.

For this reason the responsible managers will get a monthly report, distributed as text document by email or intranet showing him the sick leave figures of his area of interest. The reported details are:

-  the department or cost unit

-  the number of employees

-  the number of new cases of illness

-  the monthly total number of days not worked because of sickness

-  the percentage of sick leave for the current month

-  the percentage of sick leave for the past year

-  the specific length of sick leave.

But still, recognizing trends, pinpointing the problem areas is difficult when a document with just straightforward figures is all you have.

Selection Count of Freq.pp s.leave specific sick leave %

Department Empl Incid's p.p./month. days length month year

Department 1 113 11 1,39 71,0 7,18 2,1 3,0

Department 2 365 37 1,88 298,8 7,11 2,8 3,9

Department 3 448 56 1,66 456,7 9,66 3,5 4,7

TOTAAL example 925 104 1,74 826,5 8,33 3,1 4,2

Example of a conventional report.

Improving the standard report

A first step in improving the reports is done by the suppressing the less relevant figures. A next step is the use of colors to attract attention or to show the result of an evaluation. Also data suppression like not printing the not significant zero values is a simple way creating open space, necessary for orientation and navigation through a solid block of figures. Information suppression could be done by hiding information with dynamic selecting and filtering techniques. Often the same results without hiding information is obtained by selective focusing and attracting attention to other cells by changing the background of information cells and giving them a meaningful color .

Img. 1. A JavaScript generated html table.

In the example we use the color green to indicate a positive signal and the color red for a negative signal. All this formatting is done using Dynamic Hypertext Mark-up Language (DHTML) to create a Web document and using Cascading Style Sheets (CSS) under control of JavaScript.

The HTML-part of the SIAG application will produce this report and will use colors to signal figures that are higher or lower as the average. Also the application will suppress zero-counts and will recognize report lines with no employees reported but still reporting sick-rates for the past year. The report line 5 in the example shows a closed reporting unit with no employees left and no number of incidences reported for that month. You should not attract the attention of the manager on this line by presenting “0”sick leave days and a sick leave of 0.0 % and an every month declining yearly average. So the easiest way to do so is print no zeroes and giving the cell no special signaling color as the default color for the report. In the example of the report however, in line 1 one cell with a zero value is colorized but the value is not printed. It is a significant zero: in a unit with just one employee attached to it, the actual sick leave rate was indeed 0.0 %.

Nothing very special so far, but all together it will help a user reading and interpreting the table. But even more important is that a new user will recognize the old report and that will help him interpreting the SVG-way of presentation and will improve the acceptance of this new way of reporting.

Visualization using Scalable Vector Graphics

The conventional report presented as a table is collection of flat arrays organized as columns and lines with every cell giving the information of just one attribute. With Scalable Vector Graphics (SVG) we can give every report a new dimension, we can even make it multidimensional.

The next example will briefly illustrate what is meant by a dynamic multidimensional presentation using just one screen print from a project dealing with hibernating bats.

Img 2. SVG application used showing climate changes in a bat reserve.

The screen print shows JavaScript controlled SVG-presentation of a part off the Atlantic Wall near Wassenaar in the Netherlands fitted up as reserve for hibernating bats. Five bunkers (red squares) are interconnected with a system of 900 meter of tunnels. To explain the behavior of the bats the University of Leiden closely monitors the climate conditions of the so called habitat. The example shows 30 location (A) where at 6 positions the temperature is monitored. The air temperature is translated in a color and used as fill color. The same is done with the infrared measurements of the temperature of the walls that are translated in stroke colors of the tunnels. By means of the buttons at (E) it is possible to show an other sampling moment. The sampling moment is displayed under (D) and the horizontal position of (D) is dependant on the month of the year. The spread in temperature and at the same time the temperature index is automatically displayed at the bottom (C).

And what looks like a simple arrow under (B) is a presentation of 3 dimensions or attribute values of the wind outside: the wind direction is translated in an orientation of the arrow, the wind speed is reflected in the size of the arrow and the color is determined by the air temperature. This to illustrate what is meant in this paper with multidimensional.

Translating and symbolizing sick rate report data

The sick rate data are translated into an adopted bubble chart. Every bubble will represent a complete report line on a selected report moment:

a.  number of employees = size of the bubble;

b.  number of incidences = area of the stroke width;

c.  the frequency of incidences = transparency of the bubble;

d.  actual/12 month sick rate = x,y position of the bubble;

Img 3. The embedded SVG-source will translate the attribute values into a special bubble chart using size, color, stroke-width and transparency.

By sizing the bubbles we give some weight to a reported value. It might be clear that a reported sick rate of a reporting unit of just 5 employees is quite different as a same sick rate reported for a reporting unit of 100 employees. And also the empty or closed reporting lines will not show at all.

The stroke size will immediately show where you will find the most new incidences. By making the area of the stroke direct proportional and not the stroke width we will automatically take the unit seize into account.

With the use of transparency it will be easier to indicate cases of long-term illness. Cases of long-term illness can have a very negative influence on the overall sick rate but will lower the frequency of new reported cases. In the graph these cases will be most likely recognized as transparent bubbles at the right or upper side of the graph.

The graphic interface.

In the SVG-part of the report we use a modified bubble-chart to present the details of one department with reporting groups or cost units. Every bubble (circle) represents one reporting group or cost unit. The size of the bubble will indicate the number of employees in a reporting group.

There are three SVG templates defined for reporting. The templates differ in the way the bubbles are positioned and what attributes are used to calculate the x / y values:

a. sick leave rate 12 month average / actual sick leave rate;

b. incidence frequency / sick leave rate 12 moth average;

c. sick leave rate 12 month average / specific length of sick leave.

Img 4. Example of the graphic interface. Template-A

The scale of the graph can only be set to predefined values while the origin of the graph will not change position. So it is impossible that we loose our graph out of sight.

Selection options are available to select a report or step by a complete year or a step to another report month. By this way it is easy to compare all kind of situations or to recognize trends.

A special bubble is created for the grand total of the reported population. Two reference lines trough the center and parallel to the axis make it easy to recognize the position of each reported bubble in relation to the average represented by the center bubble.

The use of color .

Colors are used as warning signal (template-A) or to recognize the position of a reporting group in relation to predefined targets (templates-B en -C).

Template-A will plot the position using the actual sick leave rate and the 12 months average. Here a diagonal line will show were these values are equal. When the actual rate exceeds the 12 months average a signal is given by changing the color of the bubble from green into red.

Using template-B or template-C the program will use predefined targets for the value of the x-axis and the value of the y-axis. The targets are drawn as two straight lines at right angles to the axis dividing the graphical area into four quadrants. According to the quadrant of the plot the bubble is colorized. At a first glance one can recognize the position of a bubble in relation to the defined targets or in relation tot the grand average of the total population that was reported.

Report Examples

In the example below two different screen shots of two successive reporting months will show the reaction on the publication of reorganization plans. At the left a report before, and at the right the report of the month that the results of a reorganization were published.

Img 5. Recognizing the impact of a reorganisation on sick leave rates.

The overall picture is “negative” and automatically visualized with a red color. With a mouse click we lock on A to follow its behavior. Though the 12 month sick leave rate(horizontal position) is below the average of the whole population (left of the vertical red line), the actual sick leave rate (vertical position) has increase from 2.5 to 9 % and is significant higher than the average. Not only plot A and B but also the central plot C representing the total population show up with an increase of new incidences as displayed in the stroke-width of the bubble.

The attached report table would look like this. By key-press color on/off function is toggled.

Img 6. JavaScript generated table.

Another example using template-B will come up with preset targets in green for the incidence frequency and the 12 months sick leave rate. The red lines indicate the position of the total population and looking at the dark red color we immediately see that both targets were not hit.

Img 7. Template-B .

Overview of the application architecture

SIAG is designed to work in an intranet environment or as a stand alone application, on a SVG capable browser. The user has possibilities to make or convert his datasets in a simple text-editor without the need of special tools. Also the user can save his preferred startup and data settings by using a simple text-editor.

Img 8. SIAG: an HTML-source under control of JavaScript with an embedded SVG object.

Using standard HTML, JavaScript and SVG, we have the advantage that we don't need to install or compile program sources and we don't need java or special active-X components. The application is driven by just one HTML page with just one embedded SVG-source. The user settings and all the datasets are stored as external JavaScript source (.js).

Defined mouse events

With a click event on a bubble or on a report line a JavaScript routine will toggle a mark on the line and corresponding bubble. By marking a bubble we can follow its behavior when the report date or the template is changed. An algorithm will recognize the bubble by its position on the list and its name and will accept some variations in the spelling of that name. This makes it possible to use a follow mechanism when no unique key is available.