Spicing up your Fusion Tables (just a little)


In korte tijd zijn er twee blogs verschenen over het gebruik van Fusion Tables. Zowel Laura Wismans als Jerry Vermanen laten zien hoe je een kaart kunt inzetten om gemeentestatistieken te visualiseren. Beide tutorials zijn hele goede inleidingen. Een kenmerk van kaartvisualisaties die met Fusion Tables zijn gemaakt is dat er vaak een legenda ontbreekt. Volgens de regels van de kunst moet een visualisatie altijd begeleid worden door een legenda en mijn plan was dus ook om een glorieuze blog te schrijven over hoe je dat voor elkaar moet krijgen. Na wat onderzoek ben ik tot de (voorlopige) conclusie gekomen dat legenda’s niet mogelijk zijn bij embedded visualisaties. Je kunt het wel voor elkaar krijgen als je een ge-javascripte applicatie maakt, maar dat sluit niet zo aan bij de tutorials van Laura en Jerry.

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.