Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
KiadtaTibor Fodor Megváltozta több, mint 9 éve
1
Számítógépes Grafika 5. gyakorlat Programtervező informatikus (esti) 2009/2010 őszi félév
2
Információk Gyakorlati diák: http://people.inf.elte.hu/valasek/bevgraf_esti/ http://people.inf.elte.hu/valasek/bevgraf_esti/ E-mail: valasek@inf.elte.huvalasek@inf.elte.hu
3
Adatvizualizáció Adatok vizuális reprezentációja valamilyen általuk eltárolt információ közlésének céljával Tudományos és információs vizualizáció Például: – Emberi géntérkép ábrázolása – Egy weblap látogatói milyen utat tesznek meg a honlapon
4
Általában Nagy mennyiségű adatunk van (Saul Surman New York Times példája) Akár időben változó adatok Interakció igénye Több tudományterületről is kell eszközöket használni (adatbányászat, grafika stb.) Ezért alaposan meg kell tervezni a megjelenítést
5
Adatgyűjtés Adatgyűjtés fejlett eszközökkel bír A legfontosabb: – Mire kell választ adnunk a vizualizációs feladat során? Hogyan használhatjuk fel az adatokat a kérdés megválaszolására? Például: metró térképek (Harry Beck 1930)
6
Adatgyűjtés Rengeteg ingyenes forrás, pl.: – http://www.census.gov/ http://www.census.gov/ – http://www.ksh.hu/ http://www.ksh.hu/
7
A Kérdés A vizualizáció a kommunikáció egy formája Ahhoz, hogy hatékony legyen tudnunk kell mit akarunk kifejezni Minél egyértelműbb a kérdés, annál egyértelműbb lehet a válasz Csak akkor vághatunk bele a tényleges vizualizációba (a kérdés megválaszolásába), ha már tudjuk a kérdést
8
Vizualizáció 1. Adatszerzés (internetről, lemezről stb.) 2. Feldolgozás (parse, adat struktúrálása) 3. Szűrés (érdektelen adatok eltávolítása) 4. Bányászat (statisztikai vagy adatbányászati) 5. Reprezentáció választása (lista, fa stb.) 6. Reprezentáció finomítása, testreszabása 7. Interakció: adatok és/vagy megjelenítés módosítására
9
1. példa Idősor ábrázolása Esetünkben: magyarország népességváltozása és foglalkoztatottságok
10
Mi a kérdés? Hogyan alakult a mai Magyarország területén a népességszám a múlt század folyamán és a foglalkoztatottság a három nagy gazdasági területen?
11
1. Adatgyűjtés Eredeti forrás: http://portal.ksh.hu/pls/ksh/docs/hun/agrar/h tml/tabl1_1_1.html http://portal.ksh.hu/pls/ksh/docs/hun/agrar/h tml/tabl1_1_1.html
12
2. Feldolgozás és 3. Szűrés A táblázatból csak öt oszlopot hagyunk meg (év, népesség illetve mezőgazdasági, erdőgazdálkodási és vízgazdálkodási foglalkoztatottság) A tizedesvesszőket pontokra cseréljük, az idézőjeleket eltávolítjuk Ezeket az xls-ből tabulátorral elválasztva csv-be exportáltunk: – http://people.inf.elte.hu/valasek/bevgraf_esti/05/ido sor1.csv http://people.inf.elte.hu/valasek/bevgraf_esti/05/ido sor1.csv
13
4. Bányászat Minden adatot megjelenítünk De egyszerre csak egy, évtől függő adat lesz a képernyőn
14
5. Reprezentáció választása Egy grafikonnal ábrázoljuk mind a négyféle tárolt adatot
15
Első változat Innen: http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor.zip http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor.zip
16
TLReader.pde class TimeLineReader { ArrayList data; int rowCount; TimeLineReader(String fileName) { data = new ArrayList(); String[] lines = loadStrings(fileName); rowCount = lines.length; for (int i=0; i<rowCount; ++i) { String[] row = lines[i].replace(",", "."). replace("\"", ""). split("\t"); data.add(row); } Tizedesvesszőket tizedespontokra cseréljük Idézőjeleket eltávolítjuk
17
TLReader.pde boolean isValid(int row, int col) { String field = ((String[])data.get(row))[col]; return !field.contains(".."); } String getString(int row, int col) { String field = ((String[])data.get(row))[col]; return field; } int getInt(int row, int col) { String field = ((String[])data.get(row))[col]; return parseInt(field) ; } float getFloat(int row, int col) { String field = ((String[])data.get(row))[col]; return parseFloat(field) ; }
18
TLReader.pde float getColMax(int col) { float fmax = MIN_FLOAT; for (int i=0; i<data.size(); ++i) { if ( isValid(i, col) ) fmax = max(fmax, getFloat(i, col)); } return fmax; } int getColumnCount() { return ((String[])data.get(0)).length; }
19
Idosor.pde TimeLineReader r; float plotX1, plotY1; float plotX2, plotY2; float yearMin; float yearMax; float popMin; float popMax; PFont fnt; int currentColumn;
20
Idosor.pde void setup() { size(600, 400); plotX1 = 50; plotY1 = 60; plotX2 = width - 50; plotY2 = height - 50; r = new TimeLineReader( "http://people.inf.elte.hu/valasek/bevgraf_esti/0 5/idosor1.csv");
21
Idosor.pde yearMin = r.getColMin(0); yearMax = r.getColMax(0); dataMin = r.getColMin(1); dataMax = r.getColMax(1); currentColumn = 1; fnt = loadFont("fnt.vlw"); textFont(fnt); }
22
Karakterkészlet generálása
23
Idosor.pde void draw() { background(128); fill(255); noStroke(); rectMode(CORNERS); rect(plotX1, plotY1, plotX2, plotY2); String title = r.getString(0, currentColumn); textSize(20); fill(0); text(title, plotX1, plotY1-10); drawDataPoints(currentColumn); }
24
Idosor.pde void drawDataPoints(int col) { stroke(0, 64, 255); strokeWeight(3); for (int i=1; i<r.getRowCount(); ++i) { if (r.isValid(i, col)) { float x = map(r.getFloat(i, 0), yearMin, yearMax, plotX1, plotX2); float y = map(r.getFloat(i, col), dataMin, dataMax, plotY1, plotY2); point(x,y); }
25
Utasítások map(value, low1, high1, low2, high2) – A value értéket amit a [low1, high1] intervallumnak eleme átképezi a [low2, high2] intervallumba rectmode(mode) – A téglalapot meghatározó négy számadat paraméter értelmezésének módja: CORNER: balfelső pont + szélesség, magasság CORNERS: balfelső pont, jobbalsó pont CENTER: középpont, szélesség, magasság RADIUS: középpont, szélesség fele, magasság fele
26
Eredmény
27
6. Reprezentáció finomítása Ne csak pontokként jelenjenek meg az adatok, hanem vonalak láncaként
28
Utasítások noFill(): – Nem lesz kitöltése a zárt alakzatoknak beginShape(), endShape(MODE): – Csúcspontokból (vertex) álló összetett alakzatok (shape) megjelenítése – A MODE határozza meg, miként értelmezendőek a beginShape() és endShape() hívások között definiált csúcspontok („összekötési szabály”)
29
Utasítások
35
Idosor.pde void drawDataPoints(int col) { stroke(64, 128, 185); strokeWeight(3); noFill(); beginShape(); for (int i=1; i<r.getRowCount(); ++i) { if (r.isValid(i, col)) { float x = map(r.getFloat(i, 0), yearMin, yearMax, plotX1, plotX2); float y = map(r.getFloat(i, col), dataMin, dataMax, plotY2, plotY1); vertex(x,y); } endShape(); }
36
Eredmény
37
6. Reprezentáció finomítása Jelenjenek meg a feliratok a tengelyeken (milyen évben milyen értékek vannak)! Ennek megfelelően legyenek segédvonalak is az ábrán! Letölthető innen: http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor2.zip http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor2.zip
38
Utasítások textAlign(XMODE, YMODE): – XMODE a vízszintes igazítás módja, LEFT, CENTER vagy RIGHT – YMODE a függőlegesé: TOP, BOTTOM, CENTER vagy BASELINE
39
Idosor.pde void draw() { background(168); fill(255); noStroke(); rectMode(CORNERS); rect(plotX1, plotY1, plotX2, plotY2); String title = r.getString(0, currentColumn); textSize(16); fill(0); textAlign(LEFT, BOTTOM); text(title, plotX1, plotY1-10); drawYearLabels(currentColumn); drawColLabels(); drawDataPoints(currentColumn); }
40
Két új változó int yearInterval : leghamarabb hány év különbséggel rajzolunk ki népességadat segédvonalat függőlegesen int dataInterval : a vizsgált adat értékkészletének hány egységenként csinálunk segédvonalat vízszintesen
41
Utasítások nf(intvalue, digits): – Számból szöveggé alakítás formázással (digits jegynyi érték lesz kiírva) nf(floatValue, left, right) nfc(): – Stringgé alakítás ezreselválasztó vesszőkkel
42
Idosor.pde void drawYearLabels(int col) { fill(0); textSize(10); textAlign(CENTER, TOP); int lastYear = 0; for (int i=1; i<r.getRowCount(); ++i) { int ye = r.getInt(i, 0); if ( ye-lastYear >= yearInterval ) { float x = map( ye, yearMin, yearMax, plotX1, plotX2 ); stroke(220); strokeWeight(1); text(ye, x, plotY2 + 10); line(x, plotY2, x, plotY1); lastYear = ye;} }
43
Idosor.pde void drawColLabels() { stroke(0); fill(0); textSize(10); textAlign(RIGHT, CENTER);
44
Idosor.pde for (float f = dataMin; f < dataMax; f += dataInterval) { float y = map(f, dataMin, dataMax, plotY2, plotY1); line(plotX1 - 3, y, plotX1 + 3, y); text( nfc( (int)(f*1000) ), plotX1 - 5, y); } line(plotX1 - 3, plotY1, plotX1 + 3, plotY1); text( nfc( (int)(dataMax*1000) ), plotX1 - 5, plotY1); } line(plotX1 - 3, plotY1, plotX1 + 3, plotY1); text( nfc( (int)(dataMax*1000) ), plotX1 - 5, plotY1); }
45
Eredmény
46
7. Interakció Lehessen választani, hogy a népesség vagy adott foglalkoztatási adatokat akarom nézni Letölthető innen: http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor3.zip http://people.inf.elte.hu/valasek/bevgraf_esti/ 05/Idosor3.zip
47
MButton class MButton { boolean toggled, mouseOver; int x, y, w, h; color cLine, cFill; String txt; MButton(int ix, int iy, int iw, int ih, String t) { toggled = false; x = ix; y = iy; w = iw; h = ih; txt = t; cLine = color(50); cFill = color(140); }
48
MButton boolean isMouseOver() { if ( mouseX >= x && mouseX = y && mouseY <= y+h) return true; else return false; } void Update() { mouseOver = isMouseOver(); }
49
MButton void Clicked() { Toggle(isMouseOver()); } void Toggle(boolean b) { toggled = b; if (toggled) cFill = color(255); else cFill = color(140); }
50
MButton void Draw() { strokeWeight(1); stroke(cLine); if (mouseOver && !toggled) fill(200); else fill(cFill); rectMode(CORNER); rect(x, y, w, h); fill(0); textAlign(CENTER, CENTER); textSize(12); text(txt, x+w/2, y+h/2); }
51
Idosor.pde ArrayList buttons; void setup() {... int szel = (int)( (plotX2-plotX1)/ (float)(r.getColumnCount()-1)); for (int i=1; i<r.getColumnCount(); ++i) { Mbutton b = new MButton( (int)plotX1 + (i-1)*szel, (int)plotY1 - 30, szel, 30, r.getString(0, i)); b.Toggle(i==0); buttons.add(b); }... }
52
Idosor.pde void draw() {... drawButtons(); drawYearLabels(currentColumn); drawColLabels(); drawDataPoints(currentColumn); } void drawButtons() { for (int i=0; i<buttons.size(); ++i) { MButton b = (MButton)buttons.get(i); b.Update(); b.Draw(); }
53
Idosor.pde void mousePressed() { if (mouseButton == LEFT && mouseX plotX1 && mouseY > plotY1-30 && mouseY < plotY1) { for (int i=0; i<buttons.size(); ++i) { MButton b = (MButton)buttons.get(i); b.Clicked(); if (b.isMouseOver()) { currentColumn = i+1; dataMin = r.getColMin(currentColumn); dataMax = r.getColMax(currentColumn); }
54
Eredmény
55
Feladat 1 Ha az egér egy létező érték közelében van, akkor jelenjen meg az ottani adat A szöveg mindig úgy jelenjen meg, hogy ne lógjon ki a rajzterületről!
56
Feladat 2 Legyen árnyéka a szövegnek
57
Feladat 3 Lehessen változtatni hány évenként nézzük az adatokat és azt is, hogy az adatok segédvonalkázása milyen sűrűn történjen
Hasonló előadás
© 2024 SlidePlayer.hu Inc.
All rights reserved.