Bakalárska práca

Stránka obsahujúca informácie o bakalárskej práci Interaktívna vizuálna analýza stromov odvodení pre CGA Shape gramatiky.

Všeobecné info

Meno študenta:
Adam Šabík
Kontakt:
adam0sabikgmail.com
Názov práce (sk):
Interaktívna vizuálna analýza stromov odvodení pre CGA Shape gramatiky
Názov práce (en):
Interactive Visual Analysis of Derivation Trees for CGA Shape Grammars
Školiteľ:
Mgr. Ivana Uhlíková
Predbežný náhľad práce:
Bakalársky seminár:
Bakalársky seminár:

Prezentácia zdrojov

Podobné staršie bakalárske práce

Coffee
Black hot drink

Východiskové odborné práce

Visual Analysis of Large Graphs
Tatiana Von Landesberger, Arjan Kuijper, Tobias Schreck,Jor̈nKohlhammer,JarkeVanWijk,Jean- Daniel Fekete, Dieter Fellner
Visual Representations of Graphs
Graph Visualization and Navigation in Information Visualization: a Survey
Graph layout, spanning trees, Clustered graphs
The State of the Art in Visualizing Dynamic Graphs
Eurographics Conference on Visualization (EuroVis) (2014)

Existujúce riešenia

Circle packing
Expandable, reducible parts of graph
Force Collapsible
Interactive collapsible tree parts

Manuály, učebnice, tutorialy, iné dokumenty

Data-Driven Documents
Data visualisation, interaction, animation
official documentation
Knockout.js
Lets define view model and bind to controls on a webpage

Cieľ práce

Študent implementuje a potom porovná rôzne metódy interaktívnej vizualizácie stromu odvodení a vývojového grafu. Vizualizácia má byť vytvorená ako súčasť webovskej aplikácie pre procedurálne modelovanie. Vstupné dáta sú spravované knižnicou Knockout.js pomocou vzoru návrhového MVVM.

Grafy by mali byť zobrazované pomocou knižnice "Data-Driven Documents". Vzhľadom na veľkosť grafov je dôležitá jednoduchá interakcia s nimi a navigácia v nich. Používateľ by mal vedieť skrývať a odkrývať časti grafu, zobrazovať detailné náhľady podgrafov, pričom všeobecný kontext by mal byť zachovaný (focus+context vizualizácia). Nákres grafu sa pri tom môže automaticky deformovať a preskupovať.

Dôležitou súčasťou interaktívnej vizualizácie stromu odvodenia je prepojenie s existujúcim 3D pohľadom (linking and brushing) prostredníctvom knižnice Knockout.js. To znamená, že ak používateľ označí hranu v grafe odvodení, zvýrazní sa prislúchajúca časť modelu v 3D pohľade a opačne. Týmto spôsobom sa dá jednoducho identifikovať, ktoré pravidlá generujú ktoré časti modelu.

  • vytvorenie webovej stránky bak. práce
  • zbieranie zdrojov a analýza technológií
  • preskúmanie možností vytvorenia vývojového grafu
  • preštudovanie technológií existujúcej web aplikácie
  • návrh funkcionality
  • písanie prvých strán bakalárskej práce
  • návrh vývojového grafu
  • implementácia jednoduchého vývojového grafu na existujúcej web aplikácii
  • implementácia zobrazovania a skrývania častí grafu
  • návrh interakcie medzi vývojovým grafom a 3D modelom
  • implementácia interakcie medzi vývojovým grafom a 3D modelom
  • testovanie a odlaďovanie prípadných chýb v aplikácii
  • dopísanie bakalárskej práce

Plán práce

Plán práce sa nachádza vo wiki projektu

Týždenník

  • 16.2. - 22.2. Získanie dát z observable array SeedWidgets.Instances()[0] o 3D modeli a vypísanie týchto dát ako strom súborového systému
  • 23.2 - 1.3 Zopakovanie D3.js layoutu a vykreslenie stromu súvisiaceho s 3D modelom. Vytvorenie JSON objektu z SeedWidgets.Instances()[0]
  • 2.3 - 8.3 Pridanie jednoduchej interakcie do stromu odvodení vytvoreného pomocou D3.js - keď sa prejde s myšou nad uzol, tak v 3D modeli zobrazí/skryje danú časť
  • 9.3 - 15.3 Skrývanie uzlov vo Force Collapsible - skryjú sa uzly (zhluknú) na úrovni i a vo vyšších sa skryjú len na miestach, kde má uzol >=2 synov
  • 16.3 - 22.3 Implementácia skrývania uzlov pri načítaní grafu + fix - najprv sa musia pridať atribúty `id`, potom sa môžu skrývať
  • 23.3 - 29.3 Pridanie textov k uzlom - po prejdení myšou nad uzlom sa zobrazí info o uzle - ak je podporovaný element foreignobject v SVG, tak zobraz pomocou neho, inak pomocou text elementu
  • 30.3 - 5.4 Prechod na novú verziu aplikácie Beatrice. Príprava zakomponovania viacerých `seed`-ov - viacerých nezávislých stromov pomocou D3.js
  • 6.4 - 12.4 Vytvorenie singletonu graphManager pre preposielanie udalostí a správa vizualizácií
  • 13.4 - 19.4 Lepšie nastavenie parametrov pre vizualizáciu rozsiahlych stromov pomcou Force Layoutu. Zlepšenie načítavania vizualizácie (v časových intervaloch)
  • 20.4 - 26.4 Pridanie vizualizácie pomocou Circle Packing
  • 27.4 - 3.5 Force Collapsible interakcia - keď sa prejde nad časťou v 3D modeli, ktorá je vo vizualizácii schovaná, tak sa vizuálne zmení najbližší zobrazený predchodca
  • 4.5 - 10.5 Úprava farieb, zmena ShapeSubscriptions