Visualization technologies and methodologies

Introduction

Statistical data can be visualized in several ways, in the case of a web application like the Web Index, these data is usually visualized using charts created in the client by using Javascript. Two technologies are being considered, D3.js and Highcharts JS. This report exposes some for and againsts about the usage of those libraries. In some cases is not possible to use any of them, therefore this situations must also be considered in this report.

Accesibility

When Javascript is available

It will be assumed that if Javascript is available, the user will not be using a screen reader and he is able to watch the data printed in the screen, therefore the only consideration that must be met is the colour contrast between the foreground and the background. Charts must be easily distinguishable for people with visual disabilities like colour blindness.

When Javascript is not available

Some web browsers do not allow the use of javascript (this is the case of Lynx, a well-known web browser suitable for people with disabilities) some other browsers allow the use of javascript but is the user who disables it. In these cases, it is impossible to use the client to visualize data as a chart.

The <noscript> tag is rendered in the browser when javascript is not available, therefore the data that cannot be painted as a chart, has to be represented somehow inside a <noscript> node. Tables are considered the best option to put into a <noscript> node in this approach because they are useful for visualizing data, as well as a standard for this propouse.

There are some special considerations when using tables that must be considered to allow for fully accesibility. First of all, the scope attribute must be used to associate header cells and data cells in data tables [4]. In addition, when data cells are associated with more than one row and/or header, id and headers attributes have to be used to associate data cells with header cells in data tables [5]. Furthermore, a summary of the table should be provided as well as a caption to introduce the data that is being visualized [6]. The following is a sample of how a table should be labeled:

<table summary="This table charts the Spanish and French values of the ITUE indicator for 2011 and 2012">
    <caption>ITUE for Spain and France in 2010 and 2011</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col" id="c2">Spain</th>
            <th scope="col" id="c3">France</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" id="r2">2010</th>
            <td headers="c2 r2">68.6</td>
            <td headers="c3 r2">82.8</td>
        </tr>
        <tr>
            <th scope="row" id="r3">2011</th>
            <td headers="c2 r3">72.1</td>
            <td headers="c3 r3">78.9</td>
        </tr>
    </tbody>
</table>

Visualization technologies

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation [1].

D3 is more a drawing library rather than a chart library and therefore every visualization can be done unsing it. This is great because is more flexible but this genericity also brings more complexity on the code.

D3 uses SVG, this technology is not compatible with IE 8 and older versions of Internet Explorer or Android 2.X.

Some examples of D3 can be found on the D3 samples gallery

NVD3.js

NVD3.js [7] is a library implemented over D3.js which aims to bulid re-usable charts and chart components. This library can be used in the Web Index project in order to reduce the complexity of the code if D3 is used.

Highcharts JS

Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types [2].

Highcharts is much more specific than D3, this simplifies the code immensely and also general drawing features have been added [3] in order to make this library more flexible.

As D3, Highcharts uses SVG, but fallsback on VML or Canvas to support IE6-IE8 and Android 2.X.

Some examples of Highcharts can be found on the Highcharts samples gallery and some other examples have been developed for the web index webpage, these can be found on http://weso.github.io/WI-HTML-prototype/highcharts-samples.html.

Conclusions

Both libraries can be used. On the one side, Highcharts allows the rendering of charts in a much simpler and cleaner way than D3 (without NVD3) and it also has a fallback when SVG is not available. On the other side NVD3 reduces the complexity of the D3 code and enables the usage of D3 for not predefined visualizations.

A sample of all the required charts for the web index project is found here. All the exposed examples are default visualizations of those charts. In order to make use of those chart for The Web Index project, the implementation of a library called wesCountry is proposed. This library must allow the creation of customized charts regardless the technology that underlies.