Data en duiding staan centraal

De Boekmanstichting zet zich al decennia lang in voor kunst en cultuur en is hét onafhankelijke kenniscentrum voor kunst en cultuur in Nederland. Met name het benadrukken en zichtbaar maken van de maatschappelijke waarde van kunst en cultuur is een speerpunt van de stichting. Samen ontwikkelden we in WordPress de website cultuurmonitor.nl, waarop onder andere data en visualisatie gecombineerd worden in een interactief dashboard gemaakt met Highcharts.

Data beschikbaar stellen en visualiseren staan centraal, maar het platform dient ook een andere functie. Duiding geven. Dus niet alleen ruwe data, maar ook begeleidende inzichten die de data toelichten. Voor ons lag het zwaartepunt van dit project bij de technische realisatie van de datakoppeling en de vrij instelbare visualisaties.

Een dashboard voor datavisualisatie

Een belangrijk aspect van het data-dashboard is om data snel en gemakkelijk inzichtelijk te maken. En om al deze data uit de database makkelijk om te zetten naar een visuele presentatie kozen wij voor het gebruik van de Highcharts library. 

Met Highcharts implementeer je als het ware je eigen data vis tooltje die makkelijk te gebruiken is. Misschien nog wel belangrijker dan het uiterlijk is het gebruiksgemak. Gebruikers kunnen via indicatoren en variabelen met een aantal klikken al een overzichtelijke visualisatie tevoorschijn toveren. 

Het dashboard voldoet bovendien aan een aantal kenmerken.

  • Zoeken en selecteren van indicatoren
  • Alleen lijn- en staafdiagrammen
  • Een downloadknop voor .csv en .jpg
  • Inzien van de ruwe data via tabel
  • Bronverwijzing per grafiek, geen verwijzing naar bronnen explorer.

In de video hierboven is duidelijk hoe het dashboard werkt. Alle beschikbare data is direct inzichtelijk voor de gebruiker. Na het kiezen van één of meerdere indicatoren kan een gebruiker de samengestelde data bekijken in tabelvorm of gevisualiseerd in een grafiek. Bovendien kan de gebruiker op deze manier makkelijk verschillende datastromen van uiteenlopende branches vergelijken.

<tech talk> Datavisualisatie module

De Highcharts-bibliotheek is een tool om betrouwbare datavisualisaties te maken in WordPress. De charting libraries zijn gebaseerd op JavaScript en TypeScript en werken met elke back-end database of serverstack. We bieden wrappers voor de meest populaire programmeertalen (.Net, PHP, Python, R, Java), maar ook voor iOS en Android, en frameworks zoals Angular, Vue en React.

</techtalk>

Een dashboard voor mobile

Zaak was ook dat de site goed op mobiel zou werken. Dat betekende met name voor het dashboard wat pas- en meetwerk. Uiteindelijk is de navigatie op mobiel op een andere manier ontworpen dan voor desktop. Echt maatwerk dus.

Eén van de pijnpunten bij het ontwerpen van een mobiele site is de aspect ratio. Een site moet er ineens zowel liggend als staand goed uit zien en vooral goed reageren op wat de gebruiker verwacht. Het staande format (ook wel portrait genoemd) had dus in ons geval prioriteit. Buttons, links, uitklapbare menu’s en tekst moeten allemaal zo reageren dat ze op mobiel goed uit de verf komen.

Ook een mooi project op komst maar weet je niet hoe je dit op moet lossen?

Neem dan contact met ons op. Dan kijken we samen verder.

Contact

"*" geeft vereiste velden aan

Nieuwsbrief
Over ons en ons werk
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Dit hebben wij gedaan