Detta linjediagram visar samma data som Stackat stapeldiagram, men använder punkter för att markera datapunkterna och linjer för att koppla samman dem. Vippbrytaren (skapad i MUI) växlar mellan ett enkelt linjediagram och ett ytdiagram. Båda datavisualiseringarna använder nästan samma D3.js-kod.
Områdesdiagram fungerar bättre som datavisualisering när det finns enskilda datauppsättningar: de hjälper användarna att se det totala värdet som representeras av datapunkterna tydligare, eftersom detta är proportionellt mot storleken på det skuggade området. Men när det finns flera datapunkter kan de skuggade områdena vara förvirrande, eftersom ett område kan dölja områdena bakom det. D3.js tillåter total kontroll över detta: vi kan till exempel minska opaciteten för vissa eller alla områden, eller till och med minska opaciteten för de områden som överlappar de som ligger nedanför. Områdesdiagram kan också vara förvirrande när de visar negativa värden, även om D3.js erbjuder sätt att komma runt detta problem, t.ex. genom att använda olika färger för positiva och negativa värden.
Precis som i exemplet Bar Chart är det möjligt att använda UI-kontroller för att fokusera på en viss datauppsättning inom datavisualiseringen, och länka detta till D3.js-koden. I det här fallet används dock kryssrutor i stället för radioknappar. Med radioknappar måste du bara välja ett alternativ, men med kryssrutor kan varje ruta väljas eller väljas bort oberoende av de andra. Med detta användargränssnitt är det därför möjligt att välja vilken permutation av datauppsättningar som helst: till exempel ett enda organ, två organ eller alla tre organen. Kodningen för detta är lite mer komplicerad, särskilt när det finns mer än ett litet antal datapunkter.
D3.js låter oss också välja vilken kurva som ska användas för att koppla ihop data. Vanligtvis väljer vi den kurva som passar bäst för datavisualiseringen och hårdkodar den. Men för att illustrera vad som är möjligt har vi lagt till en uppsättning alternativknappar så att användarna kan välja sin egen. Vissa kurvor, t.ex. Catmull-Rom, passerar genom alla datapunkter, medan andra, t.ex. Curve Basis, inte gör det. Fördelen med att inte passera genom alla datapunkter är att det är möjligt att visa trender i data på ett mycket bra sätt. Omvänt gäller att Catmull-Rom-kurvan omfattar alla faktiska datapunkter, men innehåller över- och underskott, vilket gör det svårare att se trender.
Kostnaden för ett D3.js linjediagram eller ytdiagram beror i hög grad på i vilken utsträckning det behöver specialkodas. Tillägg som verktygstips, anpassade animationer och så vidare ökar kostnaden något men förbättrar användarupplevelsen avsevärt. Sidan Priser ger dig en allmän uppfattning. Sidan Priser ger dig en allmän uppfattning. Kontakta oss gärna för en kostnadsfri diskussion med en utvecklare för att ta reda på vad som är bäst för dig.