Andreas Valley - Presentation at the 2014 InstantAtlas London Workshop

Hic sunt dracones - Here be dragons

How InstantAtlas customization can help to guide usersthrough the data jungle

| 03/28/2014 | Andreas Valley2

Greetings from germany


Short introduction

❙ Federal Statistics Office

❙ about 300 different official statistics

❙ up to 4 million data sets and more than 500 attributes

❙ various aministrative and non-administrative structures

❙ raising of data as well as publication

❙ focus has shifted to online publication


Horses for courses


A dime a dozen?

❙ fast and easy results are possible

❙ users usually don‘t have our knowledge about the data

❙ just mapping the data often is not enough

❙ take a look at your work from the viewpoint of an average user

❙ help them understand


First steps


User feedback

The atlas itself was appreciated, but several problems were raised:

❙ only a number without further explanation in the tooltip

❙ time series are inconsistent (varying class limits and axis-scaling)

❙ loads of different indicators

❙ it‘s difficult to interpret the data


Listening to customers


Excursus: Metadata

Fixed axis-ranges:

minChartValue, maxChartValue

Quality Control necessary

Fixed class limits:

customBreaks, customLabels

5 classifications 6 entries in customBreaks 5 entries in customLabels


Don‘t mention the war


Don‘t mention the war

❙ the tooltip is the main focus of the user once he starts to interact with the map

❙ while customization is possible, it seems to be very seldom used

❙ not only the style of display can be modified, also the content

❙ goal for this map: a solid base of information provided via tooltip

❙ 2 methods were combined – tooltip customization and use of associate data

❙ what should be displayed and how should it be presented


Excursus: Tooltips I

Main problem: needs to be done outside of designer to ensure managability

results in:

Eckdaten Fortschreibung:</font&>- Einwohnerzahl 1990: ${1990} - Einwohnerzahl 2000: ${2000} - Einwohnerzahl 2010: ${Aktuell} davon<li>unter 18:${u18} (${u18p}%) 18 - 67: ${18-67} (${18-67p}%) über 67: ${67+} (${67+p}%) </li>


Excursus: Tooltips II



Eckdaten Fortschreibung:



- Einwohnerzahl 1990: ${1990} 

- Einwohnerzahl 2000: ${2000} 

- Einwohnerzahl 2010: ${Aktuell} 

davon

<li>unter 18: ${u18} (${u18p}%) 

18 - 67: ${18-67} (${18-67p}%) 

über 67: ${67+} (${67+p}%) 

</li>

make font bigger, use extra paragraph

next paragraph, put text and also associate data, do a line break

italics to visually support the „thereof“

do a list to get bullet points in front


A sort of responsive design


Excursus: JavaScript I

function init(){

myAtlas.addDataListener("dataListener");}

function dataListener(eventType, o)[…]

if(eventType == "indicatorChanged"){

if((o.themeId == "t0") || (o.themeId == "t3") || (o.themeId == "t4")){

if(o.indicatorId =="i0"){switchOn("TimeSeries");

}else{switchOn("MetaData");

[…]


Excursus: JavaScript II

function switchOn(chartName){

if((chartName == "TimeSeries") && (tsOff == true)){

if(metaOff == false){myAtlas.toggleMetaData();metaOff = true;

}if(advOff == false){

myAtlas.toggleAdvancedPieChart();advOff = true;

}myAtlas.toggleTimeSeries();tsOff = false;

}

[…]


In a nutshell


Excursus: Direct data access

function init(){

myAtlas.addDataListener("dataListener");}

function switch1(){

myAtlas.setData("Kreisnamen", "t1", "i1", "Aend");}

Geopgraphy ID Theme Indicator Date

<Button […] href="javascript:switch1() " id="DataButton1" […] target="_self" text="Indikator 1" […] />


At first - keep it low


Take a look yourself

http://web1.extranet.sachsen.de/geoservicet/IA_London/Workshop.html

http://web1.extranet.sachsen.de/geoservicet/IA_London/Workshop.html

Software

Andreas Valley - Presentation at the 2014 InstantAtlas London Workshop