Drie tools die het designen van statische infographics een stuk makkelijker maken. En leuker.


Zo maar een greep uit het hedendaagse datadesignaanbod. Van all-in visualisatieprogramma’s als Datawrapper, Infogr.am, Tableau en LocalFocus tot code-based tools als High Charts, Fusion Charts en Chartio en complete progammeerlibrabries als D3 en Raphael. Supercool. Voor online.

Voor een grote groep datadesigners die werken voor print — of eigenlijk voor het maken van statische datavisualisaties in het algemeen — resteren maar twee programma’s: Adobe Illustrator — waarmee de mogelijkheden vrijwel onbeperkt zijn maar je iedere keer letterlijk start met een ‘wit vel’, of Excel, waar zonder veel aanpassingen niet bepaald publicatie-waardige grafieken uit komen.

Zijn er alternatieve voor het maken van statische visualisaties? Nah. Maar wel enkele tools die het creëren van graphics een stuk makkelijker maken. Zelf heb ik de afgelopen tijd geëxperimenteerd met RAW, CartoDB, de SVG-export van LocalFocus en — toch wel — good o’l Excel. Ik zal op de eerste drie hulpstukken inzoomen aan de hand van enkele praktijkvoorbeelden.

Tool #1: RAW

To be honest; ik moest even wennen aan deze ‘missing link between spreadsheets en vector graphics’. RAW is geen copy/paste-tool a la Datawrapper waarmee je een paar waarden instant omtovert van Excel-gaapmateriaal tot een kekke staafdiagram. Buiten het feit dat de beschikbare visualisatievormen voor veel soorten data simpelweg te complex en daardoor ongeschikt zijn — de ‘delaunay triangulation, ‘voronoi tessellation’ en een ‘cluster denogram’, just to name a few — voelt de iframe output niet erg flexibel. Dit lijkt een gemiste kans, maar de SVG-exportfunctie maakt alles goed. RAW is namelijk bij uitstek een tool die data die juíst niet in een staafdiagram/lijngrafiek/pie-chart te vangen is makkelijk om weet te zetten in de juiste bollen, lijnen, staafjes of convex hulletjes. En dat is in Illustrator dan weer niet mogelijk.

Screencap visualisatiemogelijkheden RAW

Ondanks de soms weinig tot de verbeelding sprekende visualisatiemogelijkheden heb ik RAW de laatste tijd in meerdere producties voor NRC Q gebruikt. Vooral de scatterplot-functie is prettig. De X/Y-waarden zijn makkelijk tegen elkaar af te zetten door middel van het draggen en droppen van je data, je kunt kiezen of je de assen op 0 wilt laten beginnen of niet (data-ethiek-diehards, kom er maar in!) en vooral — dit in tegenstelling tot de scatterplot-functie in Illustrator — de labels horend bij de bollen blijven bewaard.

Ruwe export van een scatterplot gemaakt in RAW, geëxporteerd als SVG

In een brei van bollen is het dus gemakkelijk om enkele waarden/labels uit te lichten — zoals de opvallende gemeenten in onderstaande graphic horend bij dit stuk — en de rest weg te laten. RAW exporteert alle vormen als SVG-object, dus alle outpout is volledig aan te passen en zelfs tekst blijft als vector-tekst behouden.

Graphic gemaakt in RAW i.c.m. Illustrator / NRC Q

Hoewel ik RAW alleen heb gebruikt voor het maken van scatterplots, is de tool een welkome verrijking van mijn datadesignertoolbox. De SVG-output zal uiteraard nog veel aanpassingen nodig hebben in Illustrator om de juiste elementen uit te lichten, de stijl te finetunen en annotaties aan te geven maar het ruwe hakwerk is gedaan: de data is in de juiste vorm gegoten.

De pro’s en con’s van RAW op een rij. Gezien ik RAW alleen heb gebruikt voor het maken van statische scatterplots is het plus- en minnenlijstje hierop gebaseerd.

Pro’s > Afwijkende visualisatievormen beschikbaar, de SVG-export werkt goed en de bestanden zijn direct te importeren in Illustrator, labels blijven behouden en zelfs binnen de tool zelf is veel aan de stijl — kleuren, groottes en asweergave — aan te passen.

Con’s> Tja, hoe vaak heb je dit soort grafiekvormen nodig?

Tool #2: CartoDB

CartoDB? De webmap-tool? Hell yes. Het programma heeft een verstopte SVG-export functie die in sommige gevallen erg handig kan zijn. But don’t get too hyped up; de kaartstijlen worden niet mee geëxporteerd en Carto is dus geen volwaardige vervanger voor de arbeidsintensieve handenarbeid die ‘cartografie in Illustrator’ heet.

Exportfuncties in CartoDB

Wat kan CartoDB dan wel? Bolletjes op de juiste plaats laten staan en exporteren. Nadat je punten op een kaart hebt aangegeven — dit kan in Carto handmatig, door de ingebouwde geocoder of door deze ontzettend handige online tool — is het mogelijk om deze punten te exporteren als SVG bestand. Deze zijn vervolgens te openen in Illustrator en verder te bewerken. Voordeel: Carto plaatst punten perfect op haar webkaarten aan de hand van de lat/long in de dataset. Accuraat en het scheelt een hoop handwerk — iedere datadesigner die werkt met Illustrator heeft wel eens oneindig veel markeringen op een kaart moeten zetten. Nadeel — correctie: superdikvetgrootultranadeel — de basemap ontbreekt. En hoewel dat volkomen logisch is, is het op zijn zachtst gezegd onhandig.

De ruwe SVG-export uit CartoDB. Yep, this is it.

Voor dit artikel op NRC Q heb ik de ‘snackdensity’ van Nederland bekeken. Aan de hand van gescrapede adressen van McDonalds, BurgerKing, KFC en Smullers heb ik bekeken wat de meest ‘snackdichte’ plaatsen zijn en waar je het verst moet reizen voor een Big Mac, Whopper of Bucket. De uitkomst: een statische kaart die ik vervolgens door middel van Storymap/Gigapixel in een slideshow/zoomtool heb gegoten. Maar even een stap terug: om de locaties zorgvuldig te kunnen plotten op de statische kaart heb ik gebruik gemaakt van de exportfunctie van CartoDB en de punten vervolgens op een vector-basemap met een soortgelijke projectie geplaatst. Hier zit meteen het gevaar: voor hele nauwkeurige kaarten werkt het — gezien verschillende projecties — niet. Voor een meer thematische kaart daarentegen wel.

De statische ‘snackdenisty’ kaart, zonder annotaties

Er zit een groot verschil tussen de Carto-export en het eindresultaat: de ielige outlines die CartoDB uitspugt hebben een hoop bewerkingen nodig om ze publiceerklaar te maken, met het gebrek aan een basemap als grootste probleem. Desondanks is het een prettig hulpstuk: al deze locaties handigmatig op een vectorkaart in Illustrator zetten tijdrovend en veel minder nauwkeurig.

De pro’s en con’s van CartoDB op een rij.

Pro’s > CartoDB slikt erg veel datapunten en zet ze automatisch op de goede plek. Dit scheelt simpelweg een hoop handwerk.

Con’s > Er blijft een hoop handwerk over. De output is minimaal en moet nog op een basemap geplaatst worden. Hierdoor is het tricky om hele gedetailleerde kaarten te maken.

Tool #3: LocalFocus

Het afgelopen jaar heb ik samen met Erik Willems en Jelle Kamsma gewerkt aan LocalFocus; een datanieuwsfeed/data-management systeem/visualisatietool voor nieuwsredacties. Hoewel de tool vooral gemaakt is voor online, is er sinds kort ook een SVG-exportfunctie beschikbaar. Naast dat het hierdoor eenvoudig is om grafieken zowel voor web- als print in te zetten, heb ik de SVG-exportfunctie vooral gebruikt ook choropleetkaarten Illustrator-ready te maken. LocalFocus herkent namelijk automatisch landen, provincies, gemeenten en een veeltal aan andere administratieve indelingen die vanuit je dataset omgezet worden in de juiste polygonen. Exporteer de in het platform gemaakte selecties als SVG en alle lagen en kleuren blijven behouden en te bewerken.

Boven: dataselecties gemaakt in LocalFocus, onder: de SVG-export van de kaart

De pro’s en con’s van LocalFocus op een rij.

Pro’s > LocalFocus is in tegenstelling tot bijvoorbeeld RAW ook geschikt om meer conventionele grafiekvormen te maken en te exporteren voor zowel web als print. Daarnaast is door de automatische locatieherkenning het maken van een polygonenkaart een piece of cake. Geen gehannes in een complex of stroef GIS programma of arbeidsintensief handwerk.

Con’s > Na het exporteren worden groepen die tot een bepaalde kleurenbucket behoren niet onthouden. Je zult dus zelf alsnog de — in het bovenstaande geval — de juiste gemeenten moeten groeperen in Illustrator en in lagen moeten zetten, wil je de kleuren aan kunnen passen.

Want to give it a shot? In de LocalFocus playground kun je zelf aan de slag met voorbeelddata of je eigen data uploaden en vervolgens exporteren als SVG-bestand.

Tot zover drie tools die ik zelf met enige regelmaat gebruik om het maken van statische graphics sneller, soepeler en geautomatiseerde te laten verlopen. Zelf ervaring met een van deze tools of andere tools, tips of tricks? Let me know!

Show your support

Clapping shows how much you appreciated Datading.es ’s story.