infografika címkével jelölt bejegyzések

Adatvizualizáció Google Fusion Tables segítségével

Papp Gábor
Papp Gábor, thepitch.hu

Mai vendégszerzőnk Papp Gábor a The Pitch | Online Marketing blog alapítója, SEO és online marketing szakértő! Ebben a posztjában az adatvizualizáció egy kis szeletét fogja megmutatni nekünk!

Már az elején fontos valamit leszögezni: nem vagyok profi adatelemző. De adatvizualizáló sem. Ugyanakkor nagyon sok olyan eszközt használok, amelyek valamilyen formában alkalmasak az adatvizualizációra. Még egy angol keresőoptimalizálással kapcsolatos cikk kapcsán futottam bele a Google egyik ún Big Data tooljába, a Google Fusion Tables-be. Ahogy elkezdtem elmerülni a használatában, rájöttem, hogy ezt az eszközt bizony sok célra fel lehet használni. Most ezekről gyűjtöttem össze a tapasztalataimat.

Az adatok megfelelő vizualizációjához szerintem az alábbiakra van szükség: jó minőségű és jól strukturált adat, valamint egy jó adatvizualizáló megoldás. Ez lehet egy eszköz, vagy akár csak egy módszer (egy gráf például). Ha megvan az összhang a fenti elemek között, akkor lesz igazán jó az adatmegjelenítésünk. Adatvizualizáció Google Fusion Tables segítségével bővebben…

Jön a ChartCube!

Egyre többször találkozom mostanában a ChartCube nevű új adatvizualizációs alkalmazással, ami végtelen Excel táblázatokat alakít pillanatok alatt szép és könnyen értelmezhető chart-okká, automatikusan.

Ugyebár egy átlagos üzleti jelentés úgy néz ki, hogy a felelős ember elkezd dolgozni Excel-ben, különböző forrásokból összeszedi azokat az adatpontokat, amik a riportjához kellenek. Gyárt néhány szép chart-ot, amiket bemásol egy e-mail-be, ahol elindul a beszélgetés az adatokról. Mi a probléma? Hogy nehezen kezelhetőek a chart-ok, nem módosíthatóak, szükség esetén nem tudunk még egy szinttel mélyebbre menni, csak ha az eredeti riport gyártóját megkérjük és hát egyébként is nehezen hordozható az egész rendszer.

Ezeket a problémákat oldja meg  a ChartCube. Lényegében felgyorsítja az adatalapú kommunikációt a cégen belül. Talán a Forbes fogalmazta meg a legfrappánsabban – “a prezentáló kezébe elemzést, az elemzők kezébe prezentációt ad”.

A videójuk pedig többet mond ezer szónál is:

Ajánlom kipróbálásra!
Mester Tomi

DataViz – néhány jó cucc adatvizualizációra

Nemrég egy adatokkal foglalkozó startup-nak segítettünk adatvizualizációban/adatkommunikációban. Az ő kutatómunkájuknak hála egy csomó open-source adatvizualizációs eszközt megismertem, amit most meg is osztok Veled. Korábban írtunk a GoodData-ról, illetve a Chart.io-ról, mindkettő profi adatfeldolgozó eszköz, de ami azt illeti az áruk bizony elég borsos. Márpedig egy induló cégnél ez probléma lehet. Ha Te is így vagy vele, akkor ezt a listát szeretni fogod.

1. HighCharts.com:
HighCharts

JavaScript alapú felület, manipulálható CSS és HTML kódokkal. Mindent, amit csak szeretnél beállíthatsz rajta. Szeretnél sraffozott oszlop-diagramokat? Nem probléma. Kisimított vonal-diagram? A kérdés csak az, hogy milyen sima legyen.
Ezekkel az előre leprogramozott chart-okkal minimális programozói tudás mellett is tudsz gyorsan adatvizualizálni.

2. NPashaP gyűjteménye:

NPashaP
A koncepció hasonló, de itt sokkal speciálisabb, ritkábban fellelhető diagramokat találsz. Nem egy közülük interaktivitást is engedélyez.

3. Mbostock gyűjteménye:
Mbostock

Szintén egy magángyűjtemény – nekem a fenti a kedvenc diagramom, de ezenkívül még másik 500-at találsz a linkre kattintva. Nagyon sok világtérkép és egyéb egyedi chart-típusok.
Megjegyzés: ezeket a chart-típusokat használják pl. a NYTimes újságírói is.

Mbostock NYTimes

Ha találsz Te is hasonló open-source chart-gyűjteményt, küldd el e-mail-ben és beágyazom ebbe a posztba!
Szép hetet!
Mester Tomi

Az infografika gyönyörű

A világ legrangosabb infografika bajnoksága az Information is Beautiful Awards. Ide gyakorlatilag akárki nevezhet, akinek van egy szép infografikája. Az idei döntősök pedig már megtekinthetőek – sőt akár Te is szavazhatsz itt. Én már végigböngésztem a galériát, mert ahogy Picasso és később Steve Jobs is mondta, “a jó művész másol, de az igazán nagy lop”. Ha ezt nem is szó szerint értelmezzük, akkor is érdemes belenézni a legjobb anyagokba inspirálódni, adat-vizualizációs trükköket ellesni. Ide pedig kiemeltem neked a tavalyi 2013-as döntő arany érmeseit 4 kategóriában:

1. Videó:
Nemrég hallottam, hogy a 2014-es év legvirálisabb tartalmai eddig a videók és az infografikák voltak – most képzeld el mennyire virális tud lenni egy infografikás videó! A lenti a Naprendszerről szól – 7 percben elmagyarázza azt, amit az iskolában egy éven keresztül tanítanak. Zseniális tanító videó, remek adat ábrázolás, abszolút megragad.

2. Kép kategória:
Az accurate.it csinált egy remek adatelemzés alapú vizualizációt arról, hogy hogyan is alakult a Nobel-díjak sorsa az elmúlt több mint 100  évben. Kiderül belőle, hogy kell-e diploma a Nobel-hez és ráadásul még Budapest is rajta van. :-)

Nobel infografika
Nobel infografika – accurate.it

3. Honlap kategória:
A száraz információ rögtön érdekessé válik, ha interaktív lesz. Kinek mennyi pénze van? Hogyan változik ez? Melyik bizniszben utazik? A milliárdosokról találhatsz egy interaktív listát a Bloomberg-en és ikszelgetheted, hogy pontosan melyik kategóriában listáznál. Szórakoztató!

Milliárdosok infografika
Milliárdosok infografika

4. Infografika készítő app:
Az infogr.am-ról, az egyik legismertebb és legkönnyebben kezelhető infografika készítő app-ról már én is írtam. Nem is véletlenül, tavaly a legjobb lett a kategóriájában. Szóval, ha neked nincsenek 100ezreid vagy felesleges napjaid egy szépen ábrázolt elemzés elkészítésére vagy elkészíttetésére, akkor mindenképp keresd fel ezt az oldalt.

infogr.am - legjobb infografika készítő alkalmazás
infogr.am – legjobb infografika készítő alkalmazás

És ne feledd mégegyszer: az idei legjobbakra Te is szavazhatsz! Ha másért nem, csak a tanulság kedvéért nézz rá az Information is Beautiful idei bajnokságára. Inspirálódj, böngéssz, szavazz! :-)

Mester Tomi

Infografika – okos eszközök

Ha infografika készítésbe vágod a fejszéd, (és már elolvastad az erről szóló cikket) akkor a legjobb, ha a Photoshop-ot vagy az Illustrator-t nyitod meg… Persze nem mindig van szükség a nagyágyúkra, meg aztán nem is feltétlenül akar mindenki túl sok időt rászánni egy kis villantásra. Ezekre az esetekre itt van 3+1 “quick and dirty” eszköz, ami segít neked, hogy percek alatt minőségi infografikát dobj össze.

1. www.infogr.am

infogram infografika
Az infogr.am felülete

Az Infogr.am az egyik legjobb infografika szerkesztő program. Még akkor is próbáld ki, ha most éppen nem akarsz infografikát készíteni.
Előnyei:
– iszonyatosan egyszerű kezelés
– előkészített és gyönyörű sablonok (amiket még relatív kevesen használnak)
– importálható Excel táblák (dupla klikk a grafikonodra)
– több mint 40 féle chart-típus
– online és ingyenes – könnyű megosztani
Hátrányai:
– Ha png-be vagy pdf-be akarsz letölteni (márpedig ez elég gyakran megeshet veled), akkor fizetős verzióra kell váltanod
– kötött felület, nem lehet nagyon személyreszabni a grafikákat

2. piktochart.com

piktochart infografika
A piktochart felülete

A második legjobb infografika szerkesztő program. Szintén online, szintén ingyenes, szintén szép sablonok, szintén excel-import… gyakorlatilag ugyanaz, mint az infogr.am – kicsit talán több lehetőség van az ikonok cserélgetésére, de lényegében ugyanannyira megvan kötve a kezünk. A stílus kicsit más.

3. The Noun Project
noun project ikon infografika

A Noun Project minden bizonnyal a legjobb dolog, ami a piktogramokkal történt az elmúlt 100 évben. Egy felületen találhatsz mindent: ikon bármihez 10 másodpercen belül. Most gyorsan rákerestem 3 véletlenszerű szóra, ami beugrott: “nothing”, “grizzly bear” és “Thor” – mindháromra több találatot is kaptam. Ja igen, ez is ingyenes!

+1. Prezi.com
Oké, a prezi.com-ot már mindenki ismeri (ha esetleg te nem, akkor gyorsan regisztrálj!). De azt kevesen tudják, hogy a beépített alakzatokból egész pofás kis infografikákat lehet összemókolni.

infografika prezi
Infografika Prezivel

Itt bár kicsit több kreativitásra és szép érzékre van szükség, valamint a sablonok sem annyira infografikára szabottak, a szabadságunk sokkal nagyobb. Könnyedén méretezhetsz, igazíthatsz és egyébként, ha már ott jársz, prezentációt is készíthetsz az infografikádból!

Próbáld ki mind a négy eszközt! Ha továbbolvasnál, íme, cikkek még a témában:

Az információ gyönyörű

A 2014-es foci VB trendjei…

Mester Tomi

A megfelelő diagramm az üzenetedhez – I. rész

Ne olvasd tovább ezt a cikket, ha még soha életedben nem tettek le eléd ilyen vagy ehhez hasonló elemzést:

zavaró chart diagramm

Az a baj, hogy már annyira megszoktuk az értelemezhetetlen chart-okat, nem csak heti riportokban, de akár prezentációkban is, hogy már nem is tiltakozunk ellene. Valahogy úgy tűnik, hogy ennek egy elviselhető rossznak kell lennie. A probléma csak az, hogy a hasznos adatokat – amik segítenek a döntésekben és a dolgok megértésében – emiatt meg se próbáljuk befogadni, egyszerűen csak ugorjuk őket. Pedig mennyivel egyszerűbb egy ilyen grafikont elkészíteni és feldolgozni is, mint ez a lenti:

Jó chart diagramm

 

Nem azt mondom, hogy ez a világ legszebb grafikonja, de az biztos, hogy 5 másodpercnél nem több felfogni, hogy miről szól.

Íme az érthető és jó grafikon 5 titka:
1. Legyen üzeneted, amit a grafikonnal támasztasz alá. Tudd mit akarsz mondani és ehhez a mondanivalóhoz szerkeszd meg az ábrád. Előbb mondanivaló –» utána grafikon.
2. A megfelelő adathoz és üzenethez a megfelelő grafikont válaszd. Ez nem könnyű, de lent egy részletes útmutatót kínálok, amiből egyszerűen csak választanod kell.
3. Sose ábrázolj egynél több adathalmazt egy grafikonon. (Kivétel: ha direkt két adathalmaz közötti összefüggést szeretnél megmutatni.)
4. Csak a legfontosabb adatpontokat mutasd meg. (Kivétel: ha trendeket, pl. egy hónapon keresztüli napi honlaplátogatottságot, akarsz megmutatni.)

5. Ellenőrizz: tedd le valaki elé a grafikonodat és kérd meg, hogy mondja meg, mit lát rajta. Ennek prezentációk esetében 5 másodperc alatt meg kell történnie, írott jelentéseknél pedig maximum 20 másodperc az időkeret.

Hogyan válaszd ki, hogy milyen chart-ot használj?
Ez a legtöbbször elhibázott dolog, amivel találkozom. Trendeket oszlopdiagrammokon próbálnak megmutatni, megoszlásokat pedig vonalakkal. Ez nagy baj. Pedig ennek van egy nagyon jól dokumentált és kidolgozott tudománya. Erről találsz anyagot az ajánlott irodalom menüben is, de itt most megosztom veled a legfontosabb részt: a 4 legtöbbször szükséges diagramm-típust.
Mikor, milyen üzenethez, melyiket vedd elő? És hogyan kell őket szépen alkalmazni? Ha ezeket rendben használod, az esetek 99,9%-ban nem lesz problémád:

1. Kördiagramm (aka. pie chart): pie chart - kördiagramm
A kördiagramm összetétel elemzésére való. Ha pl egy külföldi diákcsoport összetételét akarom megmutatni, hogy 50%-a brit, 35%-a német, 10% olasz és 5%-a svájci. A kördiagramm tehát belső arányok ábrázolására jó, olyan esetekben, amikor a részek összege 100%-ot tesz ki. Hibás alkalmazása, amikor összehasonlításra akarják használni. A pie chart-on gyakran nem látszik, hogy pontosan melyik csoport a nagyobb a másiknál. Ezért összehasonlításra, amit inkább előveszünk a fegyvertárunkból az nem más mint az…

2. Oszlopdiagramm (aka. bar chart):   bar chart oszlop diagrammAz oszlopdiagrammban egymással valamilyen módon összefüggő, de nem feltétlenül zárt csoportot alkotó adatokat lehet és kell összehasonlítani. Pl. ha a cég HR, marketing, programozói és design részét akarom összehasonlítani a dolgozók száma szerint – és közben azt akarom kiemelni, hogy a programozók vannak a legtöbben, akkor itt már oszlop diagrammot használok. Rosszul csinálsz valamit, ha a bar chart-tal trendeket probálsz megmutatni, mivel arra való a…

3. Vonaldiagramm (aka. line chart): line chart - vonaldiagrammAz esetek 99%-ban, ha az X-tengelyen időt akarunk ábrázolni, akkor és csak akkor nyúlunk a vonaldiagramhoz. Azaz trendeket mutatunk meg rajta (folyamatokat egy folyamatos vonallal szimbolizálva). Pl. a 2006-os bevétel 10 millió forint volt, a 2007-es már 12, a 2008-as 14, stb…
Ja igen, és a line chart az egyetlen olyan kivétel, ahol igazán érdemes gyakran több adatcsoportot (dataset-et) együtt kezelni – és a trendeken jól láthatóvá tenni, pl a bevétel és a dolgozók számának az összefüggéseit.

4. Hisztogramm: Ritkán szoktuk használni, de a BigData korában elengedhetetlen, hogy elővegyük. Ezen a chart-on eloszlást szoktunk ábrázolni. Amikor rengeteg kis adatcsoportunk van és azoknak a számossága viszonylag nagy, egy hisztogrammal szépen ki lehet rajzolni a csoporton belüli összefüggéseket. Pl. a 10 milliós Magyarország (#bigdata) populációja hisztogrammon – az egyik tengelyen az életkor, a másikon a csoportban levő emberek száma, nemek szerint szét szedve – így néz ki:

hisztogramm
forrás: indexmundi.com

 

Összegzésként, hadd osszam meg veled ezt a szuper összefoglaló ábrát az összes létező chart-típusról (wowww!!). Elég egyértelműen látszik rajta, mikor mihez kell nyúlni. Németh Zoli kollégámtól kaptam… bár kicsit kicsi és tömör mégis elég jól átadja a lényeget. (Katt a nagyításért!)

chart diagramm összefoglaló ábrachart diagramm összefoglaló ábra

Remélem ezek az alapok elég lendületet adnak, hogy te már csak szép grafikonokat csinálj! Ha szeretnél tovább olvasni, nem sokára jön a sorozat második része!

Tomi

Az információ gyönyörű

Az infografika, mint fogalom évről-évre egyre népszerűbb nemzetközileg és itthon egyaránt. Egy jó infografika 3 lábon áll:

1. a nyers adat, azaz az információ, amit tartalmaz
2. az üzenet, amit át akarunk adni vele
3. a dizájn, ami gyönyörködtet és könnyen befogadhatóvá teszi az egészet

És pont ez az, amiért rengeteg rossz infografika van a világon: mindhárom lábhoz más kompetencia kell. Nagyon nehéz egy személyben megtalálni az:

1. adatelemzőt (nyers adat feldolgozása)
2. a kommunikációs szakembert (az üzenet kitalálása)
3. a dizájnert (a grafika megalkotása)

Ha infografikát készítünk az ügyfeleinknek, mi is legalább 3-an foglalkozunk a projekttel – erről a 3 területről. Mindenki mást tesz hozzá, mindenki máshonnan látja a problémát és ez segít abban, hogy a lehető legsokszínűbb és legtartalmasabb ábrákat tudjuk létrehozni.

De ha melletted nincs két másik ember és holnapra kell egy gyönyörű ábra a céges prezidbe… és éppenséggel már este 11 van (már pedig az esetek 99%-ban ez a helyzet, tudom én is. :-)), akkor kövesd az alábbi 3 lépést és nagy baj nem történhet:

1. Fogalmazd meg egy mondatban, hogy mit fog üzenni a grafikád!
Ez legyen tömör és konkrét. Amíg ez nincs meg, ne is lépj tovább!
Példa jó üzenetre 1: “Az elmúlt évben cégünk XY-ágazata Z%-kal több profitot termelt és ezzel átvette a vezetést a többi ágazat felett. Gratulálunk az XY ágazatnak!”

Példa jó üzenetre 2: “Jól láthatóan nagyságrendi különbség van a lekváros, a kakaós és a túrós palacsinta fogyasztás között. Itt az ideje, hogy kitaláljuk, hogy mit kezdjünk ezzel.”

Példa a túl bonyolult, túl általános üzenetre: “Voltak lehetőségek az elmúlt hetekben, amiket elszalasztottunk. De emiatt ne fájjon senkinek sem a feje, pénzügyileg még mindig kedvező helyzetben vagyunk, habár a reklámköltségeinket vissza kell fogni.”

2. Válaszd ki a megfelelő adatot.
Mi támasztja alá a fenti üzenetet? Ami igen, az maradhat, minden egyebet most kihagyhatsz! Személyszerint én azt javaslom, hogy ha nincs sok időd, egyszerre csak 2 dimenzióban gondolkozz. Ilyenek lehetnek:
– idő vs. pénz
– csoportok vs. csoportok mérete
– befektetés vs megtérülés
– stb…

3. Használj egyszerű ábrákat.
Ha megvan az üzenet és az adat, egy olyan ábrát próbálj létrehozni, amit maximum 5 másodperc felfogni! A helyes chart kiválasztásáról (ami szintén egy külön “művészet”) és a megfelelő grafika megálmodásáról későbbi cikkekben fogok beszélni. Viszont ha alapábrákban gondolkozol, akkor biztos, hogy nagy hibát nem véthetsz. Hajrá venn-diagrammok, halmazábrák, grafikonok!

+1. A végleges megvalósítás már részben a saját grafikai készségeiden is múlik… de ne feledd, ha nem vagy Photoshop-guru, akkor sem vagy bajban! PowerPoint-ban és Prezi.com-ban is lehet nagyokat varázsolni az előre beépítétt ábrákkal.
Amire inkább szükséged lehet ennél a pontnál, az egy kis inspiráció.
Fantasztikusan érdekes és gyönyörű infografikákat találsz itt, az egyik leghíresebb weboldalon a témában:
http://www.informationisbeautiful.net

Zárásképpen néhány nagy kedvencem innen! Mert az információ gyönyörű!

Ábra a legalizált drogokról - infografika
Infografika a legalizált drogokról
infografika 1
Infografika az influenza fajtáiról (venn-diagramm)
szakítás facebook-on - infografika
Infografika szakításokról, Facebook-on.

Mester Tomi