UPPDATERING: Även om många av verktygen som presenterades i den här artikeln från 2012 fortfarande är effektiva och har utvecklats för att bli ännu mer användbara, kan du vara intresserad av vår nyare serie om interaktiva datavisualiseringsverktyg.
Complexa datavisualiseringsverktyg
Välkommen tillbaka till den andra delen av min serie om interaktiva datavisualiseringsverktyg (dataviz). I del 1 tog vi upp tre coola verktyg för att visualisera diagram och grafer och många andra datatyper på en webbsida. I del två tar vi en titt på ytterligare tre verktyg som är lite mer komplexa men som har otroliga möjligheter till datavisualisering.
- jQuery Visualize (del 1)
- Google Charts (del 1)
- Highcharts (del 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit är ett mycket robust och anpassningsbart erbjudande. En av dess främsta styrkor är ett unikt tillvägagångssätt för rendering av data. Förutom lättanvända verktyg för filtrering, sortering och sökning kan du använda en HTML-mall (kallad ”lins” i Exhibit) som kan konstrueras för att få allt på sidan att se ut precis som du vill ha det. Det är nästan som ett mini-CMS för dataviz där du kan få tillgång till dina data genom attributvärden direkt i linsen. För projekt som kräver en hög grad av känslighet för utseende och känsla är denna extrema nivå av flexibilitet för att bygga datavisualiseringar fantastisk.
- Visualiseringstyper som stöds: Linjediagram, kartor, spridningsdiagram, listor som kan filtreras flera gånger, tidslinjer, tidsdiagram och mycket mer… med widgets!
- Datainmatningskällor: Data Input Sources: JSON, kalkylblad
- Datauppgifter: Data Output: HTML
- Stylingalternativ: CSS
- Typ: CSS
- Jag gillar verkligen Exhibits tillvägagångssätt, där data presenteras genom en ”lins” – ett HTML-mallskal som elementen placeras i. Detta gör systemet helt anpassningsbart och CSS-stilbart, vilket innebär att designers älskar det och att det är lätt att skapa enhetlighet för kundernas varumärken.
Stark filtrering/sortering/sökning
Att låta användarna filtrera dina data efter valfritt antal kriterier är otroligt användbart och förvandlar din information från statiskt innehåll till en riktig interaktiv funktion. Filtrering är inbyggd direkt i Exhibit och är lätt att implementera. Filtrering på serversidan kan vara jobbigt (för att inte tala om dyrt), så Exhibit utmärker sig verkligen genom att göra användarens filtrering otroligt snabb och enkel. Samma sak gäller för sortering och sökning. Exhibit gör det mycket enkelt att ge användarna på din webbplats kontroll över att få exakt den vy av dina data som de vill ha, och därmed en mer värdefull förståelse för varför det är viktigt.Stark dokumentation
Att hoppa in i komplexa dataviz-verktyg kan vara ett åtagande och kräver en del trial and error. Exhibit snabbar verkligen upp processen med bra dokumentation på deras webbplats och några utmärkta tutorials för nybörjare.Widgets!
Vill du driva Exhibit ännu längre? Du kan lägga till funktionalitet med widgets. Det finns widgets tillgängliga för bibliografi- och citatsamlingar, en bildvisare i CoverFlow-stil, tidslinjer och tidsdiagram – bara för att nämna några. Den här typen av produktutvidgning gör Exhibit till ett av de mest robusta och flexibla alternativen som finns för datavisualisering.CONS
Step lärandekurva
Likt de andra mer komplexa biblioteken är det mer kodning inblandat med Exhibit än de flesta alternativen, och att ha tidigare Javascript-erfarenhet är definitivt till stor hjälp. Jag tyckte dock att handledningarna var riktigt bra gjorda och roliga att göra, så när du väl kommit igång är det verkligen lätt att komma igång.Javascript InfoVis Toolkit
Javascript InfoVis Toolkit är en trevlig svit med verktyg för att skapa diagram och grafer på en webbsida. Den har en fin lista över diagramtyper som stöds och introducerar en del animationsfunktioner (t.ex. kan staplarna i ett stapeldiagram expandera till sin storlek när diagrammet laddas – den här typen av saker). Animationerna är trevliga och kan definitivt ge en extra nivå av polering till din webbplats. Det finns också några häftiga interaktiva funktioner, som att tillämpa ett ”filter” på ett diagram genom att klicka på det. Grafen visar då bara den serie du klickade på tills du tar bort filtret. Kolla in demos för att se mer av vad den här verktygslådan är kapabel till.
- Visualiseringstyper som stöds: Områdesdiagram, stapeldiagram, cirkeldiagram, trädkarta, kraftledd, radialdiagram, solfjäder, iscirkel, rymdträd, hyperträd
- Datainmatning: Datainmatning: JSON
- Utgång: Canvas
- Styling: Javascriptparametrar
- Typ: Typ: Javascript-bibliotek
PROS
Unikna diagramtyper
Jag gillar verkligen de olika icke-standardiserade visualiseringstyper som finns tillgängliga i InfoVis Toolkit. Det här verktyget kan vara överflödigt för enstaka cirkeldiagram men kan verkligen briljera när du måste närma dig visningsalternativ för mer komplicerade data.Animationer/interaktioner
Animationerna är ett bra komplement till de här diagrammen och graferna. De ger diagrammen en trevlig Flash-liknande kvalitet som är riktigt trevlig. Möjligheten att interagera med graferna – dra runt saker och manipulera grafen (som här) – är mycket häftig och kan vara mycket användbar.CONS
Lärande kurva
Med alla dessa fantastiska funktioner följer komplexitet och även om dokumentationen på webbplatsen verkar vara bra, kräver det här verktyget god Javascript-erfarenhet för att få ut det mesta av det.D3.js
Wow, D3.js är coolt! Jag gick vilse i några timmar och snokade runt på D3-webbplatsen och möjligheterna verkar oändliga. Det här verktyget kräver definitivt en ganska hög nivå av expertis med Javascript och JSON, men det genererar några vackra, sofistikerade diagram. Kolla in exemplen.
D3 är inte riktigt som de andra. Det är inte ett ”färdigt” diagramverktyg utan snarare ett ramverk för att rita databaserade element. D3:s webbplats säger det bäst: ”I stället för att tillhandahålla ett monolitiskt system med alla funktioner som någon någonsin kommer att behöva löser D3 endast problemets kärna: effektiv hantering av dokument baserade på data.”
Och eftersom du kan skapa SVG-grafik kan du använda denna utdata var som helst, även i utskriftsprogram. D3 skulle kunna vara centrum för ett smidigt arbetsflöde för webb/utskriftspublicering för ett grafiskt tungt projekt.
- Visualiseringstyper som stöds: Alla? Det finns inga gränser.
- Datainmatning: JSON, GeoJSON, CSV
- Utgång: HTML, SVG
- Styling: CSS, Javascript
- Typ: Typ: Javascript-bibliotek
PROS
Obegränsad flexibilitet
Du kan i stort sett använda D3.js för att rita vad du vill baserat på data. Detta är ett fantastiskt verktyg för personer som skapar nya datavisualiseringar och visualiseringar som bygger på riktigt stora datamängder.Output
Väldigt häftigt att du kan säga till D3 att skapa HTML-objekt såväl som SVG. Det öppnar definitivt dörren för styling med CSS, vilket är idealiskt.CONS
Lärandekurva
Du måste vara en duktig person inom Javascript, JSON och matematik för att få D3 att hoppa genom hopp. Och vissa av exemplen är förvirrande, men gå vidare och kör igenom handledningen. Det är inte så illa och om du är bekant med jQuery eller Prototype kommer mycket av det här att kännas bekant. Och mycket kommer inte att göra det…Slutsats
Dessa sex produkter är bara toppen av isberget för dataviz. Det finns dussintals andra bra produkter där ute. Men dessa borde ge dig en god uppfattning om vad som händer och en känsla av hur många möjligheter och vilken komplexitet som finns i den interaktiva dataviz-världen.