Infographics maken

Het is niet echt eenvoudig om grote hoeveelheden data te presenteren en inzichtelijk te maken voor een breed publiek. Dat komt doordat de samenhang tussen de gegevens niet altijd kort en bondig kan worden uitgelegd. Grafische weergave van de data is dan een goede benadering. Dat wordt 'infographics' genoemd.

Het maken van infographics is een klus die niet te standaardiseren is. Elk onderwerp vraagt een eigen aanpak. Het is daardoor arbeidsintensief en dus duur. Dat weegt m.i. niet op tegen de voordelen bij het overbrengen van de boodschap.

Op deze pagina wordt een goed uitgewerkte infographic besproken. Het betreft weergegevens van de stad Liverpool die ik heb aangetroffen in Webdesigner Magazine nr. 85 (april 2016), pag. 62 t.m.65. Voor deze site is de infographic vertaald in het Nederlands en zijn een paar kleine bugjes gerepareerd.
Het blad Webdesigner Magazine wordt sinds november 2017 niet meer gemaakt.

De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan.

• Er worden twee items besproken:
  1. De werking van het script, in algemene termen.
  2. Zelf gebruiken.
   
• De werking van het script
• Voor een grafiek heb je gegevens nodig. Normaal haal je die (bijvoorbeeld met behulp van AJAX) van een server, maar voor het voorbeeld is het geprogrammeerd in het JSON-object data.
• In data zitten twee objecten, te weten rainfall en temperature. Deze twee objecten bevatten de gegevens voor de regenval resp. de temperatuur. Er zit geen overlap in de gegevens; uit oogpunt van duidelijkheid is dat een goede aanpak.
• Het object data is aan de HTML en CSS gekoppeld met data-attributen.
• De data worden verwerkt met behulp van jQuery. Er is daarom een $document.ready()-function die de verschillende onderdelen van de grafieken vult met de goede gegevens.
• Met de data worden maar weinig berekeningen gedaan. Het beperkt zich tot bepalen van verschillen of percentages.
   
• Zelf gebruiken
• Dit is een jQuery-toepassing, dus je hebt jQuery nodig. Dat haal je het beste van een CDN. Voor het voorbeeld is versie 1.12.1 gebruikt (Het origineel gebruikt versie 2.1.3).
• Pak de gedownloade file uit en hernoem de file htlm-515a.htm naar index.html of iets dergelijks. Je hebt nu een werkende pagina waar mee je aan de slag kunt.
   
• Tenslotte
• Wat op deze pagina is beschreven, is bedoeld om aan te geven hoe je infographics kunt opzetten. Het is zeker geen kant-en-klaar kookboek, wat je elders op deze site vaak aantreft.

Downloaden:
 
Druk op de knop:  File: voorb515.zip, 35 584 bytes.

Opmerking:
 
Een aanpak voor het maken van eenvoudige staafdiagrammen vind je in het item "staafdiagrammen".