Tässä viivakaaviossa näkyvät samat tiedot kuin pylväskaaviossa, mutta siinä käytetään pisteitä merkitsemään datapisteitä ja viivoja yhdistämään niitä. Vaihtokytkimellä (luotu MUI:ssa) vaihdetaan yksinkertaisen viivakaavion ja aluekaavion välillä. Molemmissa datan visualisoinneissa käytetään lähes samaa D3.js-koodia.
Aluekaaviot toimivat paremmin datan visualisointina, kun kyseessä on yksittäinen datajoukko: ne auttavat käyttäjiä näkemään datapisteiden edustaman kokonaisarvon selkeämmin, koska se on verrannollinen tummennetun alueen kokoon. Kun datapisteitä on kuitenkin useita, tummennetut alueet voivat olla sekavia, koska yksi alue voi peittää sen takana olevat alueet. D3.js mahdollistaa tämän täydellisen hallinnan: voimme esimerkiksi vähentää joidenkin tai kaikkien alueiden peittävyyttä tai jopa vähentää niiden alueiden peittävyyttä, jotka ovat päällekkäin alla olevien alueiden kanssa. Aluekaaviot voivat olla myös hämmentäviä, kun niissä näytetään negatiivisia arvoja, mutta D3.js tarjoaa keinoja tämän ongelman ratkaisemiseksi, kuten eri värien käyttäminen positiivisille ja negatiivisille arvoille.
Kuten esimerkissä Palkkikaavio, on mahdollista käyttää käyttöliittymäohjaimia keskittymään tiettyyn tietosarjaan tietovisualisoinnissa ja linkittää tämä D3.js-koodiin. Tässä tapauksessa käytetään kuitenkin valintaruutuja eikä valintapainikkeita. Radiopainikkeilla on valittava vain yksi vaihtoehto, mutta valintaruuduilla jokainen ruutu voidaan valita tai poistaa valinta muista riippumatta. Tämän käyttöliittymän avulla on siis mahdollista valita mikä tahansa tietosarjojen permutaatio: esimerkiksi mikä tahansa yksittäinen elin, mikä tahansa kaksi elintä tai kaikki kolme elintä. Tämän koodaaminen on hieman monimutkaisempaa, varsinkin kun datapisteitä on enemmän kuin pieni määrä.
D3.js:n avulla voimme myös valita tietojen yhdistämiseen käytettävän käyrän. Tyypillisesti valitsemme datan visualisointiin sopivimman käyrän ja koodaamme sen kovakoodilla. Havainnollistaaksemme, mitä on mahdollista, olemme kuitenkin lisänneet joukon valintapainikkeita, jotta käyttäjät voivat valita omansa. Jotkin käyrät, kuten Catmull-Rom, kulkevat kaikkien datapisteiden läpi, kun taas toiset, kuten Curve Basis, eivät. Sen hyvä puoli, että kaikki datapisteet eivät kulje läpi, on se, että datan trendejä on mahdollista näyttää hyvin. Sitä vastoin Catmull-Rom-käyrä sisältää kaikki varsinaiset datapisteet, mutta sisältää ylityksiä ja alituksia, mikä vaikeuttaa trendien havaitsemista.
D3.js:n viivakaavion tai aluekaavion kustannukset riippuvat suuresti siitä, missä määrin se on koodattava mukautetusti. Lisäosat, kuten työkaluvihjeet, mukautetut animaatiot ja niin edelleen, lisäävät kustannuksia hieman, mutta parantavat käyttäjäkokemusta huomattavasti. Hinnat -sivulta saat yleiskuvan. Hinnat -sivulla saat yleiskuvan. Ota kuitenkin yhteyttä meihin, jotta voimme keskustella ilmaiseksi kehittäjän kanssa ja selvittää, mikä on sinulle parasta.