Add-Ons

Työkaluvihjeet

Voimme lisätä työkaluvihjeitä mihin tahansa kaavioon tai kuvaajaan. Ne ovat erityisen hyödyllisiä, kun datapisteitä on paljon (esimerkiksi hajontakuvio). Pienemmissäkin tietokokonaisuuksissa ne auttavat selkeyttämään kaaviota, jolloin käyttäjät voivat keskittyä yleisiin kuvioihin.

Ne ovat hyödyllisiä myös monimutkaisissa kaavioissa, joissa kaavion eri osat ilmaisevat eri näkökohtia tietokokonaisuudesta, mikä ei välttämättä ole selvää käyttäjille, jotka eivät tunne tämäntyyppisiä kaavioita. Esimerkiksi tässä Sunburst-diagrammissa käyttäjät voivat hiirellä segmenttien päällä nähdä sekä taustalla olevan datapisteen että sen kontekstin. Tässä tapauksessa Sunburst-diagrammi jakaa lääketieteelliset hoidot tyypin, elimen, johon ne vaikuttavat, ja potilaan vakuutustilanteen mukaan. Nämä tiedot näkyvät näytön alareunassa ja muuttuvat, kun käyttäjä siirtyy hiirellä kunkin segmentin päälle.

Yksi D3:n suurista vahvuuksista on sen suuri joustavuus. Työkaluvihje voi sisältää mitä tahansa tietoa, joka on tietosarjassa, asiayhteyteen liittyvää tekstiä tai jopa arvoja kokonaan toisesta tietosarjasta. Esimerkiksi tämä Sankey näyttää käyttäjille, että solmut edustavat pakolaisten kokonaismäärää, kun taas viivat edustavat kunkin lähtömaan (tässä tapauksessa maa) ja määränpään (tässä tapauksessa Yhdysvaltojen osavaltio) välillä liikkuvien pakolaisten määrää. Teksti voi olla millä tahansa kielellä, mikä auttaa huomattavasti lokalisoinnissa.

Kun näytössä käytetään kahta tai useampaa tietoaineistoa, työkaluvihjeet voivat näyttää niiden väliset vertailut. Niissä voidaan esimerkiksi näyttää sekä tämän vuoden että viime vuoden arvo tai eri alueiden tietokokonaisuudet. Sitä vastoin, kun kyseessä on yksi ainoa tietokokonaisuus, niitä voidaan käyttää luottamusvälien, prosenttiarvojen tai muiden datapisteisiin liittyvien tilastotietojen näyttämiseen, mikä auttaa käyttäjiä arvioimaan tietojen luotettavuutta.

Työkaluvihjeiden toinen etu on se, että ne ovat hauskoja! Ne parantavat vuorovaikutteisuutta, sillä ne antavat käyttäjille mahdollisuuden tutustua kaavioon ja tutkia tietoja omilla ehdoillaan.

Zoomit

Zoomauksen avulla käyttäjät voivat suurentaa kuvaajan tai kaavion tiettyjä alueita tutkiakseen datapisteitä ja trendejä tarkemmin. Tämä on erityisen hyödyllistä suurten tietokokonaisuuksien kohdalla. Se on hyödyllistä myös silloin, kun käyttäjät ovat kiinnostuneita tietokokonaisuuden eri osa-alueista: jotkut käyttäjät saattavat esimerkiksi haluta keskittyä tiettyyn ajanjaksoon.

Zoomauksen avulla käyttäjät voivat myös tehdä yksityiskohtaisia vertailuja tietokokonaisuuden eri osien välillä. He voivat tutkia tietoja vuorovaikutteisesti zoomaamalla yhteen alueeseen ja siirtymällä sitten toiselle alueelle. Tämä auttaa heitä näkemään korrelaatiot, poikkeamat ja mallit selkeämmin.

Toinen zoomauksen etu on se, että sen avulla käyttäjät voivat käyttää pienempiä laitteita, kuten älypuhelimia, nähdä koko tietokokonaisuuden, mutta silti nähdä tarvitsemansa yksityiskohdat. Älypuhelinten käyttäjät ovat tottuneet zoomaamaan näyttöä nipistämällä.

Zoomauksen avulla voidaan myös parantaa näkövammaisten henkilöiden saavutettavuutta.

Harjat

Harjaus toimii samalla tavalla kuin zoomaaminen, sillä se tarjoaa käyttäjille tavan toimia vuorovaikutteisesti osassa tietoaineistoa. Kaavion osan suurentamisen sijaan tämä alue ei kuitenkaan muuta kokoaan. Harjausalue voidaan osoittaa jollakin muulla tavalla, esimerkiksi muuttamalla sen väriä.

Tietojen suodattamiseen voidaan käyttää sivellintä - käyttäjät voivat esimerkiksi sivellä aluekuvion x-akselia pitkin hiirtä liikuttamalla. Harjatun alueen voisi sitten näyttää näytön toisessa osassa. Toinen tapa käyttää sivellintä on lisätä erillinen kaavio, joka näyttää samat tiedot eri mittakaavassa. Tässä tilanteessa sivellin toimii samalla tavalla kuin zoomaus. Sitä voi kuitenkin olla helpompi käyttää, koska alkuperäisen kuvaajan mitat eivät muutu.

Animaatiot

Animaatiot auttavat monin tavoin. Esimerkiksi yksinkertaisessa pylväsdiagrammissa pylväät voivat liukua ylöspäin hitaasti sen sijaan, että ne ilmestyisivät välittömästi. Tämä lisää hyvin vähän kaavion tietosisältöä, mutta tekee siitä käyttäjien kannalta mielenkiintoisemman.

Animaatioilla on vakavampi rooli, kun niitä käytetään siirtymissä. Esimerkiksi Tämä Sankey-kaavio näyttää tietoja usealta vuodelta. Kun käyttäjä siirtyy liukusäätimellä vuodesta toiseen, solmujen suhteelliset koot muuttuvat. Ne liikkuvat, koska ne on järjestetty kokojärjestykseen. Ilman animaatiota muutos olisi häiritsevä, ja olisi vaikea säilyttää "kohteen pysyvyys". Käyttäjä saattaa olla kiinnostunut esimerkiksi siitä, miten tietystä maasta tulevien pakolaisten virta (tässä tapauksessa pakolaisten virta) muuttuu vuodesta toiseen. Jos tämä solmu hyppäisi ympäriinsä ilman tasaista siirtymää, tätä olisi vaikea toteuttaa.

Toinen esimerkki siirtymästä on esitetty Tämä piirakkakaavio. Kun hiirellä osoitetaan segmenttiä, se siirtyy hieman ulospäin. Käyttämällä pehmeää siirtymää tämä liike vaikuttaa luonnolliselta ja auttaa säilyttämään piirakan metaforan. Ilman sitä tämä piirakkakaavion osa hyppäisi paikasta toiseen. Samasta syystä animaatiot toimivat erityisen hyvin, kun näytetään aikasarjatietoja, kuten pörssikellon arvoja. Hyötynä on jälleen se, että silmän on helpompi seurata tiettyä arvoa sen muuttuessa.

Kun animaatiota käytetään siirtymiin tietojoukkojen välillä ja näitä siirtymiä ohjataan käyttöliittymällä, kuten <TransLink>tämä liukusäädin</TransLink>, käyttäjä voi tutkia arvoja melkein kuin videonäytöllä.

Värit

Koska D3-kuvaajat ja -kaaviot luodaan JavaScriptillä, värit on mahdollista määrittää funktiolla. Tämä tarkoittaa, että värejä voidaan käyttää tavoilla, jotka eivät ole mahdollisia muissa datan visualisointikirjastoissa.

Värin ilmeisin käyttötapa on erottaa toisistaan eri tietokokonaisuudet - esimerkiksi tässä Palkkikaaviossa on tietoja useista samankaltaisista tietokokonaisuuksista. Käyttämällä eri värejä kullekin tietokokonaisuudelle ja selittämällä näiden värien merkitys legendassa on mahdollista yhdistää ne samaan kaavioon.

Väriä voidaan käyttää myös samankaltaisten arvojoukkojen ryhmittelyyn. Esimerkiksi tämä Sunburst-diagrammi näyttää tietojen hierarkian. Jokainen rengas edustaa eri tasoa hierarkiassa. Väriä käyttämällä voimme ryhmitellä samaan tasoon kuuluvia arvoja ja selittää ne legendassa.

Toinen D3:n etu on se, että värin kylläisyyttä ja sävyä voidaan vaihdella. Esimerkiksi tässä Sunburst-diagrammissa (ylin esimerkki) värin kylläisyys vaihtelee kussakin osassa, kun taas saman renkaan kaikissa osissa on sama väri. Tässä tapauksessa intensiteetti on yksinkertaisesti satunnaistettu, jotta yksittäiset sektorit erottuisivat paremmin toisistaan (vertaa tätä esimerkkiin, jossa renkaan jokaisella sektorilla on sekä sama sävy että sama kylläisyys). Kylläisyys voi kuitenkin liittyä myös taustalla olevaan datapisteeseen. Tässä tapauksessa on parempi, jos sektoreita ei järjestetä koon mukaan, sillä muuten pienempiä sektoreita on liian vaikea erottaa toisistaan.

Toinen esimerkki, jossa väriä on käytetty kaavion selkeyttämiseksi, on tämä Sankey-kaavio. Kahdessa ylimmässä esimerkissä yhtä väriä käytetään kuvaamaan alkuperäsolmuja ja toista väriä kuvaamaan kohdesolmuja. Lisäksi värin tiheys edustaa kunkin solmun kokoa. Samoja värejä käytetään myös yhdysviivoissa. Näin ollen solmujen edustamien arvojen ja yhdysviivojen edustamien arvojen välillä on selvä yhteys. Kahdessa viimeisessä esimerkissä käytetään kahta väriä, ja taustalla olevat tietoarvot esitetään näiden kahden värin suhteellisilla arvoilla. Tämä voi joskus olla selkeämpää, erityisesti silloin, kun tietoarvojen väliset erot ovat hienovaraisia.

Väriä voidaan joskus käyttää vain erottamaan kaavion osia toisistaan ilman taustalla olevaa merkitystä. Tämä on tilanne kolmannessa esimerkissä Sunburst-diagrammista. Värit on valittu siten, että Sunburst-diagrammin sektorien väliset rajat näkyvät selvästi. Tämä on erityisen hyödyllistä silloin, kun arvot ovat pieniä ja sektorit ovat hyvin kapeita.

Toinen tapa, jolla väriä voidaan käyttää, on erottaa tietyt datapisteet toisistaan. Tämä voidaan yhdistää harjaan (ks. edellä). Sivelemällä kuvaajaa siveltimellä käyttäjät voivat suodattaa datapisteitä. Suodatetut arvot voidaan näyttää eri värillä, joka voidaan linkittää erilliseen legendaan.

Myös ilman sivellintä värit voivat olla hyödyllisiä tiettyjen arvojen korostamisessa. Esimerkiksi D3.js:n avulla voimme tehdä poikkeavista arvoista tietyn värisiä tai käyttää eri värejä negatiivisille ja positiivisille arvoille. Datan visualisoinnista tulee paljon selkeämpää, kun värejä käytetään älykkäästi, etenkin kun datapisteitä on paljon. Värikoodausta voidaan käyttää myös osoittamaan datan visualisoinnin yleistä rakennetta.

Värit voivat myös auttaa vuorovaikutuksessa. Tietopisteen, palkin tai viivan väri voi muuttua, kun hiiren kursori siirretään sen päälle, jolloin korostuu, että se on valittu.

Tietoverkko

D3js-kaavion tai -graafin tiedot tulevat yleensä jostain kolmesta lähteestä. Jos tiedot eivät todennäköisesti muutu kovin usein, ne voidaan tallentaa JSON- tai CSV-tiedostoon palvelimelle. Jos tiedot tulevat paikallisesta tietokannasta, tietokanta on päivitettävä suoraan joko mukautetulla käyttöliittymällä tai tietokantatyökalulla, kuten DBeaverilla. Voimme järjestää tämän puolestasi.

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.

Tietoruudukon muunnelma on lomake: se toimii samalla tavalla kuin verkkosivuston yhteydenottolomake. Tämä voi olla tarkoituksenmukaisempi, kun tietoja joutuu syöttämään henkilökunta, joka ei ole perehtynyt tietoruudukkoon.

UI-elementit

Vaikka D3.js tarjoaa rajallisen määrän käyttöliittymätyökaluja, on parempi koodata ne joko käyttämällä komponenttikirjastoa, kuten MUI:ta, tai tavallista HTML:ää.

Hyödyllisimpiä käyttöliittymäelementtejä ovat valintapainikkeet ja valintaruudut. Nämä sekoitetaan joskus keskenään. Radiopainikkeet, kuten tässä Pinoistettu pylväsdiagrammi, antavat käyttäjille mahdollisuuden valita toisensa poissulkevien vaihtoehtojen joukosta: tässä tapauksessa he voivat valita yhden datajoukon, joka näkyy yksinkertaisena pylväsdiagrammina, tai useita datajoukkoja, jotka näkyvät pinoistettuna pylväsdiagrammina. Niitä voidaan kuitenkin käyttää myös muuttamaan tietojen esittämistapaa. Tässä Sunburst -datan visualisoinnissa valintapainikkeet vaikuttavat siihen, miten värejä käytetään tuomaan esiin tietokokonaisuuden eri puolia.

Valintaruudut taas antavat käyttäjille mahdollisuuden valita minkä tahansa vaihtoehtojen yhdistelmän: tässä tapauksessa vaihtoehdot eivät ole toisiaan poissulkevia. Valintaruutuesimerkissä <Link>Line Chart -datanäkymä, voi näyttää vain yhden tietokokonaisuuden, kaksi mitä tahansa tietokokonaisuutta tai kaikki kolme. Tämä on erittäin hyödyllistä silloin, kun käyttäjien on tehtävä erityisiä vertailuja tietoparien välillä: he saattavat esimerkiksi haluta verrata sydänleikkausten ja maksaleikkausten arvoja ja poistaa pernaleikkausten arvot selkeyden parantamiseksi.</Link>

Toinen käyttöliittymäelementti, joka on hyödyllinen D3.js-datanäkymien parantamisessa, on vaihtokytkin. Tätä käytetään, kun kaavio voi olla jommassakummassa tilassa tai kun käyttäjille halutaan antaa mahdollisuus vaihtaa osa datan visualisoinnista pois selkeyden parantamiseksi. Tässä esimerkissä vaihtokytkintä käytetään <Link> vaihtamaan viivakaavion ja aluekaavion välillä</Link>.

Lopuksi voidaan käyttää liukusäätimiä. Ne toimivat erityisen hyvin, kun tietovisualisointi sisältää tietoaineistoja eri ajanjaksoilta. Niiden avulla käyttäjät voivat intuitiivisesti siirtyä edestakaisin aikajanalla, kuten tässä Sankey-datanäkymässä.