Tillägg

Verktygstips

Vi kan lägga till verktygstips i alla diagram eller grafer. Dessa är särskilt användbara när det finns många datapunkter (t.ex. i ett spridningsdiagram). Även med mindre datauppsättningar hjälper de till att rensa diagrammet, så att användarna kan fokusera på övergripande mönster.

De är också användbara i komplexa diagram, där olika delar av diagrammet förmedlar olika aspekter av datauppsättningen, och detta kanske inte är uppenbart för användare som inte är bekanta med denna typ av diagram. I det här Sunburst-diagrammet kan användaren till exempel föra muspekaren över segment för att se både den underliggande datapunkten och datapunktens sammanhang. I det här fallet delar Sunburst-diagrammet upp medicinska behandlingar i typ, vilket organ som påverkas och patientens försäkringsstatus. Denna information visas längst ned i displayen och ändras när användaren för muspekaren över varje segment.

En av de stora styrkorna med D3 är att det erbjuder stor flexibilitet. Ett verktygstips kan innehålla alla data som finns i datauppsättningen, kontextuell text eller till och med värden från en helt annan datauppsättning. Till exempel visar denna Sankey användarna att noderna representerar det totala antalet flyktingar, medan linjerna representerar antalet flyktingar som rör sig mellan varje ursprung (i detta fall ett land) och destination (i detta fall en amerikansk delstat). Texten kan vara på vilket språk som helst, vilket är till stor hjälp vid lokalisering.

När två eller flera datauppsättningar används i displayen kan verktygstips visa jämförelser mellan dessa. De kan t.ex. visa både årets värde och förra årets värde, eller datauppsättningar för olika regioner. Omvänt, med en enda datauppsättning, kan de användas för att visa konfidensintervall, procentvärden eller annan statistisk information relaterad till datapunkter, vilket hjälper användarna att bedöma uppgifternas tillförlitlighet.

En annan fördel med verktygstips är att de är roliga! De ökar interaktiviteten genom att låta användarna engagera sig i diagrammet och utforska data på sina egna villkor.

Zoomar

Med zoomning kan användaren zooma in på specifika områden i en graf eller ett diagram för att granska datapunkter och trender närmare. Detta är särskilt användbart med stora datauppsättningar. Det är också användbart när användarna är intresserade av olika aspekter av datauppsättningen: vissa användare kanske till exempel vill fokusera på en viss tidsperiod.

Zooms gör det också möjligt för användare att göra detaljerade jämförelser mellan olika delar av datauppsättningen. De kan utforska data interaktivt genom att zooma in på ett område och sedan flytta till ett annat område. Detta hjälper dem att se korrelationer, outliers och mönster tydligare.

En annan fördel med zoomar är att de gör det möjligt för användare att använda mindre enheter, som smartphones, för att se hela datasetet, men ändå kunna se de detaljer de behöver. Smartphone-användare är vana vid att zooma in på skärmen med hjälp av "nyp-gester".

Zoomning bidrar också till att förbättra tillgängligheten för personer med synfel.

Borstar

Brushing fungerar på samma sätt som zoomning, eftersom det är ett sätt för användare att interagera med en del av datauppsättningen. Istället för att förstora en del av diagrammet ändras dock inte storleken på detta område. Det borstade området kan indikeras på något annat sätt, t.ex. genom en färgförändring.

En pensel kan användas för att filtrera data - t.ex. kan användaren pensla längs x-axeln i ett ytdiagram genom att flytta musen. Det område som har penslats kan sedan visas på en annan del av displayen. Ett annat sätt att använda en pensel är att lägga till ett separat diagram som visar samma data i en annan skala. I denna situation fungerar penseln på samma sätt som zoom. Den kan dock vara enklare att använda, eftersom den ursprungliga grafen inte ändrar sina dimensioner.

Animationer

Animationer kan vara till hjälp på många sätt. I ett enkelt stapeldiagram kan staplarna t.ex. glida upp långsamt i stället för att visas direkt. Detta tillför mycket lite till diagrammets informationsinnehåll, men gör det mer intressant för användarna.

Animationer spelar en allvarligare roll när de används för övergångar. Exempel: Detta Sankey-diagram visar data för flera år. När användaren flyttar från ett år till ett annat med hjälp av skjutreglaget ändras nodernas relativa storlek. De rör sig eftersom de är ordnade i storleksordning. Utan animeringen skulle förändringen vara skakande och det skulle vara svårt att bibehålla "objektkonstansen". En användare kan till exempel vara intresserad av hur flödet (i detta fall av flyktingar) från ett visst land förändras från år till år. Om den noden hoppar runt utan en smidig övergång skulle det vara svårt att göra detta.

Ett annat exempel på en övergång visas i det här cirkeldiagrammet. När muspekaren förs över ett segment flyttas det ut något. Genom att använda en mjuk övergång verkar denna rörelse naturlig och hjälper till att bibehålla cirkelns metafor. Utan den skulle den här delen av cirkeldiagrammet hoppa från en position till en annan. Av samma anledning fungerar animationer särskilt bra när man visar tidsseriedata, t.ex. värden på en aktielista. Återigen är fördelen att det är lättare för ögat att hålla reda på ett visst värde när det ändras.

När animering används för att övergå mellan datauppsättningar, och dessa övergångar styrs av ett användargränssnitt, t.ex. <TransLink>this slider</TransLink>, kan användaren utforska värdena nästan som en videodisplay.

Färger

Eftersom D3-grafer och -diagram skapas med JavaScript är det möjligt att ställa in färgerna med hjälp av en funktion. Det innebär att färg kan användas på sätt som inte är möjliga i andra datavisualiseringsbibliotek.

Den mest uppenbara användningen av färg är att särskilja olika datauppsättningar - till exempel har detta stapeldiagram data för flera uppsättningar av liknande data. Genom att använda olika färger för varje datauppsättning och förklara färgernas betydelse i en teckenförklaring går det att kombinera dem i samma diagram.

Färg kan också användas för att gruppera liknande uppsättningar av värden. Till exempel visar detta Sunburst-diagram en hierarki av data. Varje ring representerar en annan nivå i hierarkin. Med hjälp av färg kan vi gruppera värden som hör till samma nivå och förklara dem i en teckenförklaring.

En annan fördel med D3 är att det är möjligt att variera mättnaden av färgen såväl som dess nyans. I detta Sunburst-diagram (det översta exemplet) varieras t.ex. färgmättnaden i varje sektion, medan alla sektioner i samma ring har samma färg. I det här fallet är intensiteten helt enkelt slumpmässig, för att tydligare urskilja enskilda sektorer (jämför detta med exemplet där varje sektor i en ring har både samma nyans och samma mättnad). Mättnad kan dock också vara relaterad till den underliggande datapunkten. I det här fallet är det bättre om sektionerna inte är ordnade efter storlek, annars blir det för svårt att urskilja mindre sektorer.

Ett annat exempel där färg har använts för att göra diagrammet tydligare är detta Sankey-diagram. I de två översta exemplen används en färg för att representera ursprungsnoderna och en annan färg för att representera destinationsnoderna. Färgens densitet representerar dessutom storleken på varje nod. Samma färger används i de anslutande linjerna. Det finns därför en uppenbar koppling mellan de värden som representeras av noderna och de värden som representeras av de anslutande linjerna. I de två sista exemplen används två färger, och de underliggande datavärdena representeras av de relativa värdena för dessa två färger. Detta kan ibland vara tydligare, särskilt när skillnaderna mellan datavärdena är subtila.

Slutligen kan färg ibland användas enbart för att separera delar av diagrammet, utan någon underliggande betydelse. Detta är fallet i det tredje exemplet på ett Sunburst-diagram. Färgerna är specifikt valda på ett sådant sätt att gränserna mellan sektorerna i Sunburst-diagrammet är tydligt synliga. Detta är särskilt användbart när värdena är små och sektorerna är mycket smala.

Ett annat sätt att använda färg är för att särskilja en viss uppsättning datapunkter. Detta kan kombineras med en pensel (se ovan). Genom att pensla över grafen kan användarna filtrera datapunkter. Filtrerade värden kan visas i en annan färg, som kan länkas till en separat teckenförklaring.

Även utan en pensel kan färger vara användbara för att markera specifika värden. Med D3.js kan vi till exempel ge outliers en specifik färg eller använda olika färger för negativa och positiva värden. Datavisualiseringar blir mycket tydligare när färger används på ett intelligent sätt, särskilt när det finns många datapunkter. Färgkodning kan också användas för att visa den övergripande strukturen i en datavisualisering.

Färger kan också hjälpa till med interaktioner. Färgen på en datapunkt, stapel eller linje kan ändras när man för muspekaren över den, vilket understryker att den har valts.

Grid för data

Data för ett D3js-diagram eller -graf kommer vanligtvis från en av tre källor. Om det är osannolikt att data ändras särskilt ofta kan de lagras i en JSON- eller CSV-fil på servern. Om data kommer från en lokal databas måste databasen uppdateras direkt, antingen med ett anpassat gränssnitt eller med ett databasverktyg, t.ex. DBeaver. Vi kan ordna detta åt dig.

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.

En variant av ett datanät är ett formulär: detta fungerar ungefär som kontaktformuläret på en webbplats. Detta kan vara mer lämpligt när data måste matas in av personal som inte är bekant med ett datanät.

Element i användargränssnittet

Även om D3.js erbjuder en begränsad uppsättning användargränssnittsverktyg är det bättre att koda dessa med hjälp av antingen ett komponentbibliotek, som MUI, eller som vanlig HTML.

De mest användbara gränssnittselementen är radioknappar och kryssrutor. Dessa förväxlas ibland. Radioknappar, som de som visas i detta staplade stapeldiagram, låter användarna välja mellan en uppsättning alternativ som utesluter varandra: i det här fallet kan de välja en enda datauppsättning, som visas som ett enkelt stapeldiagram, eller flera datauppsättningar, som visas som ett staplat stapeldiagram. Men de kan också användas för att ändra hur data visas. I denna Sunburst-datavisualisering påverkar radioknapparna hur färg används för att lyfta fram olika aspekter av datauppsättningen.

Kryssrutor, å andra sidan, tillåter användare att välja vilken permutation av alternativ som helst: i det här fallet är alternativen inte ömsesidigt uteslutande. I exemplet med kryssrutor kan <Länk>Line Chart data visualization</Länk> visa bara en datauppsättning, två datauppsättningar eller alla tre. Detta är mycket användbart när användare behöver göra specifika jämförelser mellan par av datauppsättningar: de kanske till exempel vill jämföra värden för hjärtoperationer med leveroperationer, och ta bort värdena för mjälteoperationer för att förbättra tydligheten.

Ett annat UI-element som är användbart för att förbättra D3.js-datavisualiseringar är en vippströmbrytare. Detta används när diagrammet kan vara i ett av två tillstånd, eller när du vill ge användarna möjlighet att byta ut en del av datavisualiseringen för att förbättra tydligheten. I det här exemplet används en vippbrytare för att <Link> växla mellan ett linjediagram och ett ytdiagram</Link>.

Slutligen kan reglage användas. Dessa fungerar särskilt bra när en datavisualisering innehåller datauppsättningar från olika tidsperioder. De gör att användarna intuitivt kan flytta fram och tillbaka längs tidslinjen, som i denna Sankey-datavisualisering