DynamicD3: Datavisualisering med hjälp av D3.js

DynamicD3

Stapeldiagram

Detta staplade stapeldiagram är en datavisualisering skapad med D3.js och MUI. Det visar antalet operationer på ett sjukhus i USA kategoriserat efter det organ som påverkas. När alternativknappen "Alla tre" är markerad kan användarna jämföra det totala antalet operationer för varje år med hjälp av teckenförklaringen som referens. Det är dock svårare att jämföra enskilda värden från ett år till ett annat, eftersom de motsvarande staplarna inte ligger i linje med varandra. Vi har därför lagt till möjligheten att välja vilket som helst av de tre organen för sig. Detta gör det mycket enklare att fokusera på en enda datauppsättning och jämföra värden.

Det är möjligt att skapa en mängd olika stapeldiagram med flera data med D3.js: istället för att stapla värdena ovanpå varandra kan de till exempel vara sida vid sida. Det gör det enklare att jämföra värden inom samma datauppsättning, men svårare att jämföra de totala värdena.

Stapeldiagram med variabel bredd, ibland kallade variwide stapeldiagram, är stapeldiagram med staplar som inte har samma bredd. Vi kan t.ex. visa BNP för olika länder genom att använda staplarnas höjd för att representera BNP per capita och staplarnas bredd för att representera befolkningen. Arean skulle då representera den totala BNP.

Diagrammet innehåller också ett datanät för enkel datainmatning. Data för D3.js-datavisualiseringar kan finnas i en lokal JSON- eller CSV-fil. Men om data ändras ofta, eller måste uppdateras av outbildad personal, är ett datanät mer praktiskt. Detta fungerar ungefär som ett Excel-kalkylblad, med rader och kolumner för data. Uppgifterna är vanligtvis länkade till en extern databas som vi kan konfigurera åt dig: en ytterligare fördel med detta är att dina uppgifter enkelt kan säkerhetskopieras på ett säkert sätt. Se Tillval för mer information och Priser för information om kostnader.

Kostnaden för ett stapeldiagram beror i hög grad på i vilken utsträckning datavisualiseringen kan skapas direkt i D3.js eller måste specialkodas. Tillägg som verktygstips, anpassade animationer och så vidare ökar kostnaden en aning men förbättrar användarupplevelsen avsevärt. 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.


Uppdatera sidan för att uppdatera data.