Peter's Site

Particle Graphs

Particle Graphs are a visualization method for graph structures based on a real physics particle engine. Each vertex in the given graph represents a particle and the springs between the particles denote the graph's edges. After adding all particles and springs the system automatically begins relaxing its structure until a (local) equilibrium is reached.
I have seen this approach first in the website as graphs article at aharef.info.
They used a java applet based on freely availabe libraries:

• HTML Parser for parsing HTML files and iteration through the DOM tree.
• The Processing library for drawing and visualization
• traer.physics for the particle system.

Their applet runs in the browser and shows the DOM tree of a given web page. Each node is colored depending on its tag name, e.g. all table related tags are shown in red. The resulting image gives a good overview of the page structure in only one screen. This is the graph for http://blog.peter1402.de/. One can clearly identify several parts of the page, e.g. the calendar widget as the big red cloud.
People started using it for all kinds of web pages and many pictures can now be found at flickr.

PageGraphGUI

I embedded the applet in a small standalone Swing application which i call PageGraphGUI. You can download the program and its sources freely here.

Validation Graphs

After all, I enhanced the program heavily to a local website validation tool, which shows the site structure and the validation results of pages with HTML content in such a particle graph, which I call Validation Graphs.