Michał+Kołkowski

Michał Kołkowski 236391, IS 2 Rok, 2011-12


 * Temat:** Wizualizacja informacji tekstowej


 * O stanie pracy:** Projekt w wersji 1.0 jest skończony.

__**Wersja ostateczna pracy, która jest wydrukowana, na dołączonej płycie oraz w APD:**__ Były poprawione literówki, składnia zdań oraz rozdziały zaczynają się na nowych stronach. http://mkolkowski.lqnstudio.mydevil.net/text/version1.2/

__**Gotowy projekt w wersji 1.0 można znaleźć tutaj:**__ http://mkolkowski.lqnstudio.mydevil.net/

https://repo.mydevil.net/svn/pub/lqnstudio/vsearch
 * __Kod projektu - repozytorium SVN (foldery zgodnie z przyjętymi zasadami SVN):__**

__**DZIENNIK ZMIAN PROJEKTU(WebSVN):**__ https://repo.mydevil.net/svn/pub/lqnstudio/vsearch/log.php?repname=vsearch&path=%2F&isdir=1&

http://mkolkowski.lqnstudio.mydevil.net/prezentacja4.pdf
 * __Prezentacja na seminarium 7 grudnia 2012:__**

http://mkolkowski.lqnstudio.mydevil.net/prezentacja3.pdf
 * __Prezentacja na seminarium 19 października 2012:__**

__O porządku w repozytorium i projekcie w wersji 0.2__

https://repo.mydevil.net/svn/pub/lqnstudio/vsearch ( mój kod jest w większości w folderach //vsearch/main//, //vsearch/struct// oraz //vsearch/wordnet// [w ostatnim jest kod php], natomiast folder //vsearch/libs// to biblioteki zewnętrzne głównie jQuery i dodatki do niego )
 * OBECNY KOD PROJEKTU (wersja 0.2 w tags/version0.2, wersja 1.0 w tags/version1.0, wersja 1.0 w trunk - skończona i gotowa do ewentualnego dalszego rozwoju) :**

- Dłuższy opis projektu w wersji 0.2 http://mkolkowski.lqnstudio.mydevil.net/opis.pdf

**Plan pracy i dokumentacja**
Przedstawiam wstępny plan pracy, jest to na razie opis poszczególnych etapów pracy czy modułów wchodzących w skład projektu. Z czasem plan ulegnie zmianie oraz uszczegółowieniu i wtedy stworzę plan, który znajdzie się w pracy.


 * Linki do moich prezentacji z Proseminarium Inżynierskiego:**
 * 1) Początek o projekcie, JavaScript, podstawy źródeł danych - http://fizyka.umk.pl/~236391/pracaInz/PracaInzynierska.pdf - Ten pdf jest skupiony w połowie na bazie freebase.com, z której zdecydowałem się na razie nie korzystać(używam Wordnet). Reszta o Wordnet i Java Script.
 * 2) Technologia HTML 5 Canvas - Potrzebne podstawy o Canvasie - http://fizyka.umk.pl/~236391/pracaInz/prezentacjaInz2.pdf


 * Wstępny plan pracy:**

1. Przedstawienie celu pracy i wyjaśnienie podstawowych koncepcji wizualizacji informacji. Inne projekty tego typu i ich błędy. 2. Dostępne zbiory danych, które można wizualizować - Opis budowa, sposób pobierania, wykorzystane technologie i rozwiązania. a) **Wordnet** - słownik języka angielskiego. Jego dotyczy stworzony przeze mnie program) -opis ogólny i relacje -budowa Wordnet na podstawie plików WNDB -Wordnet w SQLITE -Dokładny sposób pobierania danych z bazy i przekazywania do programu b) freebase.com - nierelacyjna baza danych tworzona przez społeczność internetową.(na razie go w ogóle nie używam, ale wcześniej zgromadziłem o tym sporo informacji) c) Inne: parsowanie informacji z wikipedii, używanie google search API ( **Ostatecznie nie planuje umieszczenia wątku o tym w pracy. Możliwe, że wspomnę o różnych ogólnodostępnych bazach danych w paru zdaniach)** 3. **Struktury do przechowywania danych**. Podział na klasy. 4. Sposób wizualizacji informacji. Algorytmy rozkładu grafu/drzewa, użyte pomocne algorytmy, możliwości i ograniczenia. a) **Force-directed layout** - opis używanego w programie algorytmu opartego na siłach Hooka i Coulomba, wraz z zastosowanymi przeze mnie modyfikacjami. b) Algorytmy pomocnicze: -algorytm rozkładu początkowego, który pozwala bardzo szybko osiągnąć zbieżność, która jest problemem w algorytmie opartym na siłach. 5. Sposób wizualizacji informacji, kwestia techniczna, interfejs użytkownika. 6. Dalsze pomysły na rozwój projektu, ocena podobnych. 7. Bibliografia
 * Użyte technologie i narzędzia
 * Sposób wyświetlania informacji na Canvasie.
 * Rozmiar canvasa zależny od wielkości okna przeglądarki
 * Interfejs użytkownika, **zastosowane dodatki jQuery**

__Poniżej następuje omawianie poszczególnych punktów pracy, które będzie często aktualizowane:__

1.1 Wstęp do tematu
Chciałbym uzyskać przeglądarkę wizualną bazy danych dostarczonej z zewnątrz. __Obecnie wizualizuję słownik języka angielskiego Wordnet.__ Po wpisaniu frazy użytkownik będzie mógł rozwinąć powiązane z frazą informację w interesującym go kierunku. Każda informacja będzie węzłem i węzły będą ze sobą połączone tworząc wspólnie graf lub drzewo(czyli graf z korzeniem). Przypomina to nieco formę popularnej techniki notowania - map myśli.

W ten sposób można uzyskać zadane zagadnienie przedstawione na schemacie - od ogólnego korzenia do coraz bardziej szczegółowych informacji. Jednym z problemów projektu jest przedstawienie dużej ilości informacji - po prostu w większości tego typu projektów, po rozwinięciu paru węzłów schemat staje się kompletnie niewidoczny, co ogranicza funkcjonalność takiej aplikacji.

Ten problem jest widoczny również w mojej obecnej aplikacji. Po wpisaniu słowa "go", na grafie algorytm próbuje przedstawić ponad 200 węzłów. Przy obecnym algorytmie wymaga to mnóstwo czasu, aby osiągnąć zbieżność i odpowiedniego przeskalowania "długości sprężyn" (algorytm bazuje na prawie Hooka).

Po za typowym wyświetlaniem węzłów połączonych ze sobą istnieje wiele innych możliwości. Taką możliwość prezentuje np. projekt ASK KEN opisany poniżej. Będę te możliwości rozważał - podchodząc do tego tematu należy też wykazać się pomysłowością.

Ogólnie celem mojej pracy jest pokazanie sposobów wizualizacji danych tekstowych, tak by wszystkie ważne elementy były widoczne dla użytkownika i aby całość tworzyła dobre wrażenie wizualne. Oprócz samych sposobów wizualizacji ważnymi problemami są: pobieranie danych z zewnętrznych źródeł, umieszczanie ich w odpowiednich strukturach oraz tworzenie przyjaznego i funkcjonalnego interfejsu programu wizualizującego.

Bardzo ciekawie są różne metody zaprezentowane w poniższym artykule: "Przybliżenie semantyczne w wizualizacji informacji w Internecie i bibliotekach cyfrowych" Będę chciał wykorzystać znajdujące się tu informację: http://www.nowyebib.info/2006/77/osinska.php

Bardzo ciekawe przykłady wizualizacji wraz z przykładami znalazłem też tutaj: http://thejit.org/demos/

1.2 Podobne projekty
Dokładnie obejrzałem podane wstępnie linki i omówiłem poniżej parę z nich, ponieważ mogą one stanowić dla mnie schemat, szczególnie w początkowych fazach projektu. Mogę też uniknąć uzyskiwanych w nich błędów.

Z pewnością sposób wizualizacji przypomina mapy myśli, więc przejrzałem też programy z tym związane, szczególnie open sourcowe np. http://freemind.sourceforge.net/wiki/index.php/Main_Page

Korzysta z bazy leksykalnej języka angielskiego WordNet. Jest to świetne narzędzie językowe. WordNet to obszerna baza danych opisująca zależności semantyczne między słowami występującymi w języku angielskim. Pomiędzy słowami zachodzą relacje np.synonimy,homonimy,antonimy i w ten sposób są one połączone. Ponieważ sam używam obecnie Wordnet, to poświecę jemu sporo miejsca w następnych rozdziałach.
 * a) Wordnet EDITOR:** http://wordventure.eti.pg.gda.pl/wne.html

Jesli chodzi o sam Wordnet EDITOR to umożliwia on zarówno przeglądanie jak i edycję słownika WordNet. Z wad należy wymienić problemy z wyświetlaniem dużej liczby informacji oraz w tym przypadku również spadek wydajności. Niestety te problemy są naprawdę duże i skutecznie ograniczają korzystanie z projektu. Projekt wykonany jest w technologi FLASH, której ja chciałem w miarę możliwości uniknąć.

Plusem projektu są różne możliwości wyszukiwania, pokazywanie relacji między synsetami i słowami. W panelu po lewej są one dokładnie opisane. Ogólnie projekt jest inny niż to co na razie prezentuje mój program. Mój program na razie w ogóle nie wyświetla informacji o tych relacjach i inaczej podchodzi do całego problemu. Będę jednak z pewnością uzupełniał swój program o dodatkowe możliwości już w następnych wersjach(tak samo graf będzie skierowany i elementy będą miały wiele rodziców), aczkolwiek skupię się bardziej na wizualizacji nie uwzględniając zadania edycji słownika.

Do rysowania grafów projekt używa biblioteki Graphvis: http://gossamer.eti.pg.gda.pl/

Program naśladuje bardziej zaawansowany: http://www.thinkmap.com/
 * b)Java Script Visual Wordnet -** http://kylescholz.com/projects/wordnet/

Na razie naśladowałem ten sposób wyświetlania danych ze słownika, w wyniku czego mój program jest na razie na pierwszy rzut oka bardzo podobny do tego.
 * Java Script Visual Wordnet** - do wyświetlania używa wyłącznie elementów na drzewie dokumentu(DOM). Prezentuje on dane umieszczając w środku korzeń. Od korzenia odchodzą synsety i od nich kolejne lemmy. Używa algorytmu force-directed opartego na sprężynach i elektrostatyce(jest to bardzo popularny, nietrudny algorytm). Program dobrze wizualizuje wyrazy bliskoznaczne i może się przydać wielu osobom: np. pisarzom, dziennikarzom, którzy nie chcą używać wielokrotnie tego samego słowa. Problemy z wyświetlanie pojawiają się dopiero przy słowach takich jak "go", "work", gdzie ilość węzłów jest bardzo duża. Ogólnie z programu korzysta się wygodnie.

Mój projekt będę rozwijał, tak aby pokazać również relacje między synsetami i wskazywać ich typy oraz dać możliwość rozwijania gałęzi bez ustawiania nowej lemmy jako korzeń. W wyniku czego mój program coraz mniej będzie przypominał ten projekt. Początkowe naśladowanie tego projektu dało mi dobre początki.

ASK KEN jest wizualną przeglądarką pozwalającą na przedstawienie w postaci połączonych węzłów powiązanych tematów z użyciem darmowej usługi internetowej freebase.com. Plusem jest, że narzędzie może być realnie przydatne dla zwykłego użytkownika - gdyż prosto można wydobyć z niego ciekawe informację np. wpisując ulubiony film od razu znajdziemy filmy podobne, autora i inne filmy tego autora. Rozwinięcie hasła, w którymś z tych tematów spowoduje dalsze wyświetlenie informacji.
 * c) ASK KEN** http://askken.heroku.com

Projekt jest open source, jego źródło można znaleźć tutaj: https://github.com/michael/askken Mogę więc przeglądać strukturę projektu, z czego na pewno można się wiele nauczyć.

Ogromnym plusem bazy freebase.com jest licencja, która umożliwia darmowe zastosowanie jej nawet w celach komercyjnych. Prosty język MQL pozwala z łatwością uzyskiwać informację na wiele tematów. Freebase jest rozwijany przez społeczność, a z powodu ogromnej ilości danych używa go nawet google.

Na razie nie używam bazy freebase.com, ale jest to bardzo ciekawa rzecz i może w przyszłości z niej skorzystam.

c)**Discovr Music** - http://itunes.apple.com/pl/app/discovr-music-discover-new/id412768094?mt=8

Ostatnio natrafiłem na bardzo ciekawą aplikację na ipad, która po wpisaniu jednego artysty lub zespołu pozwala przedstawić na grafie wykonawców powiązanych. Największym plusem aplikacji jest świetne przedstawienie danych - nawet rozwinięcie ogromnej ilości węzłów pozwala zachować przejrzystość oraz perfekcyjną wydajność. Dzięki przybliżaniu i oddalaniu schematu z użyciem standardowego gestu z urządzeń mobilnych zawsze wszystko widać.

Oczywiście ten projekt podaje tutaj tylko jako przykład dobrej jakości wizualizacji danych, gdyż jest ona wydajna, atrakcyjna i przyjazna użytkownikowi.

__a) **Wordnet** - słownik języka angielskiego. Jego dotyczy stworzony przeze mnie program)__

 * __Wordnet__ –** słownik leksykalny języka angielskiego. Rzeczowniki, czasowniki, przymiotniki i przysłówki są pogrupowane w zbiory synonimów – synsety. Synonim, czyli wyraz o podobnym znaczeniu. Synsety połączone są semantycznymi i leksykalnymi relacjami. Wordnet jest darmowy, także dla użytku komercyjnego(licencja Princeton).

Słowa(lemma) pogrupowane są w synsety. Wordnet zawiera 117 000 synsetów połączonych relacjami do innych synsetów. Synsety zawierają definicję oraz w sporej części również przykłady użycia(przykładowe zdania). Synsety łączą te same części mowy.

W pierwszej wersji programu jaki tworze wyświetlam synsety dla wpisanego słowa, wraz ze słowami należącymi do tych synsetów.

__**Przykładowe relacje między synsetami:**__
-__Hyperonim__ – wyraz, który jest wyrazem nadrzędnym dla grupy wyrazów, które go dokładniej definiują. Np. drzewo może być takim wyrazem dla wyrazów lipa, klon czy dąb. Tego typu relacje występują najczęściej. Relacja ta jest przechodnia. Jeśli drzewo jest rośliną, a dąb drzewem, wtedy dąb również jest rośliną. -__Meronim__ – tą część składowa całości. Palec jest na przykład meronymem ręki. Jest to relacja jednostronna(asymetryczna). Hyperonimy zachowują meronimy słowa nadrzędnego. -__Holonim__ – relacja przeciwna do meronimu. Oznacza wyraz o szerszym znaczeniu, będący całością złożoną z pewnych struktur. -__Tryponym__ – pogrupowane są w nie czasowniki, wśród czasownik są to wyrazy, które określają specyficzne właściwości czynności. Np. wyraz //whisper// w łańcuchu //communicate-talk-whisper//. Określa sposób komunikacji i głośność. -Antonym – przeciwności. Połączone są tymi relacjami przymiotniki. Np. young-old -Pertainyms – wskazują na rzeczowniki, od których zostały utworzone przymiotniki.

__**Budowa Wordnet na podstawie plików bazodanowych - WNDB**__
Pliki te kończą się symbolem właściwym częścią mowy, przykładowo: .adj dla przymiotników.
 * Występują pliki typu**: index oraz data

Plik typu index to alfabetyczna lista słów występujących w słowniku wraz z dodatkowymi informacjami.
 * Pliki index**

Lemma – to najczęście najprostsza wersja słowa Synset – zbiór wyrazów bliskoznacznych

Opis najważniejszych pól pojedynczego wpisu: __Lemma__ – słowo z małych znaków ASCII. Kolokacje mogą być tworzone używając znaku “_“ między słowami. Kolokacja to często używane zestawienie słów. __Pos__ – n,v,a,r – oznaczające części mowy. __Synset_cnt__ – liczba synsetów, do których należy lemma. __P_cnt__ – liczba róznych wskaźników na lemmę, które występują we wszystkich synsetach __Ptr_symbol__ – Dla każdego ze wskaźników wymienionych w P_cnt zawiera symbol oznaczający relację z danym słowem. Np. dla czasowników “! “ oznacza Antonym, a “@ “ Hypernym. __Synset_offset__ – Zawiera liczbę będącą w bajtach przesunięciem, po którym można odnaleźć miejsce synsetu powiązanego z lemmą w pliku typu: data. Dla każdego synsetu występuje ta liczba.

Zawierają synsety wraz z dodatkowymi danymi.
 * Pliki data**

Plik zaczyna się polem __synset_offset__, czyli obecnym 8-bitowym przesunięciem w pliku. Następnie występuje dwucyfrowa liczba __lex_filenum__, która oznacza typ synsetu zdefiniowany w pliku leksykograficznym np. 34 oznacza verb.consumption czyli czasowniki dotyczące jedzenia i picia. Pole __ss_type__ mówi jaką częścią mowy jest synset. Pole __w_cnt__ zawiera liczbę słów będących w synsecie. Pole __word__ zawiera listę wszystkich słów w synsecie. Ty mrazem słowa te nie musza być z małej litery.

Pola __p_cnt__ i __ptr__ dotyczą połączeń z innymi synsetami. __p_cnt__ to liczba tych połączeń, a __ptr__ to lista wskaźników na połączone synsety.

Bardzo ważne pole to __gloss__ – może ono zawierać definicję synsetu lub/i przykłady użycia. Pole to wykorzystuję w moim programie

__**Wordnet w SQLITE**__
W swoim programie nie używam bazy danych w tej formie, gdyż wymagałoby to bardzo dużo kodu do obsługi, a są inne rozwiązania. Na początku chciałem sam napisać parser, który przekonwertuje mi pliki WNDB do formatu SQLITE, ale całe szczęście znalazłem znakomite gotowe rozwiązanie.

Link: []

Powyższa strona udostępnia na licencji Princeton słownik Wordnet w bardzo przyjaznej formie bazy danych SQL. Są tam różne rodzaje baz. Ja wybrałem bazę SQLITE.

Tutaj: [] można zobaczyć strukturę tej bazy. Plusem użycia bazy sqlite jest to, że nie wymaga ona osobnego serwera na bazę danych, cała baza zawarta jest w jednym pliku.

Używając formatu relacyjnej bazy danych można bardzo łatwo pobierać dane używając istniejących technologii w niemal każdym języku programowania.

Minusem jest to, że baza jest dość duża, przez to zapytania nie należą do najszybszych i czasami użytkownik musi chwilę poczekać.

Baza występująca w projekcie została przeze mnie odchudzona o pare tabel, których w tym momencie nie potrzebowałem.

__**Sposób pobierania danych WordNet z bazy danych:**__
Do pobierania używam technologię AJAX. Samo pobieranie realizuję skrypt PHP: __getDataWordNet.php__

Działa on w następujący sposób:
 * Używam interfejsu PDO do łączenia się z bazą danych i wykonywania zapytań

Model uproszczony(zapytania są uproszczone do minimum): 1.Pobieram id dla wpisanego słowa: //SELECT wordid FROM words WHERE lemma = ?// 2.Pobieram synsety, które zawierają daną lemmę: //SELECT synsetid FROM senses WHERE wordid= ?// 3.Dla każdego synsetu pobieram: definicję i część zdania: //SELECT pos,definition FROM synsets WHERE synsetid= ?// 4.Pobieram dla każdego synsetu id słów należących do danego synsetu //SELECT wordid FROM senses WHERE synsetid= ?// 5.Pobieram dla tych słów pole lemma

Jak widać struktura bazy danych SQL jest dużo bardziej przyjazna od tej z plików WNDB. Mogę w bardzo szybki sposób pobrać dowolne dane.

Ważnym wspomnienia punktem jest __wyświetlanie podpowiedzi przy wpisywaniu słowa__ do pola tekstowego. Zadanie to realizuje plik: __getDataAutoComplete.php__

Zwraca on 5 proponowanych słów, które wydobywane są przez zapytanie:

//SELECT lemma FROM words WHERE lemma LIKE wpisana_fraza% LIMIT 5//

Słowa te są wyświetlane w pod polem tekstowym, dzięki bibliotece jquery-ui.

Jak dokładnie działa ten dodatek można zobaczyć tutaj: http://jqueryui.com/demos/autocomplete/


 * (TUTAJ DOŁOŻĘ JESZCZE OPIS DYNAMICZNEGO ŁADOWANIA TYCH WĘZŁÓW TAK JAK BĘDZIE W GAŁĘZI 2.X.X)**

==b) freebase.com - nierelacyjna baza danych tworzona przez społeczność internetową. - nie używam tego na razie, ale mam o tym zgromadzonych dużo informacji i być może warto będzie zaprezentować też coś z innego źródła danych.==

Freebase jest bazą nierelacyjną. Opis API freebase: http://wiki.freebase.com/wiki/Freebase_API Uzyskać dostęp do usługi mogę wysyłając za pomocą obiektu XMLHttpRequest żądanie GET do stworzonego według z użyciem języka MQL linka. np.

https://www.googleapis.com/freebase/v1/mqlread?query={%22type%22:%22/music/artist%22%2C%22name%22:%22The%20Police%22%2C%22album%22:[]}

Link ten zawiera po "query=" obiekt JSON, który precyzuje to co chcę wyszukać. Odpowiednie opcje znajdę tutaj: http://wiki.freebase.com/wiki/MQL_Cookbook Strona we freebase wygląda np. http://www.freebase.com/view/en/shrek i z pomocą api można wyciągać z niej informację nie parsując jej.

**Uzyskiwanie informacji z zewnętrznej bazy w formacie JSON lub XML**
Freebase ma prosty język umożliwiający uzyskiwanie informacji z bazy w formacie JSON - czyli w formacie obiektu JavaScriptu, umożliwi to łatwe przetworzenie tego typu danych. Zgodnie z przykładami ze strony: http://wiki.freebase.com/wiki/MQL nawet zapytania przekazują obiekt JSON. Przykład ze strony: //var my_object = { "type": "/music/artist", "name": "The Police", "album": [] };//

//Oczywiście ja chce uzyskać dowolny temat. Robię to tak, że wyszukuję informację za pomocą API do wyszukiwania i badam te węzły i wyciągam tematy powiązane. W umieszczonym kodzie jest na razie samo wyszukiwanie pojedynczego węzła.//

Tworzony będzie obiekt zawierający stringi podpisane jako //type// i //name// oraz pustą tablicę //album//.

Freebase jest nierelacyjną bazą danych i z tym tematem warto się bardziej zapoznać. http://en.wikipedia.org/wiki/NoSQL

Sporo o freebase jest również w mojej prezentacji z proseminarium: http://fizyka.umk.pl/~236391/pracaInz/PracaInzynierska.pdf

c) Inne źródła ( uzupełniające, na razie nie używam, ale można uzupełnić wizualizację o wyniki z nich)
Mogę dopełniać frazowe informacje danymi z wikipedii.
 * - Parsowanie informacji z Wikipedii**

Używałem już wcześniej Simple HTML DOM Parser w PHP: http://simplehtmldom.sourceforge.net/

Mogę też do tego celu użyć JavaScript

http://googlesystem.blogspot.com/2008/04/google-search-rest-api.html
 * - Google Search API -**

Samo zastosowanie tego API jest proste. Dodanie linków do stron rozszerzy możliwości programu, ale jest problem, na jeden klucz API przypada 100 wyszukań dziennie za następne trzeba płacić(5$ na 1000 wyszukań).
 * Sposób rozwiązania:** Użytkownik podaje w opcjach programu własny klucz, jeśli nie poda to ta funkcjonalność jest ograniczona.

3. **Struktury do przechowywania danych**. Podział na klasy (zawiera obecne struktury, które ulegną sporym zmianom w przyszłych wersjach, już teraz wiem, że będzie to konieczne)
Dane kolejnych węzłów przechowywane są w całkiem prostych obiektach. Generalnie obiekty te tworzą __strukturę drzewa__, ale w przyszłości będzie to pełnoprawny graf skierowany. Na razie __istnieje korzeń__ - czyli element początkowy od którego wszystko się zaczyna oraz __węzły mają tylko jednego rodzica__(natomiast mogą mieć __wiele dzieci__).

Do zadania, które na początku realizowałem ten schemat świetnie się nadawał. Teraz jednak będę go musiał nieco przerobić.

Plik: struct/structt.js

__Obiekt (Node) węzła zawiera przede wszystkim pola i metody:__ -childs - tablica referencji na obiektu dzieci -childsCount - liczba dzieci -addChild - metoda dodająca dziecko do węzła -parent - wskaźnik na obiekt rodzica (jak pisałem wyżej na razie jest jeden) -type - typ węzła - root,lemma, synset -hang - czy obiekt reaguje na algorytmy i przemieszczanie. Korzeń ma ustawiony jako 1, czyli ma stałe miejsce, -pozycja - ustalona pozycja typu pVector(opis niżej) -tension - suma sił działających na obiekt - używane w algorytmie -addForce/clearForce- dodaje siłę/zeruje tension -id - id w słowniku wordnet -mass - węzeł dla algorytmu sił to punkt materialny o ustalonej masie. Tutaj każdy węzeł ma masę 1. -columbRepulsion - realizuje zadanie oddziaływania sił elektrostatycznych, dotyczy algorytmu -solveEuler - używa metody eulera w celu obliczenia nowej prędkości i następnie pozycji dla węzła

__Dodatkowe pola zawierają bardziej wyspecjalizowane obiekty dziedziczące(z użyciem łańcucha prototypów) po obiekcie Node:__ -__Word__ : klasa reprezentuje lemmę. Type == 0. Zawiera pole tekstowe lemma, zawierające słowo. -__Synset__ : reprezentuje synset. Type == 1. Zawiera pole definition i pos - zawierające definicję synsetu oraz część mowy jaką reprezentuje. -__Root__ : korzeń drzewa. Type == 2. Nie zawiera nowych pól, ale charakteryzuje się brakiem reakcji na algorytm tzn. hang == 1.

Strukturę tą mogę zachować. Nie prowadzi ona do komplikacji, gdyż w algorytmach i tak używam ogólnych pól i mogę rozróżnić obiekty po polu type. Java Script nie ma pojęcia klasy, więc nie potrzebuję żadnych interfejsów ani klas abstrakcyjnych jak w C++/C#/Java. Po prostu korzystam ze wspólnych pól, czyli obiektu Node.


 * (BĘDZIE WIELE RODZICÓW DLA WĘZŁA - W TRAKCIE REALIZACJI - JEST TO POTRZEBNE DLA PRZEDSTAWIENIA INNYCH REALCJI)**

__Obiekt director:__ Ważnym elementem jest director. Jest tylko jeden taki obiekt. Zawiera on: -root - referencję na korzeń -wszystkie węzły są jego dziećmi, pola: nodes, nodesCount ; metody: addNodes. Są tam tylko referencje, więc nie tworze dwa razy tych samych danych. -zawiera metody pomocnicze -zawiera sprężyny do algorytmu sił.

Po co mi taki obiekt ? -Przydaje się do niektórych algorytmów. Np. mogę wykonać czynność dla każdego węzła i nie interesują mnie powiązania między węzłami. Na dodatek przechowuje ile mam tych obiektów -zawiera referencje na obiekt początkowy, po którym można dotrzeć na kolejne, czyli po prostu na korzeń drzewa(root). -gdy jest null to wiemy, że żadne dane nie były jeszcze załadowane i blokujemy wszystkie czynności.

__Obiekty Spring:__ Są to po prostu sprężyny, łączą dwa węzły i wykonują dla nich algorytm, następnie używają na nich addForce. Teraz uważam, że są one niepotrzebne i w przyszłości się ich pozbędę, a ta sama zależność będzie realizowana wewnątrz węzłów. Plusem jest to, że teraz mogę tą sprężyną połączyć dowolne węzły, po prostu dodając nową sprężynę.

__Obiekt pVector (physicsVector):__ Prosty obiekt zawierający pola x,y i wiele metod. Symbolizuje on wektor i zawiera oprócz konstruktorów, metod kopiujących, przede wszystkim metody dodawania,odejmowania, mnożenia, dzielenia w stosunku do stałych oraz innych wektorów. Zawiera też metody liczenia długości, normalizacji, negacji itp.

a) **Force-directed layout** - opis używanego w programie algorytmu opartego na siłach Hooka i Coulomba, wraz z zastosowanymi przeze mnie modyfikacjami.
Algorytmy z rodziny force-directed używają analogii do sił fizycznych w celu rozmieszczenia elementów grafu. Każdy węzeł jest punktem materialnym(ciałem). Symulujemy graf jako system ciał, które oddziałują między sobą pewnymi wybranymi siłami.

Pozycja wynikowa elementu to taka, w której istniejące siły się równoważą. W swoim algorytmie, aby przyśpieszyć zatrzymanie, nie czekam do 0. Liczę energię kinetyczną układu i gdy jest ona mniejsza niż ustalona wartość to zatrzymuję algorytm. Czas uzyskania takiej wynikowej pozycji (właściwie to ilość iteracji) jest w algorytmie force-directed zwykle dość długi.

Zastosowany przeze mnie algorytm jest dość prosty:
 * Rodzice są połączeni z dziećmi sprężynami. Wykorzystuję tu prawo Hooka. Sprężyny mają ustaloną długość, do której będą dążyły. Długość sprężyn zależy od typów łączonych obiektów - jest to moja modyfikacja. Co do samych sprężyn to stworzyłem kiedyś program na zajęcia, który dokładnie symuluję ich działanie i pozwala zmieniać dowolnie ich parametry. Tu link (wymaga .NET3.5): http://mkolkowski.lqnstudio.mydevil.net/spring2DWFA.zip
 * Każdy węzeł oddziałuje z każdym innym węzłem odpychaniem elektrostatycznym. W zasadzie ponieważ przyjmuję, że ładunki są takie same to siła odpychania zależy od współczynnika oraz odległości między węzłami. Zależy nam, aby odległość ta nigdy nie była < 0.1 ponieważ mamy ją w mianowniku podniesioną do kwadratu i dałoby to ogromne siły. Dlatego do tej odległości zawsze dodaje 0.1, aby tą siłę zmniejszyć.

Plusy algorytmu:
 * Łatwy do zrozumienia
 * prosty, logiczny kod
 * wyniki dobre dla < 100 węzłów. Co widać po moim programie.
 * Symetria niemożliwa do uzyskania w innych algorytmach. Niestety u mnie ją trochę zaburzyłem, gdyż aby poprawnie wyświetlać większą ilość węzłów niż 100-200 zmniejszyłem sporo odpychanie elektrostatyczne
 * użytkownik może się bawić układem - co jest naprawdę bardzo dużą zaletą dla aplikacji przeglądarkowej.

Minusy:
 * Wynik zależy od położenia początkowego węzłów. Zwykle umieszcza się je losowo, ja robię inaczej.
 * Wolny czas zbieżności

Muszę jeszcze popracować nad tym algorytmem, gdyż na razie strasznie męczy procesor i wolno działa. Dobre wyniki są generalnie zasługą dobre rozkładu początkowego. W następnej wersji algorytm będzie działał dużo lepiej, popracuję nad nim.

Moje modyfikacje:
 * Jeśli węzeł ma dużo dzieci to sprężyna między nim, a korzeniem się wydłuża. Pozwala to uniknąć nagromadzenia się elementów w jednym miejscu, ale też słabo wygląda jak to jest jedyny synset.

Teoria i pseudokody o tym algorytmie jest tutaj(aczkolwiek mój algorytm sporo się różni od tego co tu jest prezentowane): http://www.cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf

-algorytm rozkładu początkowego, który pozwala bardzo szybko osiągnąć zbieżność, która jest problemem w algorytmie opartym na siłach.
Najpierw stosuję go podając środek jako 0,0, a następnie dla każdego sysnetu podając jako środek jego współrzędne. W ten sposób rozmieszczam najpierw synsety wokół korzenia, a potem lemmy wokół synsetów.

Użyty algorytm jest bardzo prosty, ale doskonale się spisuje. Jest to taki sam algorytm jak do tworzenia wielokątów opisanych na okręgu. Zmodyfikowany trochę, aby działał również dla parametrów < 3.

Pseudokod:

// const int n = 101 // // Uint32 xs = screen->w >> 1; // współrzędne środka ekranu Uint32 ys = screen->h >> 1; Uint32 r = ys;

for(int i = 0; i < n; i++) { double alpha = 6.283185 * i / (n - 1); Uint32 x = (Uint32)(xs + r * cos(alpha)); Uint32 y = (Uint32)(ys + r * sin(alpha)); } //

Pochodzi z tej strony(uprościłem go trochę): http://edu.i-lo.tarnow.pl/inf/utils/001_2008/0506.php

Dzięki temu rozkładowi, algorytm bazujący na siłach ma w wielu przypadkach bardzo mało do roboty. Przez to wykonuje się momentalnie, dokonując drobnych poprawek. Wtedy służy głównie do reakcji na zmiany użytkownika.

Dopiero, gdy jest duże stężenie węzłów np. słowo "go" - wtedy widać słabość mojego algorytmu rozkładu bazującego na siłach. Jest za dużo węzłów i energia kinetyczna spada za wolno. Wszystko trwa wtedy bardzo długo i strasznie męczy procesor.

a) Użyte technologie i narzędzia
Projekt tworzę w środowisku NetBeans, które jest świetne dla projektów w Java Script, PHP. Projekt archiwizuje przy pomocy systemu zarządzania wersją SVN: https://repo.mydevil.net/svn/pub/lqnstudio/vsearch Dzięki temu w logach można prześledzić kiedy dokonałem i jakie zmiany, a także oglądać stare wersje projektu, to wszystko także z poziomu strony www. NetBeans również zapewnia wsparcie dla SVN.
 * Narzędzia**

Do przeglądania i edycji bazy sqlite używam sqlite manager będącego dodatkiem do przeglądarki firefox. Generalnie projekt testuje na tej przeglądarce używając dostępnego narzędzia do debugowania: firebug. Jednak sprawdzam także pobieżnie działanie na przeglądarkach: chrme, opera i safari.

Generalnie większość projektu napisana jest w języku skryptowym Java Script. Środowiskiem dla tego języka jest przeglądarka www. Większość zadań pomaga mi zrealizować biblioteką jQuery, która doskonale skraca czas pisania kodu w Java Script. Pobieranie danych jest realizowane przy użyciu technologi AJAX, a więc dane pobierane są ASYNCHRONICZNIE - pobieranie nie blokuje strony, a użytkownik może je także anulować. Bezpośrednio pobieranie danych z bazy realizują skrypty PHP. Aby połączyć się z bazą używam interfejsu PDO. Bazą danych jest baza SQLITE, która przechowuje wszystko w jednym pliku .sqlite i nie wymaga posiadania osobnego serwera na bazę danych(jak mySQL). Do wyświetlania grafiki używam technologi HTML 5 Canvas.
 * Technologie**

Informacje o Java Script w ujęciu obiektowym są w mojej prezentacji: http://fizyka.umk.pl/~236391/pracaInz/PracaInzynierska.pdf

**b)** Sposób wyświetlania informacji na Canvasie.
Większość używanych przeze mnie na razie rzeczy znajduje się w mojej prezentacji: http://fizyka.umk.pl/~236391/pracaInz/prezentacjaInz2.pdf Dużo skorzystałem w trakcie pracy nad programem z tej książki: HTML5. Canvas - Steave,Jeff Fulton

HTML5 Canvas to w miarę świeża technologia i moim zdaniem warto jej użyć. Obecnie nawet Adobe nie rozwija już dalej Flash, a Microsoft wstrzymuje wsparcie dla Silverlighta, w celu udostępnienia tego miejsca HTML5.

**c)**Rozmiar canvasa zależny od wielkości okna przeglądarki
W projekcie stosuję rozmiar canvasa zmienny w zależności od dostępnego miejsca. Program śledzi zmiany rozdzielczości:

$(window).resize(function{ resizeCanvas; });

i wywołuje funkcję obsługi, która rozciąga canvasa i zapisuje rozmiary ekranu i canvasa do zmiennych(niestety globalnych).

Potem w takcie rysowania jest ustalana rozdzielczość na canvasie oraz środek canvasa.

//skalowanie canvasa do rozmiaru okna// //ctx.canvas.width=$(window).innerWidth;// //ctx.canvas.height=$(window).innerHeight*0.87;//

punkt zerowy cx2 = ctx.canvas.width/2; cy2 = ctx.canvas.height/2;

__Dlaczego zawsze są poprawne pozycje ?__ Oczywiście nie mogę w locie modyfikować pozycji węzłów. Wszystko to działa dlatego, że pozycja jest względna. Punktem porównawczym jest środek cx2,cy2. Ten punkt to dla węzła punkt(0,0). Pola pozycji węzła zawierają przesunięcie względem tego punktu. Ponieważ znamy rzeczywiste położenie cx2,cy2 to możemy łatwo przeliczyć dowolny punkt do rzeczywistego położenia. Dzięki temu cały rysunek jest niezależny od wielkości płótna(po za tym, że może się nie zmieścić, ale wtedy jest przesuwanie ekranu).

d) Interfejs użytkownika, **zastosowane dodatki jQuery**
Użytkownik może skalować rysunek suwakiem na dole. Może też go przesuwać ciągnąc za płótno. Podwójne kliknięcie w puste płótno oznacza powrót do początkowego położenia płótna(jakby ktoś się zgubił)

Użytkownik może przesuwać dowolny element nie będący korzeniem. Natomiast po najechaniu myszką na synset wyświetli się jego definicja i inne rzeczy na jego temat.

U góry ekranu użytkownik ma szereg buttonów do edcycji/opisu grafu oraz textbox na wpisanie słowa do wizualizacji.


 * Dowolne opcje wyświetlają się w modalnych lub niemodalnych dialogach, tak aby użytkownik mógł położyć je w dowolnym miejscu i aby nie zajmowały miejsca przeznaczonego na canvas(teraz zajmuje on 87% dokumentu).**

- dialogi - autocomplete - color picker (to planuje w przyszłości użyć) - slider - suwak na dole ekranu - tabs - zakładki w dialogach, bardzo wygodna rzecz
 * Używane dodatki z biblioteki jQuery-ui ( http://jqueryui.com/ ):**

e) **Przystosowanie do urządzeń mobilnych**
Taką aplikację w HTML5/JS przy użyciu jQuery - bardzo łatwo przystosować do urządzeń mobilnych. Oczywiście głównym celem będą tutaj tablety co najmniej 7', gdyż na mniejszych urządzeniach ciężko takie aplikacje używać.

Problemem w tego typu urządzeniach jest przede wszystkim inny sposób interakcji użytkownika - zamiast myszki/klawiatury mamy panel dotykowy.

Metody takiego przystosowania, tak by aplikacja działała dobrze na PC i mobilnych urządzeniach są powszechnie znane.

Po za kwestiami sterowania są też inne sprawy, które muszę rozwiązać.

- Ogólnie ten punkt chciałbym uwzględnić w swojej pracy inżynierskiej - gdyż jest on bardzo ciekawy.

Tagi: jQuery Mobile, Phone Gap

**6. Dalsze pomysły na rozwój projektu, ocena podobnych .**
Ten rozdział będę realizował później, ponieważ teraz to co chce zmienić/dodać pisze w rozdziałach powyżej, więc nie ma sensu tego powielać.

7. Bibliografia, ciekawe projekty i moje linki

 * Graph Drawing - Algorithms for the Visualization of Graphs - Battista,Eades,Tamassia,Tollis - Prentice-Hall
 * JavaScript. Programowanie obiektowe, Stoyan Stefanov, Helion
 * HTML5. Programowanie aplikacji, Zachary Kessin, Helion
 * HTML5. Canvas - Steave,Jeff Fulton - Tu jest dużo praktycznych rzeczy, także nieco o bardziej interaktywnych rzeczach czy np. fizyce
 * http://fizyka.umk.pl/~236391/pracaInz/ - moje prezentacje
 * http://mkolkowski.lqnstudio.mydevil.net/prezentacja3.pdf - Prezentacja nr 3
 * http://mkolkowski.lqnstudio.mydevil.net/prezentacja4.pdf - Prezentacja nr 4
 * http://wordnet.princeton.edu/ - obecnie głównie źródło danych w moim projekcie
 * http://www.freebase.com - inne przykładowe na razie źródło danych
 * https://developer.mozilla.org/en/html/html5 - podstawowa wiedza o Canvasie
 * http://www.nowyebib.info/2006/77/osinska.php - różne sposoby wizualizacji informacji
 * [] - Wordnet w formacie SQL
 * http://www.myphysicslab.com/spring2d.html - ciekawa symulacja sprężyny 2D
 * http://mkolkowski.lqnstudio.mydevil.net/spring2DWFA.zip - moja symulacja sprężyny 2D
 * http://mkolkowski.lqnstudio.mydevil.net/ - Tworzony przeze mnie projekt
 * https://repo.mydevil.net/svn/pub/lqnstudio/vsearch - repozytorium SVN projektu
 * http://thejit.org/demos/ - ciekawe przykłady wizualizacji
 * http://www.cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf - opis algorytmu rozkładu na podstawie sił skierowanych


 * Informacje otrzymane początkowo:**

Własne pomysły mile widziane, proszę się przyjrzeć projektom: http://wordventure.eti.pg.gda.pl/ http://semanticspaces.eti.pg.gda.pl:8888/wikiparser/

TouchGraph http://www.touchgraph.com/navigator Użyłem tego sam jaiś czas temu: http://www.is.umk.pl/~duch/WD.html

Tu są ładne wizualizacje http://scimaps.org/atlas/ tu mam listę wyszukiwarek z wizualizacja i klasteryzacja http://www.is.umk.pl/~duch/search.html

Warto też popatrzeć na http://www.thebrain.com/ SELECT * FROM lexlinks where word1id= 58418 http://mkolkowski.lqnstudio.mydevil.net/