14 nástro­jov na vizu­ali­zá­ciu dát

Rudolf Nečas / 3. januára 2016 / Lifehacking

Suro­vé dáta sú nud­né a je ťaž­ké sa v nich vyznať. Ak nie­ko­ho len zasy­peš kopou čísel, asi ich veľ­mi nepo­cho­pí. Ale pri­daj vizu­ali­zá­cie a dosta­neš nie­čo, čo doká­že kaž­dý ľah­ko strá­viť. Nie­len, že dáta budú dávať zmy­sel rých­lej­šie, ale môžeš tiež pozo­ro­vať zau­jí­ma­vé vzo­ry, kto­ré by iba z pohľa­du na šta­tis­ti­ky nebo­lo vidieť.

Ak chceš inak zdĺha­vú úlo­hu vytvá­ra­nia gra­fov spra­viť krás­ne jed­no­du­chou, pozri sa na ten­to zoznam a urči­te v ňom náj­deš nie­čo vhod­né. Je roz­de­le­ný na dve čas­ti. Prvá zahŕňa nástro­je, kto­ré vyža­du­jú prog­ra­mo­va­nie a sú urče­né skôr pre vývo­já­rov, zatiaľ čo dru­há časť obsa­hu­je tie, pri kto­rých ti netre­ba žiad­nu zna­losť prog­ra­mo­va­nia.

Nástro­je vyža­du­jú­ce prog­ra­mo­va­nie

d3-js

D3.js

D3.js, čo je skrat­ka pre “Data Dri­ven Docu­ments” (dáto­vo ria­de­né doku­men­ty), je prvé meno, kto­ré prí­de na um asi väč­ši­ne ľudí, keď pad­ne pojem vizu­ali­zá­cia dát. Využí­va HTML, CSS a SVG na ren­de­ro­va­nie rôz­nych úžas­ných gra­fov a dia­gra­mov. Hoci­ja­kú vizu­ali­zá­ciu akú si doká­žeš pred­sta­viť, môžeš pomo­cou D3 pre­viesť do rea­li­ty. Je nabi­tý fun­kcia­mi, má pre­ma­ka­nú inte­rak­ti­vi­tu a vyze­rá naozaj skve­lo. Navy­še je zadar­mo a open-sour­ce.

Screen Shot 2016-01-03 at 20.44.00

Fusi­on­Charts

Fusi­on­Charts má prav­de­po­dob­ne naj­viac vyčer­pá­va­jú­cu zbier­ku gra­fov a máp. S viac ako 90+ typ­mi gra­fov v ňom urči­te náj­deš všet­ko, čo potre­bu­ješ. Pod­po­ra pre­hlia­da­čov je tiež poriad­ne roz­siah­la a sia­ha až po archaic­ký Inter­net Explo­rer 6.

Fusi­on­Charts pod­po­ru­je for­má­ty JSON a XML a gra­fy môžeš expor­to­vať do PNG, JPEG, PDF ale­bo SVG. Majú pek­nú zbier­ku obchod­ných dash­bo­ar­dov a živé demá pre inšpi­rá­ciu.

Ich gra­fy pra­cu­jú naprieč všet­ký­mi zaria­de­nia­mi a plat­for­ma­mi, sú vyso­ko pris­pô­so­bi­teľ­né a majú krás­ne inte­rak­cie. Jed­na vec kto­rú musíš mať na pamä­ti ak uva­žu­ješ o Fusi­on­Charts je cena. Ten­to nástroj je totiž „tro­chu“ dra­hý. Ale vždy môžeš začať s neob­me­dze­nou bez­plat­nou skú­šob­nou ver­zi­ou, a ak sa ti zapá­či kúpiť si plnú.

chart

Charts.js

Chart.js je malá open sour­ce kniž­ni­ca, kto­rá pod­po­ru­je len šesť typov gra­fov: čia­ro­vé, stĺp­co­vé, rada­ro­vé, polár­ne, kolá­čo­vé a prs­ten­co­vé. Ale prá­ve tá jed­no­du­chosť ju robí skve­lou. Pre­to­že väč­ši­nou ti poskyt­ne všet­ko, čo potre­bu­ješ. V prí­pa­de, že je apli­ká­cia veľ­ká a zlo­ži­tá, potom majú kniž­ni­ce ako Goog­le Charts a Fusi­on­Charts zmy­sel, ale pre malé hob­by pro­jek­ty je Chart.js per­fekt­ným rie­še­ním.

Pre vykres­ľo­va­nie gra­fov pou­ží­va HTM­L5 can­vas ele­ment. Všet­ky gra­fy sú res­pon­zív­ne a majú v posled­nej dobe tak popu­lár­ny flat dizajn. Z open-sour­ce kniž­níc gra­fov, kto­ré sa obja­vi­li v posled­nej dobe je toto jed­na z najob­ľú­be­nej­ších.

2576981899_fef76fd366_b

Goog­le Charts

Goog­le Charts vykres­ľu­je gra­fy v HTML5/SVG, posky­tu­je kom­pa­ti­bi­li­tu medzi pre­hlia­dač­mi a pre­nos­nosť na tele­fó­ny s iOS a Andro­idom. Obsa­hu­je tiež VML na pod­po­ru star­ších ver­zií IE.

Ponú­ka sluš­nú zbier­ku gra­fov, kto­rá pokrý­va naj­čas­tej­šie pou­ží­va­né typy gra­fov, ako je stĺp­co­vý, kolá­čo­vý ale aj kopu iných. Je fle­xi­bil­ný a uží­va­teľ­sky prí­jem­ný (pre­to­že Goog­le!). Aby si zís­kal pred­sta­vu o tom aké gra­fy a typy inte­rak­cií oča­ká­vať, môžeš si pozrieť túto galé­riu.

1-2Nmf0g2hUQNlUglLSMS5gA

High­charts

High­charts je ďal­ším veľ­kým hrá­čom na poli gra­fov. Podob­ne ako Fusi­on­Charts tiež ponú­ka pes­trú šká­lu gra­fov. Okrem nor­mál­nych gra­fov ponú­ka balík pre bur­zo­vé gra­fy s náz­vom Highs­tock, kto­rý je tiež boha­tý na fun­kcie.

Umož­ňu­je export do PNG, JPG, SVG a PDF. Môžeš si pre­zrieť rôz­ne typy gra­fov, kto­ré ponú­ka v demo čas­ti. High­charts je zadar­mo pre neko­merč­né a osob­né pou­ži­tie, ale pre pou­ží­va­nie v komerč­ných apli­ká­ciách si budeš musieť kúpiť licen­ciu.

leaflet

Leaf­let

Leaf­let je open-sour­ce kniž­ni­ca vyvi­nu­tá Vla­di­mi­rom Aga­fon­ki­nom pre mobil­né inte­rak­tív­ne mapy. Neza­be­rá tak­mer žiad­ne mies­to (má iba 33 kb) a má veľa fun­kcií pre tvo­re­nie akých­koľ­vek máp. Na ren­de­ro­va­nie pou­ží­va HTM­L5 a CSS3 a fun­gu­je na všet­kých hlav­ných počí­ta­čo­vých a mobil­ných plat­for­mách. Slo­va­mi auto­ra:Leaf­let je navr­hnu­tý s dôra­zom na jed­no­du­chosť, výkon a pou­ži­teľ­nosť.”

K dis­po­zí­cii je širo­ká šká­la plu­gi­nov pre pri­dá­va­nie fun­kcií, ako naprí­klad ani­mo­va­ných mar­ke­rov, tep­lot­ných máp atď., kto­ré roz­ši­ru­jú základ­né fun­kcie. Ak uva­žu­ješ o vývo­ji apli­ká­cie, kto­rá zahŕňa mapy, mal by si dať Leaf­le­tu šan­cu.

dygraphs

dyg­raphs

dyg­raphs je open-sour­ce JavaSc­ript kniž­ni­ca pre mani­pu­lá­ciu s veľ­ký­mi dáta­mi. Je rých­la, fle­xi­bil­ná a vyso­ko pris­pô­so­bi­teľ­ná. Fun­gu­je vo všet­kých hlav­ných pre­hlia­da­čoch (vrá­ta­ne IE8) a má aktív­nu komu­ni­tu.

dyg­raphs má pomer­ne špe­ci­fic­kú mie­ru pou­ži­tia a asi nebu­de ide­ál­nym rie­še­ním pre všet­ky tvo­je potre­by. Ale ak plá­nu­ješ pra­co­vať s veľ­ký­mi dáto­vý­mi súbor­mi, bude dob­rým pomoc­ní­kom. Ak chceš pre­skú­mať čo doká­že, pozri sa na túto pek­ne spra­co­va­nú demo galé­riu.

Nástro­je nevy­ža­du­jú­ce prog­ra­mo­va­nie

datawrapperscreen

Data­wrap­per

Data­wrap­per je onli­ne nástroj pre tvor­bu inte­rak­tív­nych gra­fov. Ako­náh­le nahráš dáta zo súbo­ru CSV ale­bo ich vlo­žíš pria­mo do poľa, bude Data­wrap­per gene­ro­vať stĺp­co­vé, čia­ro­vé ale­bo aké­koľ­vek iné súvi­sia­ce vizu­ali­zá­cie. Mno­ho repor­té­rov a spra­vo­daj­ských orga­ni­zá­cií pou­ží­va Data­wrap­per na vkla­da­nie živých gra­fov do svo­jich člán­kov. Jed­no­du­cho sa pou­ží­va a pro­du­ku­je efekt­nú gra­fi­ku. Ak chceš začať tu náj­deš pek­ný tuto­riál, kto­rý ti v mno­hých veciach pomô­že.

mission

Tab­le­au

Tab­le­au Pub­lic je asi naj­po­pu­lár­nej­ší vizu­ali­zač­ný nástroj, kto­rý pod­po­ru­je naj­rôz­nej­šie sché­my, gra­fy a ďal­šie gra­fi­ky. Jed­ná sa o úpl­ne bez­plat­ný nástroj a gra­fy, kto­ré pomo­cou neho vytvo­ríš môžeš ľah­ko vlo­žiť do ľubo­voľ­nej webo­vej strán­ky. Vizu­ali­zá­cie vytvo­re­né pomo­cou Tab­le­au si môžeš pozrieť v tej­to pek­nej galé­rií.

large

Raw

Raw je defi­no­va­ný ako „chý­ba­jú­ci člá­nok medzi tabuľ­ko­vým pro­ce­so­rom a vek­to­ro­vou gra­fi­kou“. Je posta­ve­ný na D3.js a veľ­mi dob­re navr­hnu­tý. Má tak intu­itív­ne roz­hra­nie, že sa budeš cítiť, ako keby si ho už nie­ke­dy pou­ží­val. Je open-sour­ce a nevy­ža­du­je žiad­nu regis­trá­ciu.

Obsa­hu­je kniž­ni­cu 16 typov gra­fov a všet­ko spra­co­va­nie sa vyko­ná­va v pre­hlia­da­či, tak­že tvo­je dáta sú v bez­pe­čí. RAW je vyso­ko pris­pô­so­bi­teľ­ný a roz­ší­ri­teľ­ný.

timeline-js

Time­li­ne JS

Ako už názov napo­ve­dá, Time­li­ne JS umož­ňu­je vytvá­rať krás­ne časo­vé osi bez nut­nos­ti písa­nia kódu. Ten­to bez­plat­ný, open-sour­ce nástroj, pou­ží­va­jú nie­kto­ré z naj­po­pu­lár­nej­ších inter­ne­to­vých strá­nok, ako Time a Radi­oLab.

Veľ­mi jed­no­du­chý štvor­k­ro­ko­vý pro­ces ako vytvo­riť časo­vú os je popí­sa­ný tu. A to naj­lep­šie? Ten­to nástroj doká­že vytiah­nuť dáta z rôz­nych zdro­jov a má vsta­va­nú pod­po­ru pre Twit­ter, Flickr, Goog­le Maps, You­Tu­be, Vimeo, Vine, Dai­ly­mo­ti­on, Wiki­pé­diu, SoundC­loud a ďal­šie podob­né weby.

infogram4_0

Info­gram

Info­gram umož­ňu­je vytvá­rať gra­fy ale aj info­gra­fi­ku onli­ne. Ponú­ka obme­dze­nú bez­plat­nú ver­ziu a dve pla­te­né mož­nos­ti, kto­ré zahŕňa­jú fun­kcie, ako je viac než 200 gra­fov, súkrom­né zdie­ľa­nie, kniž­ni­cu ikon atď.

Má ľah­ko pou­ži­teľ­né roz­hra­nie a jeho základ­né gra­fy sú dob­re navr­hnu­té. Zásad­nou nevý­ho­dou je obrov­ské logo, kto­ré uvi­díš, keď sa pokú­siš vlo­žiť inte­rak­tív­ne gra­fy do svo­jej webo­vej strán­ky (vo free ver­zii). Bolo by lep­šie, keby je to len malý text, ako má naprí­klad Data­wrap­per.

apple_plotly

Plot­ly

Plot­ly je webo­vý nástroj na ana­lý­zu dát a tvor­bu gra­fov. Pod­po­ru­je dob­rú zbier­ku typov gra­fov so vsta­va­ný­mi fun­kcia­mi zdie­ľa­nia na sociál­nych sie­ťach. Gra­fy, kto­ré sú k dis­po­zí­cii majú pro­fe­si­onál­ny vzhľad a dojem. Vytvo­re­nie gra­fu je len otáz­kou načí­ta­nia tvo­jich infor­má­cií a úpra­vy štruk­tú­ry, osí, pozná­mok a legen­dy. Ak hľa­dáš, ako by si mohol začať, neja­kú inšpi­rá­ciu náj­deš tu.

chartblocks

ChartB­locks

ChartB­locks je ďal­ší onli­ne nástroj na tvor­bu gra­fov, kto­rý je dob­re navr­hnu­tý a umož­ňu­je vytvá­rať základ­né gra­fy veľ­mi rých­lo. Má obme­dze­ný počet typov gra­fov, ale to by nemal byť prob­lém, pre­to­že väč­ši­na bež­ných typov je zahr­nu­tá.

Umož­ní ti vytiah­nuť dáta z rôz­nych exter­ných zdro­jov ako sú tabuľ­ky a data­bá­zy. Po vytvo­re­ní gra­fu ho môžeš buď expor­to­vať pomo­cou SVG ale­bo PNG, vlo­žiť do svo­jej webo­vej strán­ky, ale­bo zdie­ľať na sociál­nych sie­ťach.

Vizu­ali­zá­cia dát je obrov­ský pries­tor s množ­stvom mož­nos­tí. Dúfam, že si v tom­to výbe­re našiel neja­ký nástroj, kto­rý ti pomô­že. Ale­bo už pou­ží­vaš neja­ký, kto­rý tu nie je spo­me­nu­tý?

An investor places his hands on the back of his head in front of an electronic board showing stock information at a brokerage house in Hefei, Anhui province May 2, 2012. China shares climbed 1.8 percent to their highest closing level in seven weeks on Wednesday, after the country's securities regulator said it would reduce transaction fees for trades on the Shanghai and Shenzhen stock exchanges. REUTERS/Stringer (CHINA - Tags: BUSINESS)

zdroj: thenextweb.com

Pridať komentár (0)