Computer visualization of relational database in www environment Radek Horáček Supervisor: ing. J. Blažej,Phd. Bachelor Thesis, Department of Physical Electronics Czech Technical University, Prague, Prague 1,Brehova 7

GOALS Familiery with implementation of vector graphics, which support current web browsers. Develop server application for visualization of genealogical database taking advantages of elements in vector graphics. Output of my application should be descendant and ancestor tree

PURPOSE There are many applications for genealogist, but only very little of them use vector graphics, and if they use it, it isn’t based on PHP but on JavaScript JavaScript -> it should be applet -> running on a client-side => whole database should transfer to client => DISADVATAGE ADVANTAGE of PHP -> server application => we eliminate whole database transfer

SVG Scaleable Vector Graphics - SVG SVG is supported in XML SVG is standard of W3C Eliminate large picture transfer to a client -> vector graphics -> lower quantum of transported data with comparison with other graphic formats (e.g. gif, jpeg)

SOLUTIONS SERVER (Apache) PHP Database (MySQL) Request HTML page with SVG file as object Client

Ancestor tree Ancestor tree – shows (recursively) the parent of an ancestor. So this includes a father or mother etc.

Descendant tree – color version Descendant tree -someone who is in direct line to an ancestor, such as a child, grandchild etc.

Descendant tree – black&white Using of CSS (Cascade Style Sheets ) allows easy managing of color face of my application

Using of JavaScript JavaScript is used there for displaying of title, which shows additional useful information about persons. Every rectangle is link like in HTML, because SVG and HTML belongs to XML. If you click in rectangle, there will be generated new genealogical tree.

CONCLUSION I have developed script, which generate cycle descendant and ancestor tree I started from my previous work I am using ancestor tree algorithm Application is running on server on-line Using of CSS (Cascade Style Sheets) for several types of interface Printing of SVG pictures is available with open source software Inkspace All tasks have been finished in my bachelor thesis

Thank you for your attention

1. otázka oponenta Proč není měřítko výstupního grafu přizpůsobeno velikosti okna WWW stránky? V případě velkých grafů je vidět jen část a uživatel musí manuálně nastavovat měřítko.

Odpověď na 1.otázku Rozhodoval jsem se mezi tím,jestli má být vidět title tag s informacemi nebo celý diagram. Byla zde chybná implementace javascriptu,která nebyla na mé straně.

2. Otázka oponenta V práci jste uvedl jen 2 způsoby rozvoje grafu a to lineární a kruhový. Neznáte některé další mechanismy, jak přehledně zobrazovat složité grafy?

2. Odpověď na otázku Vybral jsem kruhový, právě proto že je více kompaktnější pro rozlehlejší rodokmeny a lehce se pozná generace jako letokruh. V genealogických softwarech se většinou jiný než lineární rodokmen nepoužívá.