The presentation slides are from Andrea's Valley of Statistical Office of the Free State of Saxony, Germany topic at the 2014 London Workshop Topic title - 'Here be dragons: How InstantAtlas customization can help to guide users through the data jungle'.

1. Hic sunt dracones - Here be dragons

2. | 03/28/2014 | Andreas Valley2
Greetings from germany

3. | 03/28/2014 | Andreas Valley3
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

4. | 03/28/2014 | Andreas Valley4
Horses for courses

5. | 03/28/2014 | Andreas Valley5
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

6. | 03/28/2014 | Andreas Valley6
First steps

7. | 03/28/2014 | Andreas Valley7
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

8. | 03/28/2014 | Andreas Valley8
Listening to customers

9. | 03/28/2014 | Andreas Valley9
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

10. | 03/28/2014 | Andreas Valley10
Don‘t mention the war

11. | 03/28/2014 | Andreas Valley11
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

12. | 03/28/2014 | Andreas Valley12
Excursus: Tooltips I
Main problem: needs to be done outside of designer to ensure managability
results in:
<p><font size=„12“>Eckdaten Fortschreibung:</font&></p><p>- Einwohnerzahl 1990:
${1990}<br>- Einwohnerzahl 2000: ${2000}<br>- Einwohnerzahl 2010: ${Aktuell}<br>
<i>davon</i><li>unter 18:${u18} (${u18p}%)<br> 18 - 67: ${18-67} (${18-67p}%)<br>
über 67: ${67+} (${67+p}%)<br></li>

13. | 03/28/2014 | Andreas Valley13
Excursus: Tooltips II
<p><font size=„12“>
Eckdaten Fortschreibung:
</font></p>
<p>- Einwohnerzahl 1990: ${1990}<br>
- Einwohnerzahl 2000: ${2000}<br>
- Einwohnerzahl 2010: ${Aktuell}<br>
<i>davon</i>
<li>unter 18: ${u18} (${u18p}%)<br>
18 - 67: ${18-67} (${18-67p}%)<br>
über 67: ${67+} (${67+p}%)<br>
</li></p>
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

14. | 03/28/2014 | Andreas Valley14
A sort of responsive design

15. | 03/28/2014 | Andreas Valley15
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");
[…]

16. | 03/28/2014 | Andreas Valley16
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;
}
[…]

17. | 03/28/2014 | Andreas Valley17
In a nutshell

18. | 03/28/2014 | Andreas Valley18
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" […] />

19. | 03/28/2014 | Andreas Valley19
At first - keep it low

20. | 03/28/2014 | Andreas Valley20
Take a look yourself
http://web1.extranet.sachsen.de/geoservicet/IA_London/Workshop.html