Vizualizacije v JavaScriptu EN

Še pred kakšnim letom so se mi zdele zahtevne vizualizacije v brskalniku kot znanstvena fantastika. Nekaj kar si vsi želimo, a je tako daleč v prihodnosti, da o tem ne razmišljamo resno. Pred kratkim sem mnenje povsem spremenil. Izvajanje programov v JavaScriptu je v zadnjem letu izjemno napredovalo. Ne le, da se izvanja super hitro (predvsem v brskalniku Chrome), na voljo je tudi ogromna množica orodij za vizualizacijo.

Pravzaprav jih je tako veliko, da sem imel resne težave izbrati "ta pravega". Izbira je namreč odvisna narave našega problema, knjižnic, ki jih že uporabljamo, in znanja, ki ga imamo. Nekatera orodja so bolj, druga manj zahtevna.

Večina orodij uporablja eno od štirih okolij za vizualizacijo v JavaScriptu:

D3.js
D3.js je knjižnica za upravljanje dokumentov, ki opisujejo podatke. Je najbolj splošno od opisanih okolij. V primerjavi z drugimi delamo pri D3 neposredno nad objekti, ki jih določajo spletni standardi HTML, SVG in CSS. Je zelo zmogljivo okolje, delo z njim pa je razmeroma zahtevno. Okolje D3 je konceptualno podobno okolju Protovis, ki ga je razvila ista skupina programerjev.
  • Cubism.js je knjižnica, ki se je izkazala kot najboljša za prikazovanje časovnih vrst v nodewacherju.
InfoVis
Orodje vsebuje raznovrstne metode za vizualizacijo. Veliko od jih je prilagojenih za ponazarjanje drevesnih struktur. Okolja InfoVis nismo preizkusili, ker so druga izgledala bolj obetavno.
Processing.js
Okolje Processing.js večinoma vsebuje metode, ki so jih prepisali iz izvirnega orodja Processing, sicer spisano v programskem jeziku Java.
Raphaël
Okolje za delo z vektorsko grafiko v brskalniku. Za prikazovanje grafike uporablja SVG, priporočila W3C in VML. Vsak objekt, ki ga zgradi, je del modela DOM, kar je izvrstno za izdelavo interaktivnih vmesnikov v JavaScriptu.
  • gRaphaël je orodje, ki je zgrajeno nad orodjem Raphaël in je prilagojeno za risanje grafov.

Poleg okolij za vizualizacijo, obstaja tudi veliko manjših, specializiranih orodij, ki so napisana nad kakšno od splošnih JavaScript knjižnic:

jQuery
  • Flot je super knjižnica, ki podpira risanje točk, krivulj, stolpcev in polj. Bila je ena tudi najhitrejših, kar smo jih preizkusili. V brskalniku Chrome je brez težav narisala 100.000 točk (Firefox je nekoliko pročasnejši, z njim smo lahko risali do 10.000 točk).
  • jQuery SVG
  • jqPlot je alternativa knjižnici Flot. Avtor knjižnice jqPlot je sicer dolgo časa uporabljal Flot.
Prototype
  • Flotr je alternativa knjižnici Flot, spisana v okolju Prototype.
Dojo
  • Dojo GFX je orodje za vektorsko grafiko, ki podpira (poleg osnovnih vizualizacij) izdelavo bogatih spletnih aplikacij.

Med preizkušanjem raznih orodij smo opazili veliko razliko v hitrosti med brskalnikoma Chrome in Firefox (na operacijskem sistemu Linux). Odprite to vizualizacijo omrežja v različnih spletnih brskalnikih in delite svojo izkušnjo z nami.