Johdanto

DynamicD3 tarjoaa räätälöityjä datan visualisointeja D3.js:n avulla. Autamme sinua valitsemaan yhdessä tehokkaimman tavan näyttää tietosi: tämä voi sisältää palkkikaavioita, viivakaavioita, piirakkakaavioita, sankey-diagrammeja tai eksoottisempia tietovisualisointeja, kuten kloropletteja, kuplakaavioita tai Sunburst-diagrammeja.

D3.js-datan visualisoinnit voivat sisältää suuren määrän Lisäominaisuuksia, kuten työkaluvihjeitä, zoomauksia, hiiren yliohjauksia ja animaatioita. Nämä auttavat käyttäjiä ymmärtämään tietoja intuitiivisemmin ja tarjoavat mukaansatempaavan kokemuksen, joka ei ole mahdollista staattisilla tietovisualisoinneilla. Voimme myös luoda mukautetun käyttöliittymän - käyttämällä valintapainikkeita, valintaruutuja, liukusäätimiä tai vaihtokytkimiä - jotka laajentavat vuorovaikutteisten kokemusten valikoimaa entisestään.

Saat joko tavallisen JavaScriptin, jonka voit lisätä suoraan verkkosivustoosi, tai React-komponentin. Perustamme yksinkertaisen ilmaisen verkkosivun demoksi. Vaihtoehtoisesti voimme luoda tietoruudukon, jotta voit päivittää tietojasi helposti.

D3.js voi käyttää tietoja staattisesta JSON- tai CSV-tiedostosta, tai se voi ottaa tietoja API:sta. Voimme myös luoda tietoruudukon, jotta voit päivittää tietoja helposti.

Palkkikaaviot

Pylväsdiagrammeja käytetään yleensä kategoristen tietojen esittämiseen, kuten tämä esimerkki, jossa verrataan kolmen tietyn elimen leikkausten määrää suuressa sairaalassa.

Huomaa, että pylväsdiagrammi ei ole sama kuin histogrammi, vaikka ne näyttävätkin samankaltaisilta. Histogrammi ei sisällä kategorisia tietoja, kuten maita (joissa datapiste kuuluu yksiselitteisesti yhteen tai toiseen luokkaan). Pikemminkin siinä esitetään tietoja, jotka muodostavat jatkumon, mutta jotka on jaoteltu eri alueisiin, joita kutsutaan binneiksi. Esimerkiksi tietokokonaisuus, jonka x-akselilla on etäisyys tietystä pisteestä, voidaan jaotella vaihteluväleihin. Nämä alueet ovat kuitenkin mielivaltaisia, ja ne valitaan yleensä tietojen selkeän esittämisen vuoksi.

D3.js:ää voidaan käyttää joko pylväsdiagrammiin tai histogrammiin, ja kumpikin näistä voi esittää yhden tai useamman datasarjan. Sitä voidaan käyttää myös jatkuvien tietojen esittämiseen. Tämä on kuitenkin tarkoituksenmukaisempaa esittää viivakaaviossa tai hajontakaaviossa.

Viivakaaviot

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

Viivakaaviot ovat erityisen käyttökelpoisia, kun halutaan näyttää useita tietosarjoja, jotka liittyvät toisiinsa jollakin tavalla. Näissä tietokokonaisuuksissa käytetään yleensä samaa x-akselia, mutta niillä voi olla eri mittakaavat ja eri y-akselit. Ne ovat erityisen hyödyllisiä, kun halutaan nähdä suuntauksia eri tietojoukoissa (esimerkiksi vertailla, milloin eri maissa on sairauspiikki). Tässä esimerkissä käytetään käyttöliittymää vaihtamaan eri tietokokonaisuuksien yhdistelmien välillä. Huomaa, että D3.js voi säätää pystyakselin mittakaavaa automaattisesti tietojen muuttuessa.

Toinen viivakaavioiden vahvuus on kyky analysoida trendejä tehokkaasti. Voidaan piirtää käyrä, joka kulkee jokaisen pisteen kautta tai joka osoittaa lyhyen tai pidemmän aikavälin suuntaukset. Edellä linkitettyyn esimerkkiin on lisätty käyttöliittymä, jotta käyttäjät voivat tutkia tietoaineistoa eri tavoin eri käyrien avulla.

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

Piirakkakaaviot

Piirakkakaaviossa kunkin viipaleen kulma on verrannollinen sen edustamaan määrään. Piirakkakaaviot ja donitsikaaviot ovat samoja, paitsi että donitsikaavioissa on keskellä reikä, joka voi sisältää tietoja. Donut-kaavioissa voi olla useita renkaita, jotka osoittavat data-arvojen hierarkian; tämäntyyppistä kaaviota kutsutaan kuitenkin Sunburst-diagrammiksi.

Piirakkakaavioita käytetään yleisesti sanomalehdissä. Vaikka ne ovat tuttuja ja helppotajuisia, ne eivät kuitenkaan ole paras tapa esittää suhteellisia tai kategorisia tietoja, koska eri arvoja on vaikea verrata keskenään (toisin kuin pylväsdiagrammissa, jossa suorakulmioiden korkeuksia voidaan verrata helposti). Ne ovat kuitenkin hyödyllisiä, kun tiedot edustavat osuutta kokonaisarvosta. Suhteet voidaan esittää myös pylväsdiagrammeilla, mutta se ei ole yhtä intuitiivisesti selvää.

Piirakan metaforaa voidaan laajentaa piirtämällä yksi pala piirakasta ulos. Tämä voidaan tehdä staattisesti tai hiiren yli -efektin avulla, kuten Piirastaulukko -sivulla on esitetty. Tätä kutsutaan räjäytetyksi piirakkakaavioksi. Tarkempia tietoja voidaan antaa räjäytetystä osasta.

Sunburst-kaaviot

Sunburst-kaaviot ovat eräänlainen monitasoinen piirakkakaavio. Niitä kutsutaan joskus säteittäisiksi puukartoiksi, koska tiedot ovat samassa hierarkkisessa rakenteessa kuin perinteisessä puukartassa.

Tämäntyyppinen tietojen visualisointi näyttää hierarkian renkaiden avulla, jotka on viipaloitu kunkin luokkasolmun kohdalla. Kukin rengas vastaa hierarkiatasoa, ja keskimmäinen ympyrä edustaa juurisolmua, josta hierarkia etenee ulospäin. Esimerkiksi tämässä esimerkissä toimintatyypit on jaettu. Ensimmäinen rengas jakaa operaatiot sen mukaan, mihin elimeen ne vaikuttavat. Seuraava rengas jakaa jokaisen näistä osista hoitotyypin mukaan (konservatiivinen, leikkaus, elinsiirto tai lääkkeet), ja seuraava rengas osoittaa, oliko potilailla vakuutus vai ei. Hiiren liikuttaminen näyttää taustalla olevat arvot alareunassa olevassa näytössä. Tämä tarkoittaa, että käyttäjät voivat tutkia tietoja liikkumalla näytöllä. He voivat esimerkiksi haluta tietää, miten munuaishoitoa saaneiden potilaiden osuus vaihteli vakuutusturvan mukaan.

Väriä voidaan käyttää korostamaan hierarkkisia ryhmiä tai tiettyjä luokkia. Yllä olevassa esimerkissä käyttäjä voi muuttaa värimaailmaa korostaakseen tietokokonaisuuden eri näkökohtia. Ensimmäisessä esimerkissä käytetään eri värisävyjä kullekin renkaalle. Tämä helpottaa kussakin renkaassa esitettyjen tietojen ymmärtämistä ja tekee samalla osioiden rajat selviksi. Tämä ei kuitenkaan toimi suurissa aineistoissa. Tällöin on selkeämpää, jos kaikilla tietyn renkaan osilla on sama sävy. Joissakin tapauksissa voidaan käyttää satunnaisia värejä. Niiden avulla on vaikeampi ymmärtää hierarkian kunkin tason merkitystä, mutta eri sektorit ovat helpommin havaittavissa. Käyttöliittymän näyttö esimerkissä Sunburst vaihtelee näiden vaihtoehtojen välillä.

Sankey-kaavio

Sankey-kaavioita käytetään kuvaamaan virtausprosesseja, kuten rahavirtaa organisaatiossa (kuten tilinpäätöksessä näkyy), energian tai raaka-aineiden virtausta teollisuusprosessien kautta tai abstraktimman hyödykkeen, kuten tiedon, virtausta. Kunkin solmun korkeus tai leveys edustaa kyseisen solmun läpi kulkevan virtauksen kokonaismäärää, ja kunkin solmuparin välisten viivojen paksuus edustaa näiden solmujen välillä kulkevan virtauksen määrää. Väriä voidaan käyttää joko osoittamaan virtauksen määrää (esimerkiksi käyttämällä värisävyjä) tai osoittamaan jotakin muuta prosessin näkökohtaa, kuten tämässä Sankey-diagrammissa, jossa käytetään värejä havainnollistamaan pakolaisvirtaa.

Eräs ala, jolla Sankeytä käytetään usein, on energia-ala. Niissä voidaan esimerkiksi esittää maakaasun lähde maittain, keinot, joilla se pääsee määränpäähänsä (putki, laiva jne.), ja sitten sen käyttö (loppukäyttäjät). Tällaiset kaaviot ovat hyödyllisiä poliittisille päättäjille, koska ne tuovat esiin alueita, joilla tehokkuutta voidaan parantaa.

Sankey-diagrammit ovat erityisen intuitiivinen tapa esittää ajallisia muutoksia. Tämässä Sankey-diagrammissa on esitetty pakolaisten virta eri alkuperämaista Yhdysvaltoihin tietyn ajanjakson aikana. Liukusäätimen avulla käyttäjät voivat liikkua aikajanalla, ja sujuvien siirtymien ansiosta solmuja on helppo seurata, kun niiden merkitys kasvaa tai laskee.

Chloropleth

Choroplethissa käytetään värejä osoittamaan, miten muuttuja vaihtelee maantieteellisellä alueella. Ne ovat samanlaisia kuin lämpökartat, mutta toisin kuin jälkimmäiset, ne jakavat kartan maantieteellisiin alayksiköihin, kuten maihin, osavaltioihin, maakuntiin tai piirikuntiin.

Kloropletissa käytetyissä arvoissa on otettava huomioon alueiden vaihteleva koko. Esimerkiksi eri maiden koossa on suuria eroja, joten ei ole järkevää värittää maita pelkästään niiden väkiluvun perusteella. Sen sijaan nämä tiedot "normalisoitaisiin" eri alueiden välillä käyttämällä väestötiheyttä eikä absoluuttista väkilukua. Molemmissa esitystyypeissä tummemmat tai voimakkaammat värit edustavat yleensä korkeampia arvoja, kun taas vaaleammat tai vaaleammat värit ilmaisevat matalampia arvoja.

Valitettavasti reaalimaailman tietoja ei yleensä jaeta luonnollisiin luokkiin. Esimerkiksi kloropletti, jossa värin voimakkuus olisi verrannollinen väestötiheyteen, voisi toimia, kun eri alueiden väestötiheydet eroavat samankaltaisesti toisistaan (esimerkiksi saman Yhdysvaltain osavaltion eri piirikuntien välillä). Usein aineisto sisältää kuitenkin arvoja, jotka ovat kertaluokkaa suurempia kuin muut saman aineiston arvot. Onneksi D3.js:ssä on runsaasti asteikkoja. Joissakin tapauksissa log-asteikko saattaa olla sopivampi: tämä näyttää pienet erot hyvin, mutta näyttää myös paljon suuremmat erot. Toisissa tapauksissa yhtä väriä voitaisiin käyttää tietyn kynnysarvon ylittävien tai alittavien arvojen näyttämiseen. Juuri tämä suuri joustavuus tekee D3.js:stä niin tehokkaan työkalun datan visualisointiin.

Sen lisäksi, että D3.js auttaa meitä skaalaamaan tietoja, se mahdollistaa myös monenlaisten karttaprojektioiden käytön: niillä on suuri vaikutus siihen, miten tiedot näkyvät. Muilla kirjastoilla tuotetut kloropletit käyttävät usein vakioprojektioita, kuten Mercatorin projektiota, mikä voi johtaa suuriin vääristymiin tietyissä osissa maailmaa. Tämä ei ole yhtä suuri ongelma, jos kartalla esitetään pienempiä alueita, kuten Yhdistyneen kuningaskunnan kreivikuntia, tai jos kaikki esitetyt alueet ovat samalla leveysasteella.

Lopuksi on mahdollista käyttää kahta erillistä (mutta toisiinsa liittyvää) dataa, joilla kummallakin on eri väriasteikko. Tätä kutsutaan kaksiulotteiseksi Cloroplethiksi.

Kuplakaavio

Kuplakaaviot ovat kuin sirontakuvioita, joissa tiedot on korvattu ympyröillä. Siinä missä hajontakuvio voi käyttää vain pisteen sijaintia ja väriä tiedon esittämiseen, kuplakaaviossa on myös vaaka- ja pystyulottuvuus. Tämän vuoksi kuplakaaviot soveltuvat erityisen hyvin moniulotteisten suhteiden esittämiseen.

Jos kustakin ympyrästä on näytettävä vain yksi ylimääräinen tieto, se voidaan esittää ympyrän pinta-alana. Tämä voi kuitenkin olla ongelmallista, koska käyttäjillä on taipumus arvioida ympyröiden suhteellista kokoa pikemminkin niiden halkaisijan kuin pinta-alan perusteella. On tärkeää tehdä tämä selväksi legendassa.

Kuplakaaviot toimivat huonommin, kun datapisteitä on paljon ja kun datan vaihteluväli on suuri. Kun datapisteitä on liikaa, näyttö voi näyttää ahtaalta ja kuplat voivat mennä päällekkäin. Kun tietokokonaisuudessa on suuri arvoalue, pienemmät kuplat eivät välttämättä näy selvästi. Nämä ongelmat voidaan jossain määrin ratkaista käyttämällä hiiren yli -vuorovaikutusta, joka antaa lisätietoa, kuten taustalla olevan datapisteen tarkan arvon.

Viimeinen ongelma kuplakaavioissa on painotetun keskiarvon harha: kuplien koot vaikuttavat datapisteen x- ja y-arvojen hahmottamiseen. Tämä vääristymä on otettava huomioon arvioitaessa x- ja y-keskiarvoja.

Kuplakaaviot, joissa on esitettävä negatiiviset arvot, voidaan luoda joko käyttämällä negatiivisia arvoja kuvaavien kuplien keskellä olevaa symbolia, eri värejä positiivisille ja negatiivisille arvoille tai jopa eri muotoja. D3.js:n avulla tämä joustavuus on mahdollista, mutta näin ei ole useimpien datan visualisointikirjastojen kohdalla.