Dit lijndiagram toont dezelfde gegevens als het Stapeldiagram, maar gebruikt punten om de gegevenspunten te markeren en lijnen om ze te verbinden. De omschakelaar (gemaakt in MUI) wisselt tussen een eenvoudige lijngrafiek en een gebiedgrafiek. Beide datavisualisaties gebruiken bijna dezelfde D3.js code.
Gebieddiagrammen werken beter als datavisualisaties wanneer er enkelvoudige datasets zijn: ze helpen gebruikers om de totale waarde die door de datapunten wordt vertegenwoordigd duidelijker te zien, omdat deze evenredig is met de grootte van het gearceerde gebied. Als er echter meerdere gegevenspunten zijn, kunnen de gearceerde gebieden verwarrend zijn, omdat één gebied de gebieden erachter kan verdoezelen. D3.js biedt hier volledige controle over: we kunnen bijvoorbeeld de ondoorzichtigheid van sommige of alle gebieden verminderen, of zelfs de ondoorzichtigheid verminderen van de gebieden die de gebieden eronder overlappen. Gebiedsgrafieken kunnen ook verwarrend zijn als ze negatieve waarden tonen, hoewel D3.js manieren biedt om dit probleem te omzeilen, zoals het gebruik van verschillende kleuren voor positieve en negatieve waarden.
Net als in het Bar Chart voorbeeld, is het mogelijk om UI controls te gebruiken om te focussen op een bepaalde dataset binnen de datavisualisatie, en deze te koppelen aan de D3.js code. In dit geval worden echter selectievakjes gebruikt in plaats van keuzerondjes. Met radiobuttons moet je slechts één optie selecteren, maar met selectievakjes kan elk vakje onafhankelijk van de andere worden geselecteerd of gedeselecteerd. Met deze UI is het dus mogelijk om elke permutatie van gegevensverzamelingen te selecteren: bijvoorbeeld een enkel orgaan, twee organen of alle drie de organen. De codering hiervoor is iets ingewikkelder, vooral als er meer dan een klein aantal gegevenspunten zijn.
Met D3.js kunnen we ook de curve selecteren die wordt gebruikt om de gegevens te verbinden. Normaal gesproken zouden we de meest geschikte curve voor de datavisualisatie kiezen en deze hard coderen. Maar om te laten zien wat er mogelijk is, hebben we een aantal keuzerondjes toegevoegd zodat gebruikers hun eigen curve kunnen kiezen. Sommige curven, zoals Catmull-Rom, gaan door alle datapunten, terwijl andere, zoals Curve Basis, dat niet doen. Het voordeel van het niet passeren van alle gegevenspunten is dat het mogelijk is om trends in gegevens goed weer te geven. Omgekeerd omvat de Catmull-Rom-curve alle feitelijke gegevenspunten, maar ook overschrijdingen en onderschrijdingen, waardoor het moeilijker is om trends te zien.
De kosten van een D3.js Lijngrafiek of Gebiedgrafiek hangen sterk af van de mate waarin het gecodeerd moet worden. Toevoegingen zoals tool-tips, aangepaste animaties enzovoort zullen de kosten iets verhogen, maar de gebruikerservaring enorm verbeteren. De Prijzen pagina geeft je een algemeen idee. De Prijzen pagina geeft je een algemeen idee. Neem echter contact met ons op voor een gratis gesprek met een ontwikkelaar om uit te zoeken wat voor jou het beste is.