Globe Dashboard Experiment

While browsing through the Web, I've recently found interesting collection of experimental web apps from Google, built using HTML5, WebGl, and other technologies.  I was amazed by the WebGl Globe application - an open platform for geographic data visualization.

Nearly at the same time, Sitecore announced Digital Marketing System 2.0 with optimized analytics API, new dashboards and reports.

Today we'll create a delicious cocktail from newest technologies and tools. Let's take some WebGl and mix it with jQuery, put it into Sitecore DMS and add some DatePickers from jQuery UI. Add a few pieces of WCF Service and transfer into the Shared Source.


In the initial version the project contains one visualization - Visit value by traffic type. It is hosted on the Shared Source portal, and you can create additional dashboards, or extend the existing one.
So, here's it, Globe Dashboard:

The project consists of html file, some Java Script / CSS / Images and the WCF service. No back-end and postbacks, just jQuery $.ajax().

jQuery UI is used for DatePickers:

Traffic Types list is populated using Analytics API, colors can be defined in Java Script:

Globe Dashboard consumes data from the WCF service with two operations:

• string[] GetTrafficTypes()
• double[] GetVisits(string from, string to)

The first one displays traffic types and corresponding colors in sidebar.
The second returns visits information in a following format: [latitude, longitude, value, color, ....].

First of all, we need to load traffic types:

// Load traffic types data
trafficServiceUrl = "/GlobeService.svc/GetTrafficTypes"
$.ajax({
    url: trafficServiceUrl,
    type: 'get',
    cache: false,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (callback) {
        var data = callback.d;
        $.each(data, function (index, trafficType) {
            if (index % 2 == 0) {
                $('#trafficTypes').append('
' + trafficType + ' ' + '
');
            }
            else {
                $('#trafficTypes').append('
 
');
            }
        });
    },
    error: function (xhr, textStatus, errorThrown) {
        alert(xhr.statusText);
    }
});

After getting the data, the script builds HTML list.

The most important part is querying the GetVisits service method and binding data to the globe:

// Load globe data
$("#LoadData").click(function () {
    if ($("#from").datepicker("getDate") == null || $("#to").datepicker("getDate") == null) {
        alert('Start or end date is not selected.');
        return;
    }
            
    $("#container").html("");
    visitsServiceUrl = "/GlobeService.svc/GetVisits"
    $.ajax({
        url: visitsServiceUrl,
        type: 'post',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        data: '{"from": "' + $("#from").datepicker("getDate").getTime() + '", "to": "' + $("#to").datepicker("getDate").getTime() + '"}',
        dataType: 'json',
        success: function (callback) {
            var globe = DAT.Globe(document.getElementById('container'), function (label) {
                return new THREE.Color(colors[label]);
            });

            globe.addData(callback.d, { format: 'legend' });
            globe.createPoints();
            globe.animate();
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.statusText);
        }
    });
});

First of all, we check that the start and end dates are selected. Then create a POST request to the service. And finally, initialize colors and bind the data array to the globe.

In order to setup the Globe Dashboard at your website, you need to perform the following steps:

1. Install the module package. It can be downloaded here.
2. Add the following section to the web.config:

When the installation is finished, go to the following page at your website: "/globe/index.html".
The module was tested with Sitecore CMS 6.5 and DMS 2.0 Technical Preview, previous versions are not supported. Also, you can find static online example here: http://dl.dropbox.com/u/6077533/globe/index.html