UPDATE: Hoewel veel van de tools in dit artikel uit 2012 nog steeds effectief zijn en zich hebben ontwikkeld om nog nuttiger te worden, bent u misschien geïnteresseerd in onze meer recente serie over Interactieve Data Viz Tools.

Complexe Data Visualisatie Tools

Welkom terug voor het tweede deel van mijn serie over interactieve data visualisatie (dataviz) tools. In deel 1 hebben we drie coole tools besproken voor het visualiseren van grafieken en vele andere datatypes op een webpagina. In deel twee bekijken we nog drie andere tools die iets complexer zijn, maar wel ongelooflijke datavisualisatiemogelijkheden bieden.

1. jQuery Visualize (Deel 1)
2. Google Charts (Deel 1)
3. Highcharts (Deel 1)
4. Simile Exhibit
5. JavaScript InfoVis Toolkit
6. D3.js

Simile Exhibit

Exhibit is een zeer robuust en aanpasbaar aanbod. Een van zijn sterkste punten is een unieke aanpak voor het renderen van de gegevens. Naast gemakkelijk te gebruiken filter-, sorteer- en zoekfuncties, kunt u een HTML-sjabloon (in Exhibit een “lens” genoemd) gebruiken om alles op de pagina er precies zo uit te laten zien als u dat wilt. Het is bijna als een mini-CMS voor dataviz waar u toegang heeft tot uw data via attribuutwaarden direct in de lens. Voor projecten die een hoge mate van gevoeligheid voor look en feel vereisen, is dit extreme niveau van flexibiliteit voor het bouwen van datavisualisaties fantastisch.

• Ondersteunde visualisatietypes: Lijngrafieken, Kaarten, Scatter Plots, Multi-Filterable Lists, Tijdlijnen, Timeplots en meer…met widgets!
• Data Input Bronnen: JSON, Spreadsheet
• Gegevensuitvoer: HTML
• Styling opties: CSS
• Type: Javascript bibliotheek

PROS

Flexibel & Krachtige ontwerpbenadering
Ik hou erg van de benadering van Exhibit, waarbij gegevens worden gepresenteerd door een “lens” – een HTML-sjabloon waarin elementen worden geplaatst. Dit maakt het systeem volledig aanpasbaar en CSS-styleerbaar, wat betekent dat ontwerpers er dol op zijn, en het creëren van consistentie voor de merken van klanten is een fluitje van een cent.

Sterk filteren/sorteren/zoeken
Het laten filteren van uw gegevens door gebruikers op een willekeurig aantal criteria is ongelooflijk nuttig, en verandert uw informatie van statische inhoud in een echte interactieve functie. Filteren is ingebouwd in Exhibit en het is gemakkelijk te implementeren. Server-side filtering kan een hele klus zijn (om maar niet te spreken van duur), dus Exhibit onderscheidt zich echt in het snel en makkelijk maken van het filteren door gebruikers. Hetzelfde geldt voor sorteren en zoeken. Exhibit maakt het heel eenvoudig om gebruikers van uw site de controle te geven over het krijgen van precies die weergave van uw gegevens die zij willen, en daardoor een waardevoller begrip van waarom het belangrijk is.

Sterke Documentatie
Het springen in complexe dataviz tools kan een onderneming zijn en vereist wat vallen en opstaan. Exhibit versnelt het proces met goede documentatie op hun website en een aantal uitstekende tutorials voor beginners.

Widgets!
Wilt u Exhibit nog verder uitbreiden? U kunt functionaliteit toevoegen met widgets. Er zijn widgets beschikbaar voor bibliografie- en citatenverzamelingen, een CoverFlow-stijl afbeeldingsviewer, tijdlijnen en timeplots, om er maar een paar te noemen. Dit soort productuitbreidingen maakt Exhibit een van de meest robuuste en flexibele opties voor datavisualisatie.

CONS

Steile leercurve
Net als bij de andere complexere bibliotheken komt er bij Exhibit meer codering kijken dan bij de meeste andere opties, en het is zeker handig om Javascript-ervaring te hebben. Ik vond de tutorials echter erg goed en leuk om te doen, dus als je eenmaal begint, is het erg makkelijk om aan de slag te gaan.

Javascript InfoVis Toolkit

Javascript InfoVis Toolkit is een mooie suite met tools voor het maken van grafieken en diagrammen op een webpagina. Het heeft een mooie lijst van ondersteunde grafiektypen en introduceert enkele animatie-functies in de mix (bijv. de staven van een staafdiagram kunnen uitzetten tot hun grootte wanneer de grafiek wordt geladen – dit soort dingen). De animaties zijn leuk en kunnen zeker een extra niveau van afwerking toevoegen aan uw site. Er zijn ook enkele coole interactieve functies, zoals het toepassen van een “Filter” op een grafiek door er op te klikken. De grafiek toont dan alleen de serie waarop u hebt geklikt totdat u de filter verwijdert. Bekijk de demo’s om meer te zien van waar deze toolkit toe in staat is.

• Ondersteunde visualisatietypes: Gebiedstabel, Staafdiagram, Taartdiagram, Boomkaart, Krachtrichting, Radiaaldiagram, Zonnestraal, Ijspegel, Ruimteboom, Hyperboom
• Gegevensinvoer: JSON
• Uitvoer: Canvas
• Styling: Javascript parameters
• Type: Javascript Library

PROS

Unique Chart Types
Ik vind de verschillende niet-standaard visualisatietypes die beschikbaar zijn in de InfoVis Toolkit erg leuk. Deze tool is misschien wat overdreven voor een cirkeldiagram, maar kan echt van pas komen als u de weergaveopties voor gecompliceerdere gegevens moet benaderen.

Animaties / Interacties
De animaties zijn een geweldige toevoeging aan deze grafieken en diagrammen. Ze geven deze grafieken een mooie Flash-achtige kwaliteit die erg leuk is. En de mogelijkheid tot interactie met deze grafieken – dingen verslepen en de grafiek manipuleren (zoals deze) is erg cool en zou erg nuttig kunnen zijn.

CONS

Learning Curve
Met al deze geweldige functies komt complexiteit en, hoewel de documentatie op de website goed lijkt te zijn, vereist deze tool enige goede Javascript ervaring om er het meeste uit te halen.

D3.js

Wauw, D3.js is cool! Ik heb net een paar uur rondgeneusd op de D3 website en de mogelijkheden lijken eindeloos. Deze tool vereist zeker een behoorlijk hoog niveau van expertise met Javascript en JSON, maar het genereert een aantal prachtige, verfijnde grafieken. Bekijk de voorbeelden.

D3 is niet echt zoals de anderen. Het is geen “kant en klare” grafieken-tool, maar eerder een raamwerk voor het tekenen van op gegevens gebaseerde elementen. De D3 website zegt het het beste: “In plaats van een monolithisch systeem te bieden met alle functies die iemand ooit nodig zou kunnen hebben, lost D3 alleen de kern van het probleem op: efficiënte manipulatie van documenten op basis van gegevens.”

En, omdat je SVG-grafieken kunt maken, zou je deze uitvoer overal kunnen gebruiken, inclusief printtoepassingen. D3 zou het middelpunt kunnen zijn van een gelikte web/print publishing workflow voor een grafiek zwaar project.

• Ondersteunde visualisatietypes: Alle? The sky’s the limit.
• Data Input: JSON, GeoJSON, CSV
• Uitvoer: HTML, SVG
• Styling: CSS, Javascript
• Type: Javascript bibliotheek

PROS

Onbeperkte Flexibiliteit
Je kunt D3.js zo ongeveer gebruiken om alles te tekenen wat je maar wilt op basis van data. Dit is een geweldige tool voor mensen die nieuwe datavisualisaties maken en visualisaties op basis van echt grote datasets.

Uitvoer
Zeer cool dat je D3 kunt vertellen om HTML-items te maken, evenals SVG. Zeker opent de deur naar styling met CSS, dat is ideaal.

CONS

Leercurve
Je moet een volleerd Javascript, JSON, en wiskunde persoon te krijgen D3 om te springen door hoepels. En sommige van de voorbeelden verbijsteren je geest, maar ga je gang en loop door de tutorial. Het is niet zo slecht en, als je bekend bent met jQuery of Prototype, zal veel van dit alles je bekend voorkomen. En veel ook niet…

Conclusie

Deze zes producten zijn slechts het topje van de ijsberg voor dataviz. Er zijn nog tientallen andere geweldige producten. Maar deze zouden u een goed idee moeten geven van wat er gebeurt en een gevoel van het scala aan mogelijkheden en de complexiteit van de interactieve dataviz-wereld.