UPDATE: Deși multe dintre instrumentele prezentate în acest articol din 2012 sunt încă eficiente și s-au dezvoltat pentru a deveni și mai utile, s-ar putea să fiți interesați de seria noastră mai recentă despre instrumentele de vizualizare interactivă a datelor.
Instrumente complexe de vizualizare a datelor
Bine ați revenit pentru a doua parte a seriei mele despre instrumentele de vizualizare interactivă a datelor (dataviz). În partea 1, am acoperit trei instrumente interesante pentru vizualizarea diagramelor și graficelor și a multor alte tipuri de date pe o pagină web. În partea a doua, ne vom uita la alte trei instrumente care sunt puțin mai complexe, dar care au capacități incredibile de vizualizare a datelor.
- jQuery Visualize (Partea 1)
- Google Charts (Partea 1)
- Highcharts (Partea 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit este o ofertă foarte robustă și personalizabilă. Unul dintre principalele sale puncte forte este o abordare unică de redare a datelor. În plus față de instrumentele de filtrare, sortare și căutare ușor de utilizat, vă permite să utilizați un șablon HTML (numit „lentilă” în Exhibit) care să fie construit pentru ca totul pe pagină să arate exact cum doriți. Este aproape ca un mini-CMS pentru dataviz, în care puteți accesa datele prin valorile atributelor direct în lentilă. Pentru proiectele care necesită un grad ridicat de sensibilitate la aspect, acest nivel extrem de flexibilitate pentru construirea vizualizărilor de date este fantastic.
- Tipuri de vizualizare acceptate: Grafice cu linii, hărți, diagrame de dispersie, liste multi-filtrabile, linii de timp, diagrame temporale și multe altele… cu widget-uri!
- Surse de intrare a datelor: JSON, Foaie de calcul
- Ieșire date: HTML
- Opțiuni de stilizare: CSS
- CSS
- Tip: Bibliotecă Javascript
PROS
Flexibil & Abordare puternică a designului
Îmi place foarte mult abordarea lui Exhibit, în care datele sunt prezentate printr-o „lentilă” – o carcasă de șablon HTML în care sunt plasate elementele. Acest lucru face ca sistemul să fie complet personalizabil și stilizabil prin CSS, ceea ce înseamnă că designerii îl adoră, iar crearea unei coerențe pentru mărcile clienților este o joacă de copii.
Filtrare puternică/Sortare/Cercetare
Lăsând utilizatorii să filtreze datele dvs. după orice număr de criterii este incredibil de util și transformă informațiile dvs. dintr-un conținut static într-o adevărată caracteristică interactivă. Filtrarea este integrată direct în Exhibit și este ușor de implementat. Filtrarea pe server poate fi o corvoadă (ca să nu mai spunem că este costisitoare), așa că Exhibit se remarcă într-adevăr prin faptul că face ca filtrarea utilizatorilor să fie incredibil de rapidă și ușoară. Același lucru este valabil și pentru sortare și căutare. Exhibit face foarte ușor să le oferiți utilizatorilor site-ului dvs. controlul asupra obținerii exact a vizualizării datelor dvs. pe care o doresc și, prin urmare, o înțelegere mai valoroasă a motivelor pentru care acestea sunt importante.
Documentare puternică
Saltând în instrumente complexe de dataviz poate fi o întreprindere și necesită unele încercări și erori. Exhibit accelerează cu adevărat procesul cu o documentație excelentă pe site-ul lor și câteva tutoriale excelente pentru începători.
Widgets!
Vreți să împingeți Exhibit și mai departe? Puteți adăuga funcționalitate cu ajutorul widget-urilor. Există widget-uri disponibile pentru colecții de bibliografie și citate, un vizualizator de imagini în stil CoverFlow, linii de timp și timeplots – doar pentru a numi doar câteva. Acest tip de extindere a produsului face ca Exhibit să fie una dintre cele mai robuste și mai flexibile opțiuni existente pentru vizualizarea datelor.
CONS
Steep Learning Curve
Ca și celelalte biblioteci mai complexe, este implicată mai multă codificare cu Exhibit decât majoritatea opțiunilor, iar faptul de a avea experiență anterioară în Javascript este cu siguranță foarte util. Cu toate acestea, am constatat că tutorialele sunt foarte bine făcute și amuzante, așa că, odată ce ați început, este foarte ușor să vă puneți pe treabă.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit este o suită frumoasă de instrumente pentru crearea de diagrame și grafice pe o pagină web. Dispune de o listă frumoasă de tipuri de grafice acceptate și introduce câteva caracteristici de animație în mix (de exemplu, barele unui grafic cu bare se pot extinde la dimensiunea lor atunci când graficul este încărcat – acest gen de lucruri). Animațiile sunt drăguțe și pot adăuga cu siguranță un nivel suplimentar de strălucire site-ului dumneavoastră. Există, de asemenea, câteva caracteristici interactive interesante, cum ar fi aplicarea unui „Filtru” la un grafic făcând clic pe el. Graficul afișează apoi doar seria pe care ați făcut clic până când eliminați filtrul. Consultați demo-urile pentru a vedea mai multe din ceea ce este capabil acest set de instrumente.
- Tipuri de vizualizare acceptate: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Ieșire: Canvas
- Styling: Parametrii Javascript
- Tip: Javascript Library
PROS
Tipuri de diagrame unice
Îmi plac foarte mult diferitele tipuri de vizualizare non-standard disponibile în InfoVis Toolkit. Acest instrument ar putea fi exagerat pentru o diagramă cu plăcintă ocazională, dar ar putea străluci cu adevărat atunci când trebuie să abordați opțiuni de afișare pentru date mai complicate.
Animații / Interacțiuni
Animațiile sunt o completare excelentă a acestor diagrame și grafice. Ele conferă o calitate asemănătoare cu Flash acestor diagrame care este foarte plăcută. Iar abilitatea de a interacționa cu aceste grafice – trăgând chestii în jur și manipulând graficul (ca acesta) este foarte mișto și ar putea fi foarte utilă.
CONS
Curba de învățare
Cu toate aceste caracteristici grozave vine și complexitatea și, deși documentația de pe site pare a fi bună, acest instrument necesită o experiență bună în Javascript pentru a obține maximul de la el.
D3.js
Wow, D3.js este grozav! Tocmai m-am pierdut pentru câteva ore cotrobăind pe site-ul D3 și posibilitățile par nesfârșite. Acest instrument necesită cu siguranță un nivel destul de ridicat de expertiză cu Javascript și JSON, dar generează niște grafice superbe și sofisticate. Consultați exemplele.
D3 nu este chiar ca ceilalți. Nu este un instrument grafic „gata de utilizare”, ci mai degrabă un cadru pentru desenarea elementelor bazate pe date. Site-ul D3 o spune cel mai bine: „În loc să ofere un sistem monolitic cu toate caracteristicile de care oricine ar putea avea vreodată nevoie, D3 rezolvă doar miezul problemei: manipularea eficientă a documentelor bazate pe date.”
Și, din moment ce puteți crea grafice SVG, ați putea folosi acest rezultat oriunde, inclusiv în aplicațiile de imprimare. D3 ar putea fi centrul unui flux de lucru elegant de publicare web/imprimare pentru un proiect cu multe grafice.
- Tipuri de vizualizare acceptate: Toate? Cerul este limita.
- Introducerea datelor: JSON, GeoJSON, CSV
- Ieșire: HTML, SVG
- Styling: CSS, Javascript
- Tip: Bibliotecă Javascript
PROS
Flexibilitate nelimitată
Puteți folosi practic D3.js pentru a desena orice doriți pe baza datelor. Acesta este un instrument uimitor pentru persoanele care creează noi vizualizări de date și vizualizări construite pe seturi de date foarte mari.
Output
Este foarte tare faptul că îi puteți spune lui D3 să creeze elemente HTML, precum și SVG. Cu siguranță deschide ușa către stilizarea cu CSS, ceea ce este ideal.
CONS
Curba de învățare
Trebuie să fii o persoană desăvârșită în Javascript, JSON și matematică pentru a face D3 să sară prin cercuri. Iar unele dintre exemple te năpădesc, dar mergeți mai departe și parcurgeți tutorialul. Nu este atât de rău și, dacă sunteți familiarizați cât de cât cu jQuery sau Prototype, multe dintre acestea vă vor părea familiare. Și multe nu vor fi…
Concluzie
Aceste șase produse sunt doar vârful icebergului pentru dataviz. Există zeci de alte produse grozave acolo. Dar acestea ar trebui să vă ofere o idee bună despre ceea ce se întâmplă și o idee despre gama de capacități și complexitatea lumii interactive dataviz.
.