OPDATERING: Selv om mange af de værktøjer, der blev præsenteret i denne artikel fra 2012, stadig er effektive og har udviklet sig til at blive endnu mere nyttige, er du måske interesseret i vores nyere serie om interaktive datavisualiseringsværktøjer.
Komplekse datavisualiseringsværktøjer
Velkommen tilbage til anden del af min serie om interaktive datavisualiseringsværktøjer (dataviz). I del 1 behandlede vi tre fede værktøjer til visualisering af diagrammer og grafer og mange andre datatyper på en webside. I del to tager vi et kig på yderligere tre værktøjer, der er lidt mere komplekse, men som har nogle utrolige datavisualiseringsmuligheder.
- jQuery Visualize (del 1)
- Google Charts (del 1)
- Highcharts (del 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit er et meget robust og tilpasningsdygtigt tilbud. En af dets vigtigste styrker er en unik tilgang til gengivelse af data. Ud over de brugervenlige værktøjer til filtrering, sortering og søgning giver det dig mulighed for at bruge en HTML-skabelon (kaldet en “linse” i Exhibit), der kan konstrueres for at få alt på siden til at se ud præcis, som du ønsker det. Det er næsten som et mini-CMS for dataviz, hvor du kan få adgang til dine data via attributværdier direkte i linsen. For projekter, der kræver en høj grad af følsomhed i forhold til look and feel, er dette ekstreme niveau af fleksibilitet til opbygning af datavisualiseringer fantastisk.
- Visualiseringstyper understøttet: Linjediagrammer, kort, scatterplots, multifiltrerbare lister, tidslinjer, tidsdiagrammer og meget mere … med widgets!
- Datainputkilder:
- JSON, regneark
- Dataudgang: JSON, regneark
- Dataudgang: HTML
- Stilindstillinger: HTML
- CSS
- Type: CSS
- Javascript-bibliotek
PROS
Fleksibel & Kraftfuld tilgang til design
Jeg kan virkelig godt lide tilgangen i Exhibit, hvor data præsenteres gennem en “linse” – en HTML-skabelonskal, som elementer er placeret i. Dette gør systemet helt tilpasningsdygtigt og CSS-stilbart, hvilket betyder, at designere elsker det, og det er nemt at skabe konsistens for kundernes brands.
Stærk filtrering/sortering/søgning
Det er utroligt nyttigt at lade brugerne filtrere dine data efter et vilkårligt antal kriterier, og det forvandler dine oplysninger fra statisk indhold til en ægte interaktiv funktion. Filtrering er indbygget direkte i Exhibit, og det er let at implementere. Server-side filtrering kan være en pligt (for ikke at nævne dyrt), så Exhibit skiller sig virkelig ud ved at gøre brugerfiltrering utrolig hurtig og nem. Det samme gælder for sortering og søgning. Exhibit gør det meget nemt at give brugerne af dit websted kontrol over at få præcis den visning af dine data, som de ønsker, og dermed en mere værdifuld forståelse af, hvorfor det er vigtigt.
Stærk dokumentation
Det kan være en opgave at kaste sig ud i komplekse dataviz-værktøjer og kræver en del trial and error. Exhibit fremskynder virkelig processen med god dokumentation på deres websted og nogle fremragende tutorials for begyndere.
Widgets!
Vil du skubbe Exhibit endnu længere? Du kan tilføje funktionalitet med widgets. Der er widgets til rådighed til bibliografi- og citatsamlinger, en billedfremviser i CoverFlow-stil, tidslinjer og tidsdiagrammer – blot for at nævne nogle få. Denne form for produktudvidelse gør Exhibit til en af de mest robuste og fleksible muligheder derude for datavisualisering.
CONS
Stejl læringskurve
Som de andre mere komplekse biblioteker er der mere kodning involveret med Exhibit end de fleste muligheder, og det er helt sikkert meget nyttigt at have tidligere Javascript-erfaring. Jeg syntes dog, at tutorials var virkelig godt lavet og sjove at lave, så når du først er kommet i gang, er det virkelig nemt at komme i gang.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit er en fin suite af værktøjer til at skabe diagrammer og grafer på en webside. Den indeholder en fin liste over understøttede diagramtyper og introducerer nogle animationsfunktioner i blandingen (f.eks. kan søjlerne i et søjlediagram udvides til deres størrelse, når diagrammet indlæses – den slags ting). Animationerne er flotte og kan helt sikkert tilføje et ekstra niveau af polering til dit websted. Der er også nogle fede interaktive funktioner, som f.eks. at anvende et “filter” på en graf ved at klikke på den. Grafen viser derefter kun den ene serie, du klikkede på, indtil du fjerner filteret. Tjek demoerne for at se mere af, hvad dette værktøjssæt er i stand til.
- Visualiseringstyper understøttet: Arealdiagram, søjlediagram, cirkeldiagram, trædiagram, kraft rettet, radialgraf, sunburst, iscicle, rumtræ, hypertræ
- Indtastning af data: JSON
- Output: JSON
- Canvas
- Styling: Javascript-parametre
- Type: Javascript Library
PROS
Unique Chart Types
Jeg kan virkelig godt lide de forskellige ikke-standardiserede visualiseringstyper, der er tilgængelige i InfoVis Toolkit. Dette værktøj er måske overkill til det lejlighedsvise cirkeldiagram, men kan virkelig brillere, når du skal nærme dig visningsmuligheder for mere komplicerede data.
Animationer / interaktioner
Animationerne er en god tilføjelse til disse diagrammer og grafer. De giver disse diagrammer en flot Flash-lignende kvalitet, som er virkelig flot. Og muligheden for at interagere med disse grafer – at trække ting rundt og manipulere grafen (som her) er meget cool og kunne være virkelig nyttigt.
CONS
Learning Curve
Med alle disse fantastiske funktioner følger kompleksitet, og selv om dokumentationen på hjemmesiden ser ud til at være god, kræver dette værktøj en god Javascript-erfaring for at få mest muligt ud af det.
D3.js
Wow, D3.js er cool! Jeg har lige fortabt mig i et par timer og snuset rundt på D3-webstedet, og mulighederne synes uendelige. Dette værktøj kræver helt klart et ret højt niveau af ekspertise med Javascript og JSON, men det genererer nogle smukke, sofistikerede diagrammer. Tjek eksemplerne.
D3 er ikke rigtig som de andre. Det er ikke et “færdigt” diagramværktøj, men snarere en ramme til at tegne databaserede elementer. D3-webstedet siger det bedst: “I stedet for at levere et monolitisk system med alle de funktioner, som nogen nogensinde kan få brug for, løser D3 kun problemets kerne: effektiv håndtering af dokumenter baseret på data.”
Og da du kan lave SVG-grafik, kan du bruge dette output overalt, herunder i printprogrammer. D3 kunne være centrum for en smart arbejdsgang til udgivelse på web/print for et grafiktungt projekt.
- Visualiseringstyper understøttet: Alle? Der er ingen grænser.
- Data Input: JSON, GeoJSON, CSV
- Output: JSON, GeoJSON, CSV
- HTML, SVG
- Styling: HTML, SVG
- CSS, Javascript
- Type: CSS, Javascript
- Javascript-bibliotek
PROS
Ubegrænset fleksibilitet
Du kan stort set bruge D3.js til at tegne alt det, du vil, baseret på data. Dette er et fantastisk værktøj for folk, der skaber nye datavisualiseringer og visualiseringer, der er bygget på virkelig store datasæt.
Output
Solidt fedt, at du kan bede D3 om at oprette HTML-elementer såvel som SVG. Det åbner helt sikkert døren til styling med CSS, hvilket er ideelt.
CONS
Læringskurve
Du skal være en dygtig person inden for Javascript, JSON og matematik for at få D3 til at hoppe gennem hoops. Og nogle af eksemplerne er til at blive forvirret over, men gå bare i gang og kør tutorialen igennem. Det er ikke så slemt, og hvis du overhovedet er bekendt med jQuery eller Prototype, vil meget af dette se bekendt ud. Og meget vil ikke gøre det…
Slutning
Disse seks produkter er blot toppen af isbjerget for dataviz. Der er snesevis af andre gode produkter derude. Men disse skulle give dig et godt indtryk af, hvad der sker, og en fornemmelse af omfanget af mulighederne og kompleksiteten i den interaktive dataviz-verden.