Toevoegingen

Tooltips

We kunnen tooltips toevoegen aan elke grafiek. Deze zijn vooral handig als er veel gegevenspunten zijn (bijvoorbeeld in een Scatter Plot). Zelfs met kleinere gegevenssets helpen ze om de grafiek overzichtelijker te maken, zodat gebruikers zich kunnen concentreren op algemene patronen.

Ze zijn ook nuttig in complexe diagrammen, waar verschillende delen van het diagram verschillende aspecten van de gegevensverzameling weergeven, en dit is misschien niet duidelijk voor gebruikers die niet bekend zijn met dit type diagram. In dit Sunburst-diagram kunnen gebruikers bijvoorbeeld met de muis over segmenten bewegen om zowel het onderliggende gegevenspunt als de context van dat gegevenspunt te zien. In dit geval splitst het Sunburst-diagram medische behandelingen op naar type, het orgaan dat is aangetast en de verzekeringsstatus van de patiënt. Deze informatie wordt onderaan het scherm weergegeven en verandert als de gebruiker met de muis over elk segment beweegt.

Een van de sterke punten van D3 is dat het veel flexibiliteit biedt. Een tooltip kan alle gegevens bevatten die aanwezig zijn in de dataset, contextuele tekst of zelfs waarden uit een compleet andere dataset. Deze Sankey laat gebruikers bijvoorbeeld zien dat de knooppunten het totale aantal vluchtelingen weergeven, terwijl de lijnen het aantal vluchtelingen weergeven dat zich verplaatst tussen elke herkomst (in dit geval een land) en bestemming (in dit geval een Amerikaanse staat). Deze tekst kan in elke taal zijn, wat enorm helpt bij lokalisatie.

Wanneer twee of meer gegevenssets in de weergave worden gebruikt, kunnen tool-tips vergelijkingen tussen deze geven. Ze kunnen bijvoorbeeld zowel de waarde van dit jaar als die van vorig jaar laten zien, of datasets voor verschillende regio's. Omgekeerd kunnen ze bij een enkele gegevensset worden gebruikt om betrouwbaarheidsintervallen, percentages of andere statistische informatie over gegevenspunten weer te geven, zodat gebruikers de betrouwbaarheid van de gegevens kunnen beoordelen.

Een ander voordeel van tooltips is dat ze leuk zijn! Ze verhogen de interactiviteit doordat gebruikers zich met de grafiek kunnen bezighouden en de gegevens op hun eigen manier kunnen verkennen.

Zooms

Met zooms kunnen gebruikers inzoomen op specifieke delen van een grafiek of diagram om gegevenspunten en trends beter te bekijken. Dit is vooral handig bij grote datasets. Het is ook handig als gebruikers geïnteresseerd zijn in verschillende aspecten van de dataset: sommige gebruikers willen zich bijvoorbeeld richten op een bepaalde periode.

Zoomen stelt gebruikers ook in staat om gedetailleerde vergelijkingen te maken tussen verschillende delen van de dataset. Ze kunnen de gegevens interactief verkennen door in te zoomen op een gebied en dan naar een ander gebied te gaan. Dit helpt hen om correlaties, uitschieters en patronen duidelijker te zien.

Een ander voordeel van zoomen is dat het gebruikers in staat stelt om kleinere apparaten, zoals smartphones, te gebruiken om de volledige dataset te zien en toch de details die ze nodig hebben. Gebruikers van smartphones zijn gewend om in te zoomen op het scherm met het 'knijpgebaar'.

Zoomen helpt ook de toegankelijkheid voor mensen met een visuele beperking te verbeteren.

Borstels

Borstelen werkt op dezelfde manier als zoomen, in die zin dat het gebruikers een manier biedt om te werken met een deel van de gegevensset. Maar in plaats van een deel van de grafiek te vergroten, verandert dit gebied niet van grootte. Het geborstelde gebied kan op een andere manier worden aangegeven, zoals een kleurverandering.

Een penseel kan worden gebruikt om de gegevens te filteren - gebruikers kunnen bijvoorbeeld met hun muis langs de x-as van een oppervlaktegrafiek penseelen. Het geborstelde gebied kan dan op een ander deel van het scherm verschijnen. Een andere manier om een penseel te gebruiken is om een aparte grafiek toe te voegen die dezelfde gegevens op een andere schaal weergeeft. In deze situatie werkt de brush op dezelfde manier als zoom. Het kan echter gemakkelijker in gebruik zijn, omdat de afmetingen van de oorspronkelijke grafiek niet veranderen.

Animaties

Animaties helpen op een aantal manieren. In het geval van een eenvoudige staafdiagram, bijvoorbeeld, kunnen de staven langzaam omhoog schuiven in plaats van onmiddellijk te verschijnen. Dit voegt weinig toe aan de informatie-inhoud van de grafiek, maar maakt hem interessanter voor gebruikers.

Animaties spelen een grotere rol wanneer ze worden gebruikt voor overgangen. Dit Sankey-diagram toont bijvoorbeeld gegevens voor verschillende jaren. Als de gebruiker met de schuifregelaar van het ene jaar naar het andere gaat, verandert de relatieve grootte van de knooppunten. Ze bewegen omdat ze in volgorde van grootte zijn gerangschikt. Zonder de animatie zou de verandering schokkend zijn en zou het moeilijk zijn om 'objectconstantie' te handhaven. Een gebruiker zou bijvoorbeeld geïnteresseerd kunnen zijn in hoe de stroom (in dit geval van vluchtelingen) uit een bepaald land verandert van jaar tot jaar. Als dat knooppunt zou verspringen zonder een vloeiende overgang, zou het moeilijk zijn om dit te doen.

Een ander voorbeeld van een overgang wordt getoond in deze cirkeldiagram. Wanneer je met de muis over een segment beweegt, beweegt het iets naar buiten. Door een vloeiende overgang te gebruiken, lijkt deze beweging natuurlijk en blijft de metafoor van de taart behouden. Zonder dit zou dit deel van de taartdiagram van de ene positie naar de andere springen. Om dezelfde reden werken animaties bijzonder goed bij het weergeven van tijdreeksgegevens, zoals waarden op een aandelensticker. Ook hier is het voordeel dat het voor het oog gemakkelijker is om een bepaalde waarde te volgen terwijl die verandert.

Als animatie wordt gebruikt om over te schakelen tussen gegevensverzamelingen en deze overgangen worden bestuurd door een gebruikersinterface, zoals <TransLink>deze schuif</TransLink>, kan de gebruiker de waarden verkennen, bijna als een videoweergave.

Kleuren

Omdat D3-grafieken en -grafieken worden gemaakt met JavaScript, is het mogelijk om de kleuren in te stellen met behulp van een functie. Dit betekent dat kleur kan worden gebruikt op manieren die niet mogelijk zijn in andere bibliotheken voor datavisualisatie.

Het meest voor de hand liggende gebruik van kleur is om verschillende gegevenssets te onderscheiden - deze Bar Chart heeft bijvoorbeeld gegevens voor meerdere sets met vergelijkbare gegevens. Door verschillende kleuren te gebruiken voor elke gegevensset en de betekenis van deze kleuren uit te leggen in een legenda, is het mogelijk om ze samen in dezelfde grafiek te combineren.

Kleur kan ook worden gebruikt om vergelijkbare reeksen waarden te groeperen. Dit Zonnestraal-diagram toont bijvoorbeeld een hiërarchie van gegevens. Elke ring vertegenwoordigt een ander niveau in de hiërarchie. Door kleur te gebruiken, kunnen we waarden groeperen die tot hetzelfde niveau behoren en ze uitleggen in een legenda.

Een ander voordeel van D3 is dat je zowel de verzadiging van de kleur als de tint kunt variëren. In dit Zonnestraal-diagram (het bovenste voorbeeld) is de verzadiging van de kleur in elke sectie gevarieerd, terwijl alle secties in dezelfde ring dezelfde kleur hebben. In dit geval is de intensiteit gewoon gerandomiseerd om afzonderlijke sectoren duidelijker te onderscheiden (vergelijk dit met het voorbeeld waarin elke sector in een ring zowel dezelfde tint als dezelfde verzadiging heeft). Verzadiging kan echter ook gerelateerd zijn aan het onderliggende gegevenspunt. In dit geval is het beter als de sectoren niet op volgorde van grootte worden gerangschikt, omdat kleinere sectoren anders te moeilijk te onderscheiden zijn.

Een ander voorbeeld van waar kleur is gebruikt om het diagram duidelijker te maken is dit Sankey diagram. In de bovenste twee voorbeelden wordt één kleur gebruikt om de oorsprongsknooppunten weer te geven en een andere kleur staat voor de bestemmingsknooppunten. Bovendien vertegenwoordigt de dichtheid van de kleur de grootte van elk knooppunt. Dezelfde kleuren worden gebruikt in de verbindingslijnen. Er is dus een duidelijk verband tussen de waarden die worden weergegeven door de knooppunten en de waarden die worden weergegeven door de verbindingslijnen. In de laatste twee voorbeelden worden twee kleuren gebruikt en worden de onderliggende gegevenswaarden weergegeven door de relatieve waarden van deze twee kleuren. Dit kan soms duidelijker zijn, vooral wanneer de verschillen tussen de gegevenswaarden subtiel zijn.

Tot slot kan kleur soms worden gebruikt om delen van het diagram te scheiden, zonder onderliggende betekenis. Dit is het geval in het derde voorbeeld van een Sunburstdiagram. De kleuren zijn zo gekozen dat de grenzen tussen sectoren in het Sunburst-diagram duidelijk zichtbaar zijn. Dit is vooral handig als de waarden klein zijn en de sectoren erg smal.

Een andere manier waarop kleur kan worden gebruikt is om een bepaalde set gegevenspunten te onderscheiden. Dit kan worden gecombineerd met een penseel (zie hierboven). Door met de kwast over de grafiek te bewegen, kunnen gebruikers gegevenspunten filteren. Gefilterde waarden kunnen worden weergegeven als een andere kleur, die kan worden gekoppeld aan een aparte legenda.

Zelfs zonder penseel kunnen kleuren nuttig zijn om specifieke waarden te markeren. Met D3.js kunnen we bijvoorbeeld uitschieters een specifieke kleur geven of verschillende kleuren gebruiken voor negatieve en positieve waarden. Datavisualisaties worden veel duidelijker als kleuren intelligent worden gebruikt, vooral als er veel datapunten zijn. Kleurcodering kan ook worden gebruikt om de algemene structuur van een datavisualisatie weer te geven.

Kleuren kunnen ook helpen bij interacties. De kleur van een gegevenspunt, staaf of lijn kan veranderen als je er met de muis overheen gaat, om te benadrukken dat het geselecteerd is.

Gegevensraster

Gegevens voor een D3js-diagram of -grafiek komen meestal van een van de volgende drie bronnen. Als de gegevens waarschijnlijk niet vaak veranderen, kunnen ze worden opgeslagen in een JSON- of CSV-bestand op de server. Als de gegevens uit een lokale database komen, moet die database rechtstreeks worden bijgewerkt, hetzij met een aangepaste interface of met een databasetool, zoals DBeaver. We kunnen dit voor je opzetten.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Een variatie op een gegevensraster is een formulier: dit werkt ongeveer zoals het contactformulier op een website. Dit kan geschikter zijn wanneer gegevens moeten worden ingevoerd door medewerkers die niet bekend zijn met een gegevensraster.

UI-elementen

Hoewel D3.js een beperkte set UI-tools biedt, is het beter om deze te coderen met behulp van een componentenbibliotheek, zoals MUI, of als gewone HTML.

De nuttigste UI-elementen zijn keuzerondjes en selectievakjes. Deze worden soms verward. Met keuzerondjes, zoals die in deze Gestapelde staafdiagram, kunnen gebruikers kiezen tussen een set van elkaar uitsluitende keuzes: in dit geval kunnen ze een enkele gegevensverzameling kiezen, weergegeven als een eenvoudige staafdiagram, of meerdere gegevensverzamelingen, weergegeven als een gestapelde staafdiagram. Ze kunnen echter ook worden gebruikt om de manier waarop de gegevens worden weergegeven te veranderen. In deze Zonnestraal datavisualisatie beïnvloeden keuzerondjes de manier waarop kleur wordt gebruikt om verschillende aspecten van de dataset naar voren te brengen.

Met selectievakjes kunnen gebruikers een willekeurige combinatie van opties kiezen: in dit geval sluiten de keuzes elkaar niet uit. In het voorbeeld van het selectievakje kan de <Link>Line Chart datavisualisatie</Link> slechts één dataset, twee willekeurige datasets of alle drie weergeven. Dit is erg handig wanneer gebruikers specifieke vergelijkingen moeten maken tussen paren gegevenssets: ze willen bijvoorbeeld waarden voor hartoperaties vergelijken met leveroperaties en de waarden voor miltoperaties verwijderen om de duidelijkheid te verbeteren.

Een ander UI-element dat handig is voor het verbeteren van D3.js datavisualisaties is een tuimelschakelaar. Deze wordt gebruikt wanneer het diagram in een van twee toestanden kan zijn, of wanneer je gebruikers de optie wilt geven om een deel van de datavisualisatie uit te schakelen om de duidelijkheid te verbeteren. In dit voorbeeld wordt een tuimelschakelaar gebruikt om <Link> te wisselen tussen een lijndiagram en een gebieddiagram</Link>.

Tot slot kunnen sliders worden gebruikt. Deze werken vooral goed als een datavisualisatie datasets uit verschillende tijdsperioden bevat. Hiermee kunnen gebruikers intuïtief heen en weer bewegen langs de tijdlijn, zoals in deze Sankey-gegevensvisualisatie.