Inleiding

DynamicD3 biedt datavisualisaties op maat met D3.js. Samen met u kiezen we de meest effectieve manier om uw gegevens weer te geven: bijvoorbeeld Bar Charts, Line Charts, Pie Charts, Sankey Diagrams of meer exotische datavisualisaties zoals chloropleths, Bubble Charts of Sunburst Diagrams.

D3.js datavisualisaties kunnen een groot aantal Add Ons bevatten, zoals tool-tips, zooms, mouse-overs en animaties. Deze helpen gebruikers de gegevens intuïtiever te begrijpen en zorgen voor een boeiende ervaring die niet mogelijk is met statische datavisualisaties. We kunnen ook een aangepaste UI maken - met behulp van keuzerondjes, selectievakjes, schuifregelaars of tuimelschakelaars - waarmee het scala aan interactieve ervaringen nog verder wordt uitgebreid.

We geven je ofwel gewoon JavaScript, dat je rechtstreeks in je website kunt invoegen, of een React-component. We maken een eenvoudige gratis webpagina als demo. Als optie kunnen we een dataraster maken, zodat je je gegevens eenvoudig kunt bijwerken.

D3.js kan gegevens uit een statisch JSON- of CSV-bestand gebruiken, of gegevens uit een API. We kunnen ook een dataraster maken, zodat je gegevens eenvoudig kunt bijwerken.

Staafdiagrammen

Staafdiagrammen worden meestal gebruikt voor categorische gegevens, zoals dit voorbeeld waarbij het aantal operaties aan drie specifieke organen in een groot ziekenhuis wordt vergeleken.

Merk op dat een staafdiagram niet hetzelfde is als een histogram, ook al lijken ze op elkaar. Een histogram heeft geen categorische gegevens, zoals landen (waarbij een gegevenspunt ondubbelzinnig in de ene of de andere categorie valt). Het toont eerder gegevens die een continuüm vormen, maar die zijn onderverdeeld in verschillende bereiken, bins genoemd. Een dataset waarin de x-as de afstand tot een bepaald punt weergeeft, kan bijvoorbeeld worden onderverdeeld in bereiken. Deze bereiken zijn echter arbitrair en worden meestal gekozen om de gegevens duidelijk weer te geven.

D3.js kan worden gebruikt voor zowel een staafdiagram als een histogram, en beide kunnen één of meerdere gegevenssets weergeven. Het kan ook worden gebruikt om continue gegevens weer te geven. Deze kunnen echter beter worden weergegeven in een lijndiagram of een scatterchart.

Lijndiagrammen

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Lijndiagrammen zijn vooral handig om meerdere gegevensreeksen weer te geven die op de een of andere manier aan elkaar gerelateerd zijn. Deze datasets gebruiken meestal dezelfde x-as, maar kunnen verschillende schalen en verschillende y-assen hebben. Ze zijn vooral nuttig om trends te zien in verschillende datasets (zoals vergelijken wanneer er een piek is in ziekte in verschillende landen). In dit voorbeeld wordt een UI gebruikt om te schakelen tussen verschillende combinaties van datasets. Merk op dat D3.js automatisch de schaal van de verticale as kan aanpassen als de gegevens veranderen.

Een ander sterk punt van lijngrafieken is de mogelijkheid om trends effectief te analyseren. Er kan een curve worden getekend die door elk punt gaat of die korte- of langetermijntrends laat zien. In het voorbeeld waarnaar hierboven wordt verwezen, is een UI toegevoegd zodat gebruikers de gegevensset op verschillende manieren kunnen verkennen met behulp van verschillende curven.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Cirkeldiagrammen

In een taartdiagram is de hoek van elk plakje evenredig met de hoeveelheid die het vertegenwoordigt. Taartdiagrammen en Donutdiagrammen zijn hetzelfde, behalve dat Donutdiagrammen een gat in het midden hebben dat gegevens kan bevatten. Donutdiagrammen kunnen meerdere ringen hebben die een hiërarchie van gegevenswaarden weergeven; dit type diagram wordt echter een Zonnestraaldiagram genoemd.

Cirkeldiagrammen worden vaak gebruikt in kranten. Hoewel ze bekend en gemakkelijk te begrijpen zijn, zijn ze niet de beste manier om proportionele of categorische gegevens weer te geven, omdat het moeilijk is om verschillende waarden te vergelijken (in tegenstelling tot een staafdiagram, waar de hoogtes van de rechthoeken gemakkelijk vergeleken kunnen worden. Ze zijn echter nuttig als de gegevens een deel van een totale waarde vertegenwoordigen. Verhoudingen kunnen ook worden weergegeven met staafdiagrammen, maar dit is intuïtief minder voor de hand liggend.

De metafoor van een taart kan worden uitgebreid door een stuk van de taart uit te tekenen. Dit kan statisch of met een mouse-over effect, zoals te zien is op de Taartdiagram pagina. Dit staat bekend als een geëxplodeerde taartgrafiek. Meer gedetailleerde informatie kan worden gegeven voor de geëxplodeerde sectie.

Zonnestraal diagrammen

Zonnestraaldiagrammen zijn een vorm van cirkeldiagrammen met meerdere niveaus. Ze staan soms bekend als radiale treemaps, omdat de gegevens dezelfde hiërarchische structuur hebben als een conventionele treemap.

Dit type gegevensvisualisatie toont hiërarchie door middel van een reeks ringen die voor elk categorieknooppunt worden uitgesneden. Elke ring komt overeen met een niveau in de hiërarchie, waarbij de centrale cirkel het hoofdknooppunt voorstelt en de hiërarchie zich van daaruit naar buiten verplaatst. Bijvoorbeeld, in dit voorbeeld worden soorten bewerkingen onderverdeeld. De eerste ring verdeelt de operaties volgens het orgaan dat wordt beïnvloed. De volgende ring verdeelt elk van deze secties volgens het type behandeling (conservatief, operatie, transplantatie of medicijnen) en de volgende ring laat zien of de patiënten al dan niet verzekerd waren. Mouse-overs tonen de onderliggende waarden in een display onderaan. Dit betekent dat gebruikers de gegevens kunnen verkennen door over het scherm te bewegen. Ze zouden bijvoorbeeld willen weten hoe het aandeel van patiënten die een nierbehandeling kregen, verschilde op basis van hun verzekeringsdekking.

Kleur kan worden gebruikt om hiërarchische groepen of specifieke categorieën te benadrukken. In het bovenstaande voorbeeld kan de gebruiker het kleurenschema wijzigen om verschillende aspecten van de gegevensset te benadrukken. In het eerste voorbeeld worden verschillende kleuren gebruikt voor elke ring. Dit maakt het gemakkelijk om de gegevens in elke ring te begrijpen, terwijl tegelijkertijd de secties duidelijk worden afgebakend. Dit werkt echter niet bij grote datasets. In dit geval is het duidelijker als alle secties in een bepaalde ring dezelfde kleur hebben. Tot slot kunnen in sommige gevallen willekeurige kleuren worden gebruikt. Deze maken het moeilijker om de betekenis van elk niveau in de hiërarchie te begrijpen, maar maken het gemakkelijker om verschillende sectoren te zien. De UI-weergave in het Zonnestraal voorbeeld schakelt tussen deze alternatieven.

Sankey diagram

Sankey-diagrammen worden gebruikt om stroomprocessen weer te geven, zoals de geldstroom binnen een organisatie (zoals weergegeven in een financieel overzicht), de stroom van energie of grondstoffen door een reeks industriële processen of de stroom van een abstracter goed, zoals informatie. De hoogte of breedte van elk knooppunt vertegenwoordigt de totale hoeveelheid stroom door dat knooppunt en de dikte van de lijnen tussen elk paar knooppunten vertegenwoordigt de hoeveelheid stroom die tussen deze knooppunten passeert. Er kan kleur worden gebruikt, ofwel om de hoeveelheid stroom weer te geven (bijvoorbeeld met een kleurverloop) of om een ander aspect van het proces weer te geven, zoals in dit Sankey-diagram, dat kleuren gebruikt om de vluchtelingenstroom te illustreren.

Een gebied waar Sankeys vaak worden gebruikt is de energiesector. Ze kunnen bijvoorbeeld de bron van aardgas per land laten zien, de manier waarop het zijn bestemming bereikt (pijpleiding, schip, enz.) en vervolgens hoe het wordt gebruikt (eindgebruikers). Dergelijke diagrammen zijn nuttig voor beleidsmakers, omdat ze gebieden aangeven waar de efficiëntie kan worden verbeterd.

Sankey-diagrammen zijn een bijzonder intuïtieve manier om veranderingen in de tijd weer te geven. In dit Sankey-diagram wordt de vluchtelingenstroom vanuit verschillende landen van herkomst naar de Verenigde Staten over een bepaalde periode getoond. Met de schuifregelaar kunnen gebruikers door de tijdlijn bewegen en door de vloeiende overgangen is het gemakkelijk om de knooppunten te volgen terwijl ze in belang toenemen of afnemen.

Chloropleth

Choropleths gebruiken kleuren om te laten zien hoe een variabele varieert in een geografisch gebied. Ze zijn vergelijkbaar met hittekaarten, maar in tegenstelling tot hittekaarten verdelen ze de kaart in geopolitieke subeenheden, zoals landen, staten, provincies of provincies.

De waarden die in een chloropleth worden gebruikt, moeten rekening houden met de variërende grootte van de gebieden. Er is bijvoorbeeld een enorm verschil tussen de grootte van verschillende landen, dus het heeft geen zin om landen alleen op basis van hun bevolking in te kleuren. In plaats daarvan zouden deze gegevens worden 'genormaliseerd' tussen regio's door bevolkingsdichtheid te gebruiken in plaats van absolute bevolking. Voor beide soorten weergave staan donkerdere of intensere kleuren meestal voor hogere waarden, terwijl lichtere of blekere kleuren lagere waarden aangeven.

Helaas zijn gegevens in de echte wereld meestal niet onderverdeeld in natuurlijke categorieën. Een chloropleth waarin de intensiteit van een kleur evenredig is met de bevolkingsdichtheid zou bijvoorbeeld kunnen werken als er een vergelijkbaar verschil is tussen de bevolkingsdichtheid van verschillende regio's (zoals tussen verschillende counties in dezelfde Amerikaanse staat). Vaak bevatten gegevens echter waarden die orden van grootte groter zijn dan andere waarden in dezelfde dataset. Gelukkig heeft D3.js een rijke verzameling schalen. In sommige gevallen is een log-schaal meer geschikt: deze zou kleine verschillen goed weergeven, maar ook veel grotere verschillen laten zien. In andere gevallen kan één kleur worden gebruikt om waarden boven of onder een bepaalde drempelwaarde weer te geven. Het is deze hoge mate van flexibiliteit die D3.js zo'n krachtig middel maakt voor het maken van datavisualisaties.

D3.js helpt ons niet alleen om de gegevens te schalen, maar stelt ons ook in staat om een breed scala aan kaartprojecties te gebruiken: deze hebben een grote invloed op de manier waarop de gegevens worden waargenomen. Chloropleths die met andere bibliotheken zijn gemaakt, gebruiken vaak standaardprojecties zoals de Mercatorprojectie, wat kan leiden tot grote vervormingen in bepaalde delen van de wereld. Dit is minder een probleem als de kaart kleinere gebieden toont, zoals provincies in het Verenigd Koninkrijk, of als de weergegeven gebieden allemaal op dezelfde breedtegraad liggen.

Tot slot is het mogelijk om twee afzonderlijke (maar gerelateerde) gegevens te gebruiken, elk met een andere kleurenschaal. Dit staat bekend als een tweedimensionale Cloropleth.

Bellengrafiek

Bubble charts lijken op scatterplots waarbij de gegevens zijn vervangen door cirkels. Terwijl een scatterplot alleen de positie en de kleur van een punt kan gebruiken om informatie weer te geven, heeft een bubbeldiagram ook horizontale en verticale dimensies. Dit maakt bubbeldiagrammen bijzonder geschikt voor het weergeven van multidimensionale relaties.

Als voor elke cirkel slechts één extra stukje informatie moet worden weergegeven, kan dit worden weergegeven door de oppervlakte van de cirkel. Dit kan echter problematisch zijn, omdat gebruikers geneigd zijn de relatieve grootte van de cirkels te beoordelen op basis van hun diameter in plaats van hun oppervlakte. Het is belangrijk om dit duidelijk te maken in de legenda.

Beldiagrammen werken minder goed als er veel gegevenspunten zijn en als er een groot bereik is. Als er te veel gegevenspunten zijn, kan de weergave er druk uitzien en kunnen bubbels elkaar overlappen. Wanneer er een groot bereik van waarden in de gegevensset is, zijn de kleinere bubbels mogelijk niet duidelijk zichtbaar. Deze problemen kunnen tot op zekere hoogte worden opgelost door mouse-over interacties te gebruiken om meer informatie te geven, zoals de exacte waarde van het onderliggende gegevenspunt.

Een laatste probleem met bubbeldiagrammen is de illusie van het gewogen gemiddelde: de grootte van de bubbels beïnvloedt de perceptie van de x- en y-waarden van het gegevenspunt. Met deze vervorming moet rekening worden gehouden bij het schatten van de gemiddelde x- en y-waarden.

Beldiagrammen die negatieve waarden moeten weergeven, kunnen worden gemaakt met een symbool in het midden van bellen die negatieve waarden vertegenwoordigen, verschillende kleuren voor positief en negatief of zelfs verschillende vormen. Met D3.js is dit niveau van flexibiliteit mogelijk, maar dit is niet het geval met de meeste bibliotheken voor datavisualisatie.