Data visualiseren
met Vega

fffeed: achtergronden en projecten

Wie wel eens een tabel met getallen heeft omgezet in een staafdiagram, bijvoorbeeld in een spreadsheet, weet dat zoiets niet moeilijk is en veel bijdraagt aan het inzicht in de informatie in de tabel. Het diagram wordt toegevoegd aan het rapport waar de tabel in beschreven staat, en wordt daarmee rijker en begrijpelijker.

Wanneer de data complexer of dynamisch wordt, en een statische visualisatie niet meer voldoet, spelen interactieve datavisualisaties een rol. Dat zijn in feite datagestuurde computerprogramma’s die bedacht, ontworpen, gemaakt en getest moeten worden. Het is niet verwonderlijk dat het maken van dergelijke visualisaties vaak wordt uitbesteed aan de ict-afdeling, omdat zij die programma’s kunnen maken. En zoals het wel vaker gaat bij softwareontwikkeling: het kan een tijd duren voordat de opdrachtgever een resultaat ziet dat past bij zijn doelstellingen. Idealiter kan de opdrachtgever zelf aan de slag om met z’n data een visualisatie te maken die aansluit bij de beoogde context.

een taal om visualisaties
mee te beschrijven

Vega is ontwikkeld om dit mogelijk te maken. Het is een visualisatiegrammatica, dat wil zeggen een taal om visualisaties mee te beschrijven. De beschrijving wordt gebruikt om de uiteindelijke visualisatie weer te geven.

Het voordeel van de grammatica is dat er geen programmeren aan te pas komt, maar uitsluitend configureren. De grammatica bestaat uit typische onderdelen van een visualisatie, zoals objecten die getekend moeten worden, databronnen, assen en schalen, kleuren en gedrag. Zoals de grammatica van een natuurlijke taal een aantal regels formuleert, definieert Vega precies wat je moet en mag doen om je visualisatie te maken. Vega noemt dat een specificatie: die bevat alle onderdelen van de visualisatie, opgeschreven volgens de regels van de grammatica.

Iedere Vega specificatie kan door de Vega-toolset gecontroleerd worden op volledigheid of fouten, en een foutloze specificatie kan worden getoond in een webbrowser, of worden omgezet in een afbeelding die in een bestand wordt opgeslagen.

Om een indruk te krijgen van de mogelijkheden van Vega kun je de voorbeeldbibliotheek bekijken op

https://vega.github.io/vega/ examples/

en meer informatie vind je via https://vega.github.io/vega/.

Een online editor met als voorbeeld een staafdiagram staat op https://vega.github.io/editor/ #/examples/vega/ bar-chart.

Vega Lite

Met de basisprincipes van Vega als uitgangspunt hebben de makers van Vega een variant gemaakt waarmee nog makkelijker en sneller interactieve datavisualisaties te maken zijn: Vega-Lite, https://vega.github.io/vega-lite/.

Het grote voordeel van Vega-Lite is dat de grammatica minder uitgebreid is, met grotere bouwstenen, zodat je sneller bent waar je wilt zijn. Het nadeel is dan meteen dat je iets minder invloed hebt op details die je in Vega wel kunt aanpassen.

Vega-Lite is zeer geschikt als ‘instapmodel’ om te leren over visualisaties en hun eigenschappen. Alles wat gedefinieerd wordt in Vega-Lite wordt achter de schermen omgezet in Vega, en daarna getoond op het scherm. Dus Vega en Vega-Lite sluiten naadloos op elkaar aan.

Een Vega-Lite specificatie van een staafdiagram ziet eruit als:

De equivalente specificatie in Vega omvat meer dan 100 regels, en is dus ruwweg 10 maal zo omvangrijk; tegelijkertijd kun je (en moet je) in Vega allerlei extra eigenschappen instellen, waar die in Vega-Lite allemaal standaardwaardes hebben en daarmee niet zichtbaar zijn in de specificatie.

Een Vega-Lite specificatie van een staafdiagram ziet eruit als:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {"url": "data/seattle-weather.csv"},
  "mark": "bar",
  "encoding": {
     "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
     "y": {"aggregate": "mean", "field": "precipitation", "type": "quantitative"}
      }
}

De equivalente specificatie in Vega omvat meer dan 100 regels, en is dus ruwweg 10 maal zo omvangrijk; tegelijkertijd kun je (en moet je) in Vega allerlei extra eigenschappen instellen, waar die in Vega-Lite allemaal standaardwaardes hebben en daarmee niet zichtbaar zijn in de specificatie.