Gráfok vizualizációja. Jeszenszky Péter Debreceni Egyetem, Informatikai Kar

Átírás

1 Gráfok vizualizációja Jeszenszky Péter Debreceni Egyetem, Informatikai Kar

2 Vizualizációs eszközök Néhány eszköz: Gephi Graphviz NodeXL SONIVIS Tulip yed Egy hasznos lista: Social network analysis software 2

3 Graphviz (1) Története az 1980-as évek végéig nyúlik vissza vissza (AT&T Research Labs) Megvalósítás: C (kb programsor) Platform: Linux, Mac, Windows 2000 óta nyílt forrású Licenc: Common Public License Az IBM nem GNU GPL kompatibilis szabad szoftver licence Állományformátum: DOT 3

4 Graphviz (2) Eszközök: Rajzolás: circo, dot, fdp, neato, twopi, sfdp Generálás: gvgen Előfeldolgozás: unflatten Manipulálás: prune Támogatott állományformátumok rajzolásnál: JPEG, PDF, PNG, PostScript, SVG, 4

5 Graphviz: példa graph graph {{ Budapest[shape="diamond", Budapest[shape="diamond", style="rounded"]; style="rounded"]; Debrecen[shape="box",style="rounded"]; Debrecen[shape="box",style="rounded"]; Budapest--Cegléd Budapest--Cegléd [label="73km", [label="73km", color="red", color="red", style="bold,dashed"]; style="bold,dashed"]; Budapest--Hatvan Budapest--Hatvan [label="67km"]; [label="67km"]; Budapest--Újszász Budapest--Újszász [label="84km"]; [label="84km"]; Cegléd--Szolnok Cegléd--Szolnok [label="27km", [label="27km", color="red", color="red", style="bold,dashed"]; style="bold,dashed"]; Füzesabony--Eger Füzesabony--Eger [label="17km"]; [label="17km"]; Füzesabony--Tiszafüred Füzesabony--Tiszafüred [label="30km"]; [label="30km"]; Füzesabony--Miskolc Füzesabony--Miskolc [label="57km"]; [label="57km"]; Hatvan--Újszász Hatvan--Újszász [label="52km"]; [label="52km"]; Hatvan--Füzesabony Hatvan--Füzesabony [label="58km"]; [label="58km"]; Karcag--Debrecen Karcag--Debrecen [label="59km", [label="59km", color="red", color="red", style="bold,dashed"]; style="bold,dashed"]; Miskolc--Nyíregyháza Miskolc--Nyíregyháza [label="88km"]; [label="88km"]; Nyíregyháza--Debrecen Nyíregyháza--Debrecen [label="49km"]; [label="49km"]; Tiszafüred--Debrecen Tiszafüred--Debrecen [label="73km"]; [label="73km"]; Tiszafüred--Karcag [label="45km"]; Tiszafüred--Karcag [label="45km"]; Szolnok--Karcag Szolnok--Karcag [label="62km", [label="62km", color="red", color="red", style="bold,dashed"]; style="bold,dashed"]; Szolnok--Újszász [label="16km"]; Szolnok--Újszász [label="16km"]; }} 5

6 Graphviz: példa 6

7 Graphviz: példa 7

8 Néhány elterjedtebb formátum DOT (Graphviz) GEXF (Graph Exchange XML Format) XML formátum (RNC, RNG, XSD) GraphML Nem XML szöveges formátum XML formátum (XSD) Graph Modelling Language (GML) Nem XML szöveges formátum 8

9 GEXF (Graph Exchange XML Format) A Gephi projektben fejlesztett nyílt XML formátum gráfok ábrázolásához Fontosabb jellemzők: Lehetővé teszi strukturált adatok tárolását a csúcsokhoz és élekhez Hierarchikus gráfok ábrázolása Dinamikus gráfok támogatása Kiterjeszthetőség XML sémák (RNC, RNG, XSD): (az akutális verzió az 1.2draft számú) 9

10 GEXF: támogatás Kapcsolódó szabad és nyílt forrású szoftverek: Gephi (szerkesztés, elemzés, vizualizáció) LibGEXF (C++ programkönyvtár) gexf4j (Java programkönyvtár) GEXF Explorer (SWF megjelenítő) 10

11 GEXF: Hello, világ! példa <gexf <gexf xmlns=" xmlns=" version="1.2"> version="1.2"> <meta <meta lastmodifieddate=" "> lastmodifieddate=" "> <creator>me</creator> <creator>me</creator> <description>hello, <description>hello, world! world! example</description> example</description> </meta> </meta> <graph <graph defaultedgetype="directed"> defaultedgetype="directed"> <nodes> <nodes> <node <node id="a" id="a" label="hello"/> label="hello"/> <node <node id="b" id="b" label="world"/> label="world"/> </nodes> </nodes> <edges> <edges> <edge <edge id="1" id="1" source="a" source="a" target="b"/> target="b"/> </edges> </edges> </graph> </graph> </gexf> </gexf> 11

12 GEXF: vegyes gráfok Egy gráf tartalmazhat irányított, irányítatlan és kétirányú éleket is: <gexf <gexf xmlns=" xmlns=" version="1.2"> version="1.2"> <meta <meta lastmodifieddate=" "> lastmodifieddate=" "> <creator>me</creator> <creator>me</creator> <description>mixed <description>mixed graph graph example</description> example</description> </meta> </meta> <graph> <graph> <nodes> <nodes> <node <node id="a"/> id="a"/> <node id="b"/> <node id="b"/> <node <node id="c"/> id="c"/> <node <node id="d"/> id="d"/> </nodes> </nodes> <edges> <edges> <edge <edge id="1" id="1" source="a" source="a" target="b" target="b" type="directed"/> type="directed"/> <edge <edge id="2" id="2" source="a" source="a" target="c" target="c" type="undirected"/> type="undirected"/> <edge <edge id="3" id="3" source="a" source="a" target="d" target="d" type="mutual"/> type="mutual"/> </edges> </edges> </graph> </graph> </gexf> </gexf> 12

13 GEXF: attribútumok (1) Adatok tárolása csúcsokhoz és élekhez: <gexf <gexf xmlns=" xmlns=" version="1.2"> version="1.2"> <graph> <graph> <attributes <attributes class="node"> class="node"> <attribute <attribute id="active" id="active" title="active" title="active" type="boolean"> type="boolean"> <default>true</default> <default>true</default> </attribute> </attribute> <attribute <attribute id="priority" id="priority" title="priority" title="priority" type="string"> type="string"> <options>low medium high</options> <options>low medium high</options> <default>medium</default> <default>medium</default> </attribute> </attribute> </attributes> </attributes> <attributes <attributes class="edge"> class="edge"> <attribute <attribute id="weight" id="weight" title="weight" title="weight" type="double"/> type="double"/> </attributes> </attributes> </graph> </graph> </gexf> </gexf> 13

14 GEXF: attribútumok (2) Adatok tárolása csúcsokhoz és élekhez (folytatás): <graph> <graph> <nodes> <nodes> <node <node id="a"> id="a"> <attvalues> <attvalues> <attvalue <attvalue for="priority" for="priority" value="high"/> value="high"/> </attvalues> </attvalues> </node> </node> </nodes> </nodes> <edges> <edges> <edge <edge id="1" id="1" source="a" source="a" target="a"> target="a"> <attvalues> <attvalues> <attvalue <attvalue for="weight" for="weight" value="1e-5"/> value="1e-5"/> </attvalues> </attvalues> </edge> </edge> </edges> </edges> </graph> </graph> 14

15 GEXF: VIZ modul (1) Csúcsok és élek megjelenésének vezérlése (szín, pozíció, méret, alak, vonalvastagság): <gexf <gexf xmlns=" xmlns=" xmlns:viz=" xmlns:viz=" version="1.2"> version="1.2"> <graph <graph defaultedgetype="directed"> defaultedgetype="directed"> <nodes> <nodes> <node <node id="r" id="r" label="red"> label="red"> <viz:color <viz:color r="255" r="255" g="0" g="0" b="0"/> b="0"/> <viz:position <viz:position x="-100" x="-100" y="-100" y="-100" z="0"/> z="0"/> </node> </node> <node <node id="g" id="g" label="green"> label="green"> <viz:color <viz:color r="0" r="0" g="255" g="255" b="0"/> b="0"/> <viz:position <viz:position x="100" x="100" y="-100" y="-100" z="0"/> z="0"/> </node> </node> <node <node id="b" id="b" label="blue"> label="blue"> <viz:color <viz:color r="0" r="0" g="0" g="0" b="255"/> b="255"/> <viz:position <viz:position x="100" x="100" y="100" y="100" z="0"/> z="0"/> </node> </node> <node <node id="y" id="y" label="yellow"> label="yellow"> <viz:color <viz:color r="255" r="255" g="255" g="255" b="0"/> b="0"/> <viz:position <viz:position x="-100" x="-100" y="100" y="100" z="0"/> z="0"/> </node> </node> </nodes> </nodes> 15

16 GEXF: VIZ modul (2) Csúcsok és élek megjelenésének vezérlése (szín, pozíció, méret, alak, vonalvastagság): <edges> <edges> <edge <edge id="1" id="1" source="r" source="r" target="g"> target="g"> <viz:thickness <viz:thickness value="2.0"/> value="2.0"/> </edge> </edge> <edge <edge id="2" id="2" source="g" source="g" target="b"/> target="b"/> <edge <edge id="3" id="3" source="b" source="b" target="y"/> target="y"/> <edge <edge id="4" id="4" source="y" source="y" target="r"> target="r"> <viz:shape <viz:shape value="dotted"/> value="dotted"/> <viz:color <viz:color r="255" r="255" g="0" g="0" b="255"/> b="255"/> </edge> </edge> </edges> </edges> </graph> </graph> </gexf> </gexf> 16

17 GEXF: dinamikus gráfok (1) Időben változó topológia: <gexf <gexf xmlns=" xmlns=" xmlns:viz=" xmlns:viz=" version="1.2"> version="1.2"> <graph <graph mode="dynamic" mode="dynamic" timeformat="date" timeformat="date" start=" "> start=" "> <nodes> <nodes> <node <node id="a"/> id="a"/> <node <node id="b"/> id="b"/> <node <node id="c"/> id="c"/> <node <node id="d" id="d" start=" "/> start=" "/> </nodes> </nodes> <edges> <edges> <edge <edge id="1" id="1" source="a" source="a" target="b" target="b" start=" "/> start=" "/> <edge <edge id="2" id="2" source="b" source="b" target="c" target="c" start=" "/> start=" "/> <edge <edge id="3" id="3" source="c" source="c" target="a" target="a" start=" "/> start=" "/> <edge <edge id="4" id="4" source="a" source="a" target="d" target="d" start=" "/> start=" "/> <edge <edge id="5" id="5" source="b" source="b" target="d" target="d" start=" "/> start=" "/> <edge <edge id="6" id="6" source="c" source="c" target="d" target="d" start=" "/> start=" "/> </edges> </edges> </graph> </graph> 17 </gexf> </gexf>

18 GEXF: dinamikus gráfok (2) Időben változó topológia: több időintervallumban létező csúcsok és élek ( spells ) <nodes> <nodes> <node <node id="f"> id="f"> <spells> <spells> <spell <spell start=" " start=" " end=" "/> end=" "/> <spell <spell start=" " start=" " end=" "/> end=" "/> <spell start=" "/> <spell start=" "/> </spells> </spells> </node> </node> </nodes> </nodes> <edges> <edges> <edge <edge id="10" id="10" source="f" source="f" target="g"> target="g"> <spells> <spells> <spell <spell start=" " start=" " end=" "/> end=" "/> <spell <spell start=" "/> start=" "/> </spells> </spells> </edge> </edge> </edge> </edge> 18

19 GEXF: dinamikus gráfok (3) Időben változó adatok: <attributes <attributes class="node" class="node" mode="dynamic"> mode="dynamic"> <attribute <attribute id="priority" id="priority" title="priority" title="priority" type="string"> type="string"> <options>low medium high</options> <options>low medium high</options> <default>medium</default> <default>medium</default> </attribute> </attribute> </attributes> </attributes> <nodes> <nodes> <node <node id="g"> id="g"> <attvalues> <attvalues> <attvalue <attvalue for="priority" for="priority" value="low" value="low" start=" " start=" " end=" "/> end=" "/> <attvalue <attvalue for="priority" for="priority" value="medium" value="medium" start=" "/> start=" "/> </attvalues> </attvalues> </node> </node> </nodes> </nodes> 19

20 Gephi (1) Platform gráfok megjelenítéséhez és vizsgálatához Mottó: Photoshop for graphs Szabad és nyílt forrású (GNU AGPLv3) Célplatform: Windows, Linux, Mac OS X Megvalósítás: Java, NetBeans Platform Rendszerkövetelmények: Java SE 6, OpenGL 1.2 Natív formátum: GEXF Importálás: CSV, DOT, GML, GraphML, Ábra exportálása: PDF, SVG 20

21 Gephi (2) Fejlesztés koordinálása: Gephi Consortium (nonprofit szervezet) Elismerés: 2010 Duke's Choice Awards (az Innovative Technical Data Visualization kategória győztese) The Duke's Choice Awards celebrate extreme innovation in the world of Java technology and are granted to the most innovative projects using the Java platform 21

22 Gephi: jellemzők Egyszerűen használható felhasználói felület Alkalmas nagyméretű gráfok kezeléséhez (akár csúcs és él) Számos beépített elrendezési algoritmus Statisztikák és metrikák számítása (PageRank, HITS, klaszterezési együttható, centralitási mérőszámok, ): felhasználható a megjelenés testreszabásához is Beépített klaszterezési eljárások Dinamikus és hierarchikus gráfok kezelése Moduláris felépítés: bővítmények segítségével új funkciók adhatók a programhoz (jelenleg kb. 100 bővítmény elérhető) 22

23 Gráfok létrehozása Facebook szociális háló: netvizz Facebook alkalmazás a szociális hálónk exportálásához Levelezési kapcsolatok gráfja EML állományokból (Spigot bővítmény) Twitter követés gráfja (SpigotTwitter bővítmény) Véletlen gráfok Watts-Strogatz Small World Gilbert modell: G(n,p) WWW böngészés gráfja (HTTP Graph bővítmény)23

24 Facebook szociális háló exportálása (1) A Facebook-ra bejelentkezés után keressük meg a netvizz alkalmazást 24

25 Facebook szociális háló exportálása (2) A telepítés során engedélyezzük az alkalmazásnak a hozzáférést az adatlapunkhoz: 25

26 Facebook szociális háló exportálása (3) Adjuk meg, hogy milyen adatok kerüljenek a profilokból exportálásra, majd kövessük a nyíllal megjelölt linket! 26

27 Facebook szociális háló exportálása (4) Mentsük le a nyíllal megjelölt linkről az eredményül kapott GML állományt! 27

28 Facebook szociális háló vizsgálata (1) Töltsük be a Gephi programba a netvizz által létrehozott GML állományt (File Open )! A gráf típusaként (Graph Type) válasszunk irányítatlant (Undirected) 28

29 Facebook szociális háló vizsgálata (2) Egy ilyen gráfot kapunk Ennek megjelenését fogjuk szebbé tenni Célunk, hogy a csúcsok mérete legyen arányos a Betweenness centralitási mérőszámmal, a színek pedig jelezzék az ismerősök nemét 29

30 Facebook szociális háló vizsgálata (3) Hívjuk elő a statisztikákat számoló panelt (Window Statistics), majd kattintsunk az Avarage Path Length mellett a Run gombra! 30

31 Facebook szociális háló vizsgálata (4) A megjelenő panelen kérjük a centralitási mérőszámok normálását! 31

32 Facebook szociális háló vizsgálata (5) Az eredmény (megtekintés után bezárható az ablak): 32

33 Facebook szociális háló vizsgálata (6) Hívjuk elő a Ranking panelt (Window Ranking), majd a Choose a rank parameter beállításnál válasszuk a Betweenness Centrality-t! 33

34 Facebook szociális háló vizsgálata (7) A gyémánt ikonra kattintva érhetjük el, hogy a megjelenítésnél a csúcsok mérete a kiválasztott mérőszámmal legyen arányos A Max size mezőben írható elő a csúcsok maximálás mérete Válasszuk például az 50 értéket, majd kattintsunk az Apply gombra! 34

35 Facebook szociális háló vizsgálata (8) Az eredmény: 35

36 Facebook szociális háló vizsgálata (9) Következő lépésben el fogjuk érni, hogy különböző színek ábrázolják a nemeket, ehhez hívjuk elő a Partition panelt (Window Partition) Az ismerősök neme akkor áll rendelkezésre, ha az adatok exportálásánál kértük a nem (sex) tárolását 36

37 Facebook szociális háló vizsgálata (10) Kattintsunk a zöld ikonra, majd a mellette megjelenő Choose a partition parameter alatt válasszuk ki a nemet (sex)! 37

38 Facebook szociális háló vizsgálata (11) Az Apply gombra kattintva láthatjuk a nemek arányát Szokott módon null jelöli a hiányzó értéket 38

39 Facebook szociális háló vizsgálata (12) Az eredmény: 39

40 Facebook szociális háló vizsgálata (13) Alkalmazzunk egy Layout algoritmust a gráfra, amely át fogja rendezni a csúcsokat (Window Layout) A Choose a Layout alatt válasszuk a Force Atlas elrendezést! 40

41 Facebook szociális háló vizsgálata (14) Adjuk meg a Layout algoritmus paramétereit! Módosítsuk a Repulsion Strenght paraméter értékét például re, a többi paraméternél fogadjuk el az alapértelmezést A Run gombra kattintva elindul az algoritmus, ezután a Stop gombbal bármikor megszakítható a futás 41

42 Facebook szociális háló vizsgálata (15) Az eredmény: 42

43 Facebook szociális háló vizsgálata (16) Végül jelenítsük meg az ismerősök nevét is, ehhez a megjelölt T ikonra kell kattintani az ablak alján 43

44 44