Fusion Tables beschikt sinds kort over een aantal experimentele tabelfuncties. Althans, zo worden ze door Google genoemd. Tabelfuncties zijn al jaren ‘in Beta’, maar deze functies zijn dus nog iets experimenteler dan de rest.

In deze post bespreek ik mijn ervaringen met de Network Graph. De tutorial van Google begint veelbelovend:

The Network Graph visualization supports undirected and directed graph structures. This type of graph is particularly useful in illuminating relationships between entities.

Het is al jaren populair om sociale media met grafen weer te geven. Een voorbeeld is mentionmapp. Mijn eerste gedachte was om een netwerk van Twittergebruikers te visualiseren, maar dan zou ik eerst een script moeten schrijven om de benodigde data op te halen. Het leek me handiger om gebruik te maken van een kant-en-klare dataset. Ik kwam tenslotte uit bij een artikel van Sargasso. Dit artikel beschrijft de interrupties in de Tweede Kamer. De data die aan het artikel ten grondslag liggen kun je via het artikel in Excel-vorm downloaden. Wat ik voor ogen had was een graaf in een vorm zoals hieronder staat weergegeven:

Een lid van de Tweede kamer wordt voorgesteld middels een blauw bolletje en de pijlen geven de interrupties aan, waarbij de dikte van de pijl een maat is voor het aantal interrupties.

Uit het Excel-document van Sargasso heb ik de data genomen die het aantal interrupties per fractievoorzitter beschrijft:

(Overigens zit er een foutje in de data. Kolom A (partij) en B (spreker-1) zijn één positie t.o.v. elkaar verschoven.)
De data heb ik in een Google spreadsheet geladen en daar vervolgens een Fusion Table op gebaseerd.

Als je vervolgens kiest voor ‘Experiment’ > ‘Network graph’ dan blijkt dat je met de weinige opties die voorhanden zijn al snel een veelbelovend resultaat krijgt.

Kies als opties:

Het lijkt misschien logischer om bij ‘Vertex 1′ te kiezen voor ‘spreker-1′ en bij ‘Vertex 2′ voor ‘spreker-1′. Het is echter zo dat de visualisatie een pijl trekt van ‘Vertex 1′ naar ‘Vertex 2′ en ik vind het logischer dat de pijl wijst naar degene die wordt geïnterrumpeerd. De optie ‘Color nodes by column’ was mij lange tijd onduidelijk, maar daar kom ik later op terug.

Vervolgens ontstaat er een visuele weergave van een netwerk. Door de muis boven een bolletje te houden wordt er gefilterd op de in- en uitgaande pijlen van dat bolletje:

En hoewel dit een veelbelovend begin is, kom je ook niet heel veel verder dan dit. Het is niet mogelijk om tussen twee bolletjes zowel een heenpijl als een terugpijl te tekenen. Dus wat wordt er dan getekend als de data statistieken bevat over het aantal keren dat bijvoorbeeld Cohen door Wilders wordt geïnterumpeerd, maar ook vice versa? Wat er precies gebeurt weet ik niet, maar er wordt in ieder geval maar één pijl getekend en het is niet zo dat de dikte van de pijl het saldo van interrupties voorstelt. Het is dus niet de bedoeling om een dergelijke dataset met de Network Graph te visualiseren. De Network Graph is wel geschikt voor ongerichte grafen of voor datasets waarin een hiërarchie of volgordelijkheid in zit. Bijvoorbeeld de relatie ‘geeft leiding aan’ of ‘wordt opgevolgd door’.

Wat kan je er wel uit halen?

Door te filteren wordt de visualisatie interessanter. Als je het filter instelt op degene die wordt geïnterrumpeerd , dan ontstaat er een gerichte graaf die wel correct wordt weergegeven.

Instelling:

In de resulterende visualisatie is zowel de grootte van het bolletje als de dikte van de pijl maat voor het aantal interrupties. Helaas is er geen mogelijkheid om te achterhalen wat de onderliggende numerieke waarde is.

Combineer het filter met het totaal aantal interrupties per politieke partij:

Met als resultaat:

Conclusie

De Network Graph werkt heel gemakkelijk, zodra je weet wat de beperkingen zijn. Een gemakkelijke verbetering is het weergeven van de numerieke waarde die overeenkomt met de dikte van een pijl. De functie is nu nog experimenteel maar belooft een handige aanvulling te worden op het arsenaal aan kant-en-klare visualisatietools.

Klik hier voor de visualisatie.

While it is possible to compare the totals, it is hard to compare the different segments. At least, that is true in case of static charts. When using interactivity and animation, one can overcome that problem.

Maybe this is a known solution, but I have never seen it before and therefore I decided to make the prototype. Hovering the mouse over the legend works better than hovering the mouse over the bars. Finding a good solution for interaction with the bars is not trivial. I may work that out when the situation arises that I’m actually going to use this functionality.

So far it’s only tested on Firefox, Safari and Chrome.

A possible solution to compare the segments within the same bar: rotate all segments 90 degrees.

I chose the population density illustration for my first publication. This is a fairly simple illustration with only two different icons (country and inhabitant). Below you see the original image, which can also be found here.

And this is what I have made from it (so far):

My version adds the following to the original:

• A time slider
• Selectable countries
• Display of the top-12 countries with the highest population density
• The numerical representation of each icon is based on the selected countries (‘Each figure represents X inhabitants’)
• Tooltips per country that display the population density numerically

I also decided to change a number of things:

• Because my version shows a top-12, the countries are displayed in an ordered fashion. Gerd Arntz also seems to have ordered countries in his work, but I don’t understand on what rule the ordering is based.
• I don’t display a flag. The original illustration is focused on the statistical difference between The Netherlands and other European countries, therefore the Dutch flag is shown to put focus on The Netherlands. In my version, the focus is up to the user.

Please try out the modernized population density visualization yourself. It may take a while to load the visualization and data, so please be patient.

The data is taken from the United Nations. And because I cannot remember the original location of the document, you can find it here as well. The data includes predictions from 2010 up to 2100 according to different prediction models.  I chose the ‘medium fertility’ model, because I had to choose something.

And, by the way, if you want to live a quite life: go to Greenland. According to the United Nations, the population density in Greenland always has been and always will be zero.

Laura Wismans laat zien hoe je Fusion Tables zover kunt krijgen om een grafiek te laten zien in de popup window, of eigenlijk de ‘info window’ zoals Google het zelf noemt. Je kunt vrijwel elk stukje html-code in de info window plaatsen. In deze blog laat ik zien hoe je een YouTube-video kunt tonen via de info window.

Screenshot van het resultaat:

Stap 1

Zoek een YouTube-video en vraag vervolgens de html-code op via ‘Oude insluitcode gebruiken’. De standaardbreedte van een video is 560px breed. Dat vind ik wat veel, daarom heb ik de breedte gehalveerd.

Stap 2

Maak een Google Docs document en kopieer de code uit stap 1 in het document. Bijvoorbeeld:

Stap 3

Maak op basis van dit document een Fusion Table aan. Vervolgens kun je de info window aanpassen. Ik heb het zo ingesteld:

<div class='googft-info-window' style='font-family: sans-serif'>
<b>{omschrijving}</b>

<div style="width:280px;height:172px; margin-top:12px">
{embedcode}
</div>
</div>

En dan is dit het resultaat:

Below a description of how I became interested in the work of Gerd Arntz and why I started this project.

Two years ago, I was working on an assignment at Statistics Netherlands (CBS). I needed some icons and my colleagues advised me to look into the works of Gerd Arntz.  I had never heard of Gerd Arntz before and even though I was impressed by the icons, I couldn’t find what I was looking for and soon forgot about it. About half a year ago, I was again looking for icons and stumbled upon the works of the Austrian philosopher, sociologist and economist  Otto Neurath. Around 1920-1930, he invented a visual language called ‘International System of TYpographic Picture Education’ (ISOTYPE) to communicate statistics to a non-academic audience. Neurath needed a graphic artist to visualize and realize his concept of ISOTYPE. When he saw the works of the then young Gerd Arntz, he knew that Arntz was the artist that he was looking for. Together, they have produced hundreds of works. When I saw the work ‘Gesellschaft und Wirtschaft (1931)‘, I was amazed by the design and execution of the drawings.

Browsing through the ISOTYPE archive, it is clear that this is a system that still works today. These days, we are flooded by infographics. It happens too often that people make mistakes in visualizing information and thereby unintentionally misleading their audience. Neurath described some valuable rules back in 1936 in ‘International Picture Language – The first rules of Isotype‘. I think that we as infographics or datavisualisation designers, should learn from the ‘Old Masters’ and should try to prevent making mistakes that have been described decades before.

I did some research (i.e. Google-ing around) on Gerd Arntz and found out that in 2013 it will be 25 years ago that he passed away. In february 2012, I co-organized a datavisualisation seminar together with Bas Broekhuizen and Statistics Netherlands. We may be organizing another seminar in 2013 and it would be great if the works of Gerd Arntz would somehow be featuring during this event, since he has made many illustrations for Statistics Netherlands. But it hasn’t been decided yet that we will be organising a seminar in 2013. Therefore, I want to make my own tribute to him, indepently of whatever seminar. This has led to my private project: Modernising static ISOTYPE productions. My goal is to (re)create a visualisation each month, although that may become bi-monthly due to other commitments.

I have to do more research before I start the project. During the project I will get more insight in how interactivity is best deployed and how animations should take place while still respecting the original work. To give an idea, this is an orignal work by Gerd Arntz (click to enlarge):

A possible modernised version adds interactivity to it (selecting years and categories) and a greater number of countries. Stepping through the years will cause the number of icons to icrease or decrease. I will have to find out how this is best animated.

Bas Broekhuizen, lecturer and researcher in Journalism and Media at the University of Amsterdam, has already shown interest in the project and we may be working on some publications together.

If you have any ideas of topics or illustrations to work with, feel free to leave a comment!

Zo kun je een onderscheid maken tussen front-end programmeurs en back-end programmeurs. Maar je kunt ook differentiëren naar het beheersen van verschillende programmeertalen. Je kunt ook onderscheid maken op basis van domeinkennis, bijvoorbeeld geo, security, mobiel etc. En waarschijnlijk zijn er nog wel meer categorieën te verzinnen. Waar het om gaat is dat hoe goed je jezelf ook opleidt en voorbereidt, er komt een moment dat je als journalist of programmeur anderen om raad moet vragen of een deel van het werk moet uitbesteden.

Dan komen we nu eindelijk toe aan de strekking van deze blog. Zou het niet heel erg handig zijn wanneer je als journalist via een marktplaats-achtig systeem deeltaken kunt uitzetten? Stel je hebt een website gevonden waarvan je een paar honderd pagina’s wilt scrapen en dat die klus je eigen digitale pet te boven gaat. Je zet een advertentie op een site met een taakomschrijving en een voorstel voor een beloning. Bijvoorbeeld: € 300 euro bij oplevering binnen een dag, € 200 euro bij oplevering binnen twee dagen, € 100 bij oplevering binnen een week. Zodra je de advertentie hebt geplaatst krijgt een leger van hongerige programmeurs een seintje via hun mobiel binnen en ze kunnen reageren als ze de klus willen aannemen. De journalist ziet wie er reageert en op basis van hun profiel kan de journalist kiezen wie de klus uiteindelijk krijgt. Je advertentie wordt vervolgens onzichtbaar zodat je minder kans loopt je onderzoek te verklappen.

Een reeds bestaand en soortgelijk systeem dat is gericht op designers is Redesignme | Connect. Verschil is wel dat bij Redesignme iedere designer een ontwerp kan indienen. Dat lijkt me voor programmeurtaken niet zo handig. Vandaar dat ik voorstel dat je een programmeur uitkiest en dat die persoon dan ook de enige is die voor jou aan de slag gaat.

De eerste klus die ik kan bedenken: maak deze website plus bijbehorende mobiele apps!

Wellicht een kans voor Redesignme om hun bestaande site te klonen en te tweaken naar dit model.

Ik hoor graag ideeën/reacties over dit concept.

And the Illustrator CS5 file.

Wat ik wel wil laten zien is hoe je het tekstballonnetje dat verschijnt als je in de kaart klikt kunt voorzien van een hele simpele visualisatie. Ik ga verder waar de tutorial van Jerry ophoudt.

Hieronder een screenshot van het resultaat:

Stap 1: Vormgeven van de ballon

De ballon wordt vormgegeven door een paar regels html en css. Hoe je de tekst kunt stijlen heeft Jerry al laten zien. Het enige nieuwe is de twee balkjes. We gebruiken twee blokjes waarvan de breedte van de rode afhankelijk is van de ‘plaatselijke’ bevolkingsdichtheid en de breedte van de grijze vast staat. Stel dat je bovenstaand plaatje wilt maken, dan lijkt dit voor de hand te liggen:

<!-- Het rode balkje: -->
<div style="background-color:#cc0000;  width:{BEV_DICHTH * 150 / 5967}px;"></div>
<!-- Het grijze balkje: -->
<div style="background-color:#cccccc; ;width:150px;"></div>

We gebruiken een ‘div’-element om een balkje te visualiseren. De kleur wordt gespecificeerd met hexadecimale codes.

Voor het grijze balkje kies ik een vaste breedte van 150 pixels. De breedte van het rode balkje is afhankelijk van de waarde BEV_DICHTH. Omdat ik weet dat de maximale waarde voor de bevolkingsdichtheid 5967 bedraagt (nml. in ‘s-Gravenhage) en de breedte van het grijze balkje gelijk is aan 150, moet de breedte van het rode balkje gelijk zijn aan:

BEV_DICHTH * 150 / 5967

Helaas is het zo dat je geen formules kunt gebruiken in het definiëren van de tekstballon, dus bovenstaand voorbeeld gaat niet werken.

Stap 2: Tabel uitbreiden

Wat we wel kunnen doen is een nieuwe kolom aanmaken in de tabel. Voor het aanmaken van een nieuwe kolom kunnen we wel een formule gebruiken. Vervolgens gebruiken we niet BEV_DICHTH maar de nieuwe kolom om de breedte van het blokje te bepalen.

Helaas kun je niet in de samengestelde (ge-mergede) tabel een kolom aanmaken. Je moet terug gaan naar de rauwe datatabel (de tabel met bevolkingsdichtheidstatistieken) en daar een formule aanmaken:

En dan de formule invoeren zoals hierboven staat beschreven:

Ik noem de nieuwe kolom ‘infowindow-bar-width’. Het is mij niet gelukt om deze kolom automatisch te laten doorvoeren naar de samengestelde tabel. Ik heb opnieuw via de merge-functie een samengestelde tabel moeten aanmaken om de nieuwe kolom te kunnen gebruiken.

Het eindresultaat is dit stukje code. Nu volledig, ook voorzien van wat extra css-code om het er net iets mooier uit te laten zien.

<div class='googft-info-window' style='font-family: sans-serif'>

<b>{GM_NAAM}</b> <br/><br/>

Bevolkingsdichtheid: <b>{BEV_DICHTH}</b>
<div style="display:block;background-color:#cc0000;height:8px;width:{infowindow-bar-width}px;margin:4px 0px"></div>
Maximum ('s-Gravenhage): <b>5967</b>
<div style="display:block;background-color:#cccccc;height:8px;width:150px;margin:4px 0px"></div>
</div>

En dan nu het echte kaartje:

In een volgende blog wil ik laten zien hoe je een echt grafiekje in de tekstballon kan zetten. Tenzij iemand anders zich geroepen voelt om dit te doen.

De oplossing heet: ArcGIS Explorer Online (AEO).

Kaartlagen

Zodra AEO is opgestart kun je een nieuwe kaart aanmaken via de knop linksboven ‘New Map’. Een ‘map’ is een kaart waaraan je allerlei elementen kunt toevoegen. Elementen worden groepsgewijs bovenop elkaar in verschillende lagen (layers) gestapeld. Stel dat je van een geografisch gebied zowel de openbare wc’s als de horecagelegenheden wilt tonen. Dan zet je de wc’s in de ene laag en de horecagelegenheden in de andere laag. Je kunt in AEO lagen aan- en uitzetten zodat je niet altijd alle elementen door elkaar hoeft te zien. Het werkt net zoals in bijvoorbeeld Illustrator of Photoshop.

Importeren van shape-files

Via de website van Den Haag Open Data kun je zip-files downloaden waarin shape-files zitten verpakt. Shapefiles kun je binnen AEO importeren en worden netjes in aparte lagen geplaatst.

Als voorbeeld nemen we de Archeologische terreinen van mogelijke waarde. Dit zip-bestand kun je in één keer importeren in AEO.

Open eerst het Layers menu aan de linkerkant door op het pijltje ‘>’ te klikken.

Vervolgens klik je op het plusje linksonder en kies daarna voor het tabblad ‘Import’. Kies dan voor ‘Shapefile’ en je kunt de shape-file importeren.

Als het goed is, dan is nu de laag ‘Gemeente-Den Haag-open-data…’ aangemaakt en de kaart toont de zojuist geïmporteerde elementen (features) als paarse vlakken.

Het is belangrijk om te weten dat in elk zip-bestand maar informatie van één laag mag staan. Als je de inhoud van de zip-file Archeologische vindplaatsen bekijkt, dan zie je de volgende files:

Deze files moet je verpakken in drie aparte zipfiles, bijvoorbeeld:

• mogelijke-vindplaatsen.zip
• vindplaats-punt.zip
• vindplaats-vlak.zip

Vervolgens kun je elke zip-file apart uploaden. Elke zip-file resulteert in een nieuwe laag.

Voorbeelden

Archeologische vondsten

View Larger Map

Bodemenergie

View Larger Map