Inledning

DynamicD3 erbjuder anpassade datavisualiseringar med hjälp av D3.js. Vi hjälper dig att välja det mest effektiva sättet att visa dina data: detta kan omfatta stapeldiagram, linjediagram, kakdiagram, sankeydiagram eller mer exotiska datavisualiseringar som kloropleter, bubbeldiagram eller sunburstdiagram.

D3.js datavisualiseringar kan innehålla ett stort antal Add Ons som verktygstips, zoomar, mouse-overs och animationer. Dessa hjälper användarna att förstå data på ett mer intuitivt sätt och ger en engagerande upplevelse som inte är möjlig med statiska datavisualiseringar. Vi kan också skapa ett anpassat användargränssnitt - med hjälp av radioknappar, kryssrutor, skjutreglage eller vippbrytare - som utökar utbudet av interaktiva upplevelser ytterligare.

Vi ger dig antingen vanlig JavaScript, som du kan infoga direkt på din webbplats, eller en React-komponent. Vi skapar en enkel gratis webbsida som demo. Som tillval kan vi skapa ett datanät så att du enkelt kan uppdatera dina data.

D3.js kan använda data från en statisk JSON- eller CSV-fil, eller data från ett API. Vi kan också skapa ett data grid så att du enkelt kan uppdatera data.

Stapeldiagram

Stapeldiagram används vanligtvis för kategoriska data, t.ex. detta exempel som jämför antalet operationer på tre specifika organ vid ett större sjukhus.

Observera att ett stapeldiagram inte är detsamma som ett histogram, även om de ser likadana ut. Ett histogram har inte kategoriska data, t.ex. länder (där en datapunkt entydigt tillhör en kategori eller en annan). Det visar snarare data som bildar ett kontinuum, men som är indelade i olika intervall, så kallade bins. Till exempel kan en datauppsättning där x-axeln visar avståndet från en viss punkt delas in i intervall. Dessa intervall är dock godtyckliga och väljs vanligtvis för att visa data på ett tydligt sätt.

D3.js kan användas för antingen ett stapeldiagram eller ett histogram, och båda dessa kan representera en eller flera uppsättningar data. Det kan också användas för att representera kontinuerliga data. Detta är dock mer lämpligt att visa i ett linjediagram eller spridningsdiagram.

Linjediagram

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).

Linjediagram är särskilt användbara för att visa flera datauppsättningar som är relaterade på något sätt. Dessa datauppsättningar använder vanligtvis samma x-axel men kan ha olika skalor och olika y-axlar. De är särskilt användbara för att se trender i olika datauppsättningar (t.ex. för att jämföra när det är en topp i sjukdomsfrekvensen i olika länder). I det här exemplet används ett användargränssnitt för att växla mellan olika kombinationer av datauppsättningar. Observera att D3.js automatiskt kan justera skalan på den vertikala axeln när data ändras.

En annan styrka med linjediagram är möjligheten att analysera trender på ett effektivt sätt. Man kan rita en kurva som går genom varje punkt eller som visar trender på kort eller lång sikt. I exemplet ovan har ett användargränssnitt lagts till så att användarna kan utforska datauppsättningen på olika sätt med hjälp av olika kurvor.

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

Cirkeldiagram

I ett cirkeldiagram är vinkeln på varje skiva proportionell mot den mängd som den representerar. Pajdiagram och munkdiagram är samma sak, förutom att munkdiagram har ett hål i mitten som kan innehålla data. Donutdiagram kan ha flera ringar som visar en hierarki av datavärden, men denna typ av diagram kallas för Sunburst-diagram.

Cirkeldiagram används ofta i tidningar. Men även om de är bekanta och lätta att förstå är de inte det bästa sättet att visa proportionella eller kategoriska data, eftersom det är svårt att jämföra olika värden (till skillnad från i ett stapeldiagram, där höjden på rektanglarna lätt kan jämföras. De är dock användbara när data representerar en andel av ett totalt värde. Proportioner kan också visas med stapeldiagram, men detta är mindre intuitivt uppenbart.

Metaforen med en paj kan utökas genom att rita ut en bit av pajen. Detta kan göras statiskt eller med en mouse-over-effekt, som visas på sidan Pajdiagram. Detta kallas för ett exploderat cirkeldiagram. Mer detaljerad information kan ges för det exploderade avsnittet.

Sunburst-diagram

Sunburst-diagram är en form av cirkeldiagram med flera nivåer. De kallas ibland för radiella trädkartor, eftersom data har samma hierarkiska struktur som en vanlig trädkarta.

Denna typ av datavisualisering visar hierarkin genom en serie ringar som skärs ut för varje kategorinod. Varje ring motsvarar en nivå i hierarkin, där den centrala cirkeln representerar rotnoden och hierarkin rör sig utåt från den. I detta exempel delas t.ex. typer av insatser upp. Den första ringen delar upp operationerna efter vilket organ som påverkas. Nästa ring delar upp vart och ett av dessa avsnitt efter typ av behandling (konservativ, operation, transplantation eller läkemedel) och nästa ring visar om patienterna hade försäkring eller inte. Mouse-overs visar de underliggande värdena i en display längst ner. Det innebär att användarna kan utforska data genom att flytta runt i displayen. De kanske till exempel vill veta hur andelen patienter som fick njurbehandling skilde sig åt beroende på deras försäkringsskydd.

Färg kan användas för att markera hierarkiska grupperingar eller specifika kategorier. I exemplet ovan kan användaren ändra färgschemat för att betona olika aspekter av datauppsättningen. I det första exemplet används olika färgintervall för varje ring. Detta gör det enkelt att förstå de data som visas i varje ring, samtidigt som sektionsgränserna blir tydliga. Detta fungerar dock inte med stora datamängder. I det här fallet är det tydligare om alla sektioner i en viss ring har samma nyans. Slutligen kan slumpmässiga färger användas i vissa fall. Dessa gör det svårare att förstå betydelsen av varje nivå i hierarkin, men gör det lättare att se olika sektorer. UI-displayen i Sunburst-exemplet växlar mellan dessa alternativ.

Sankey Diagram

Sankey-diagram används för att beskriva flödesprocesser, t.ex. flödet av pengar inom en organisation (som visas i ett bokslut), flödet av energi eller råmaterial genom en serie industriella processer eller flödet av en mer abstrakt tillgång, t.ex. information. Höjden eller bredden på varje nod representerar den totala mängden flöde genom den noden och tjockleken på linjerna mellan varje par av noder representerar mängden flöde som passerar mellan dessa noder. Färg kan användas, antingen för att visa mängden flöde (till exempel med hjälp av en färggradient) eller för att visa någon annan aspekt av processen, som i detta Sankey-diagram, där färger används för att illustrera flyktingflödet.

Ett område där Sankeys ofta används är energisektorn. De kan till exempel visa källan till naturgas per land, hur den når sin destination (pipeline, fartyg etc.) och sedan hur den används (slutanvändare). Sådana diagram är användbara för beslutsfattare, eftersom de belyser områden där effektiviteten kan förbättras.

Sankey-diagram är ett särskilt intuitivt sätt att visa förändringar över tid. I detta Sankey-diagram visas flödet av flyktingar från olika ursprungsländer till USA över en tidsperiod. Med hjälp av skjutreglaget kan användaren förflytta sig genom tidslinjen, och smidiga övergångar gör det enkelt att hålla reda på noderna när de ökar eller minskar i betydelse.

Kloroplet

Choropleths använder färg för att visa hur en variabel varierar över ett geografiskt område. De liknar värmekartor, men till skillnad från de senare delar de upp kartan i geopolitiska underenheter, t.ex. länder, delstater, provinser eller län.

De värden som används i en kloroplet måste ta hänsyn till områdenas varierande storlek. Det finns till exempel en enorm skillnad mellan storleken på olika länder, så det är inte meningsfullt att färglägga länder enbart baserat på deras befolkning. Istället skulle dessa data "normaliseras" över regioner genom att använda befolkningstäthet snarare än absolut befolkning. För båda typerna av displayer gäller att mörkare eller mer intensiva färger vanligtvis representerar högre värden, medan ljusare eller blekare färger indikerar lägre värden.

Tyvärr är data från den verkliga världen vanligtvis inte indelade i naturliga kategorier. Till exempel kan en kloropleth där intensiteten i en färg är proportionell mot befolkningstätheten fungera när det finns en liknande skillnad mellan befolkningstätheten i olika regioner (till exempel mellan olika län i samma amerikanska delstat). Ofta innehåller dock data värden som är storleksordningar större än andra värden i samma datauppsättning. Som tur är har D3.js ett stort antal skalor. I vissa fall kan en logskala vara mer lämplig: den skulle visa små skillnader väl, men också visa mycket större skillnader. I andra fall kan en färg användas för att visa värden över eller under ett visst tröskelvärde. Det är denna höga grad av flexibilitet som gör D3.js till ett så kraftfullt verktyg för att skapa datavisualiseringar.

Förutom att D3.js hjälper oss att skala data kan vi använda ett brett utbud av kartprojektioner: dessa har en stor inverkan på hur data uppfattas. Kloropleter som tagits fram med andra bibliotek använder ofta standardprojektioner som Mercators projektion, vilket kan leda till stora förvrängningar i vissa delar av världen. Detta är ett mindre problem om kartan visar mindre områden, t.ex. grevskap i Storbritannien, eller om de områden som visas alla ligger på en liknande latitud.

Slutligen är det möjligt att använda två separata (men relaterade) data, var och en med en annan färgskala. Detta kallas för en tvådimensionell Cloropleth.

Bubbeldiagram

Bubbeldiagram är som spridningsdiagram där data ersatts av cirklar. Medan ett spridningsdiagram endast kan använda en pricks position och färg för att representera information, har ett bubbeldiagram även horisontella och vertikala dimensioner. Detta gör bubbeldiagram särskilt lämpliga för att visa flerdimensionella förhållanden.

Om endast en extra information behöver visas för varje cirkel kan detta representeras av cirkelns area. Detta kan dock vara problematiskt, eftersom användarna tenderar att bedöma cirklarnas relativa storlek baserat på deras diameter snarare än deras area. Det är viktigt att göra detta tydligt i legenden.

Bubbeldiagram fungerar mindre bra när det finns många datapunkter och när dataintervallet är stort. När det finns för många datapunkter kan det se trångt ut och bubblorna kan överlappa varandra. När det finns ett stort intervall av värden i datauppsättningen kanske de mindre bubblorna inte syns tydligt. Dessa problem kan till viss del lösas genom att använda mouse-over-interaktioner för att ge mer information, t.ex. det exakta värdet för den underliggande datapunkten.

Ett sista problem med bubbeldiagram är illusionen om viktade medelvärden: storleken på bubblorna påverkar uppfattningen av datapunktens x- och y-värden. Denna förvrängning måste tas med i beräkningen när man uppskattar de genomsnittliga x- och y-värdena.

Bubbel-diagram som behöver visa negativa värden kan skapas antingen med en symbol i mitten av bubblorna som representerar negativa värden, olika färger för positivt och negativt eller till och med olika former. Med D3.js är denna nivå av flexibilitet möjlig, men detta är inte fallet med de flesta datavisualiseringsbibliotek.