PÄIVITYS: Vaikka monet tässä 2012 julkaistussa artikkelissa esitellyistä työkaluista ovat edelleen tehokkaita ja ne ovat kehittyneet entistä hyödyllisemmiksi, saatat olla kiinnostunut uudemmasta sarjastamme vuorovaikutteisista datan visualisointityökaluista.
monimutkaiset datan visualisointityökalut
Tervetuloa vuorovaikutteisen datan visualisointityökaluja käsittelevän sarjani toiseen osaan. Ensimmäisessä osassa käsiteltiin kolme hienoa työkalua, joilla voi visualisoida kaavioita ja graafeja sekä monia muita tietotyyppejä verkkosivulla. Toisessa osassa tarkastelemme kolmea muuta työkalua, jotka ovat hieman monimutkaisempia, mutta joilla on uskomattomat datan visualisointiominaisuudet.
- jQuery Visualize (osa 1)
- Google Charts (osa 1)
- Highcharts (osa 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit on erittäin vankka ja muokattavissa oleva tarjous. Yksi sen tärkeimmistä vahvuuksista on ainutlaatuinen lähestymistapa tietojen esittämiseen. Helppokäyttöisten suodatus-, lajittelu- ja hakutyökalujen lisäksi sen avulla voit käyttää HTML-mallia (jota kutsutaan Exhibitissa ”linssiksi”), jonka avulla saat kaiken sivulla olevan juuri haluamasi näköiseksi. Se on melkein kuin datavizien mini-CMS, jossa voit käyttää tietoja attribuuttiarvojen kautta suoraan linssissä. Projekteissa, jotka vaativat suurta herkkyyttä ulkoasun suhteen, tämä äärimmäinen joustavuus datan visualisointien rakentamisessa on fantastista.
- Tuetut visualisointityypit: JSON, Taulukkolaskenta
- Tietojen tulostaminen: HTML
- Muotoiluvaihtoehdot: CSS
- Tyyppi: Javascript-kirjasto
PROS
Joustava & Tehokas lähestymistapa suunnitteluun
Pidän todella Exhibitin lähestymistavasta, jossa tiedot esitetään ”linssin” – HTML-mallin kuoren – läpi, johon elementit sijoitetaan. Tämä tekee järjestelmästä täysin muokattavan ja CSS-tyylitettävän, mikä tarkoittaa, että suunnittelijat rakastavat sitä, ja johdonmukaisuuden luominen asiakkaiden brändeille on lastenleikkiä.
Vahva suodatus/lajittelu/haku
Käyttäjien antaminen suodattaa tietojasi millä tahansa määrällä kriteerejä on uskomattoman hyödyllistä, ja se tekee tiedoistasi staattisesta sisällöstä todellisen vuorovaikutteisen ominaisuuden. Suodatus on sisäänrakennettu suoraan Exhibitiin ja se on helppo toteuttaa. Palvelinpuolen suodattaminen voi olla työlästä (puhumattakaan kalliista), joten Exhibit erottuu edukseen siinä, että se tekee käyttäjien suodattamisesta uskomattoman nopeaa ja helppoa. Sama pätee lajitteluun ja hakuun. Exhibit tekee erittäin helpoksi antaa sivustosi käyttäjille hallinnan siitä, että he saavat juuri sen näkymän tiedoistasi, jonka he haluavat, ja siten arvokkaamman ymmärryksen siitä, miksi se on tärkeää.
Vahva dokumentaatio
Kompleksisiin dataviz-työkaluihin hyppääminen voi olla hankalaa, ja se vaatii jonkin verran kokeilua ja erehdyksiä. Exhibit todella nopeuttaa prosessia loistavalla dokumentaatiolla verkkosivustollaan ja muutamilla erinomaisilla aloittelijoille suunnatuilla opetusohjelmilla.
Widgetit!
Tahdotko viedä Exhibitin vielä pidemmälle? Voit lisätä toiminnallisuutta widgettien avulla. Tarjolla on widgettejä bibliografia- ja sitaattikokoelmia varten, CoverFlow-tyylinen kuvankatseluohjelma, aikajanat ja aikakaaviot – vain muutamia mainitakseni. Tämänkaltaiset tuotelaajennukset tekevät Exhibitista yhden vankimmista ja joustavimmista vaihtoehdoista datan visualisointiin.
CONS
Jyrkkä oppimiskäyrä
Kuten muidenkin monimutkaisempien kirjastojen kohdalla, Exhibitiin liittyy enemmän koodausta kuin useimpiin vaihtoehtoihin, ja aiemmasta Javascript-kokemuksesta on varmasti paljon hyötyä. Minusta opetusohjelmat ovat kuitenkin todella hyvin tehtyjä ja hauskoja, joten kun pääset alkuun, on todella helppo päästä vauhtiin.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit on hieno työkalupaketti kaavioiden ja graafien luomiseen verkkosivulle. Se sisältää mukavan luettelon tuetuista kaaviotyypeistä ja tuo mukaan joitakin animaatio-ominaisuuksia (esim. pylväskaavion pylväät voivat laajentua kokoisekseen, kun kaavio ladataan – tällaisia juttuja). Animaatiot ovat mukavia, ja ne voivat varmasti lisätä sivustosi viimeistelyä. Mukana on myös hienoja interaktiivisia ominaisuuksia, kuten ”suodattimen” soveltaminen kuvaajaan klikkaamalla sitä. Tämän jälkeen kuvaaja näyttää vain sen sarjan, jota napsautit, kunnes poistat suodattimen. Tutustu demoihin nähdäksesi lisää siitä, mihin tämä työkalupakki pystyy.
- Tuetut visualisointityypit: Aluekaavio, pylväskaavio, piirakkakaavio, puukartta, voimaohjattu, säteittäinen kaavio, auringonpurkaus, jääpuikko, avaruuspuu, hyperpuu
- Tietojen syöttö: JSON
- Tulostus: Canvas
- Muotoilu: Javascript-parametrit
- Tyyppi: Javascript-kirjasto
PROS
Yksityiskohtaiset kaaviotyypit
Pidän todella paljon erilaisista ei-standardeista visualisointityypeistä, jotka ovat käytettävissä InfoVis Toolkitissä. Tämä työkalu saattaa olla ylivoimainen satunnaiseen piirakkakaavioon, mutta se voi todella loistaa, kun joudut lähestymään monimutkaisempien tietojen näyttövaihtoehtoja.
Animaatiot / Vuorovaikutukset
Animaatiot ovat loistava lisä näihin kaavioihin ja kaavioihin. Ne antavat näille kaavioille mukavan Flash-tyyppisen laadun, joka on todella hieno. Ja kyky olla vuorovaikutuksessa näiden kuvaajien kanssa – raahata tavaraa ympäriinsä ja manipuloida kuvaajaa (kuten tässä) on erittäin hieno ja voisi olla todella hyödyllinen.
CONS
Learning Curve
Kaikkien näiden hienojen ominaisuuksien myötä tulee monimutkaisuutta, ja vaikka dokumentaatio sivustolla vaikuttaa hyvältä, tämä työkalu vaatii hyvää Javascript-kokemusta saadakseen siitä kaiken irti.
D3.js
Vau, D3.js on siisti! Eksyin juuri muutamaksi tunniksi penkomaan D3:n sivustoa ja mahdollisuudet tuntuvat loputtomilta. Tämä työkalu vaatii ehdottomasti melko paljon Javascriptin ja JSONin tuntemusta, mutta se tuottaa upeita, hienostuneita kaavioita. Tutustu esimerkkeihin.
D3 ei todellakaan ole kuin muut. Se ei ole ”valmis” kaaviointityökalu vaan pikemminkin kehys datapohjaisten elementtien piirtämiseen. D3:n verkkosivut sanovat sen parhaiten: ”Sen sijaan, että D3 tarjoaisi monoliittisen järjestelmän, jossa on kaikki ominaisuudet, joita kukaan voi koskaan tarvita, se ratkaisee vain ongelman ytimen: dataan perustuvien dokumenttien tehokkaan käsittelyn.”
Ja koska voit luoda SVG-grafiikkaa, voit käyttää tätä tulostetta missä tahansa, myös tulostussovelluksissa. D3 voisi olla grafiikkapainotteisen projektin näppärän web/print-julkaisutyönkulun keskus.
- Tuetut visualisointityypit: Kaikki? Taivas on rajana.
- Tietojen syöttö: JSON, GeoJSON, CSV
- Tulostus: HTML, SVG
- Muotoilu:
- Tyyppi: CSS, Javascript
- Tyyppi: Javascript-kirjasto
PROS
Rajoittamaton joustavuus
Voit käyttää D3.js:ää melko pitkälti kaiken haluamasi piirtämiseen datan perusteella. Tämä on uskomaton työkalu ihmisille, jotka luovat uusia datan visualisointeja ja visualisointeja, jotka on rakennettu todella suurten tietokokonaisuuksien pohjalta.
Tulostus
Erittäin siistiä, että voit käskeä D3:n luomaan sekä HTML-kohteita että SVG:tä. Avaa ehdottomasti oven CSS:llä muotoiluun, mikä on ihanteellista.
CONS
Oppimiskäyrä
Sinun täytyy olla taitava Javascript-, JSON- ja matematiikkaihminen saadaksesi D3:n hyppimään renkaiden läpi. Ja osa esimerkeistä askarruttaa mieltä, mutta mene vaan tutoriaalin läpi. Se ei ole niin paha, ja jos olet lainkaan perehtynyt jQueryyn tai Prototypeen, suuri osa tästä näyttää tutulta. Ja moni ei…
Johtopäätös
Nämä kuusi tuotetta ovat vain datavizin jäävuoren huippu. On olemassa kymmeniä muita loistavia tuotteita. Näiden pitäisi kuitenkin antaa sinulle hyvä käsitys siitä, mitä on tapahtumassa, ja antaa käsitys vuorovaikutteisen dataviz-maailman mahdollisuuksien laajuudesta ja monimutkaisuudesta.