Visualization of Inter-Related Information
What is the best way to view the relationship between multiple entities? This is a question that I asked myself, specifically I was interested in using the Google SOAP Search API to show the links between websites.
I wanted something that would let entities be represented as shapes, with lines connecting them. I also didn't want them to collide, and I wanted some cool animation effects....
...and believe it or not, the answer lies with first year Physics! I am so glad I didn't sleep through that subject! Actually, I found Physics really interesting, but didn't expected to use my knowledge for this!
I represent each webpage (entity) as a particle. Related particles are connected by a line which models the physics of a spring (remember F=kx and all that?) This lets related nodes stay attached, because of this force. To stop particles colliding, I model them as electro-statically charged particles, each with the same charge. The force repels close particle, so the particles maintain an event spacing, and the particles positions equalizes.
I decided to write this as a Java applet, just for a change. I used the Graphics2D API.
Clicking on an entity triggers a SOAP query, and then the entity 'explodes' with the first 10 related webpages springing out from it. And so on. The entity color is from the HSB colour wheel, and the more similar the colors, the closer related the entities are. Hovering over an entity shows the entities name (webpage title). Entities can also be 'detached' from their children by quickly pulling them away. Moving them close again will 're-link' them together.
Below are some screenshots:
I wanted something that would let entities be represented as shapes, with lines connecting them. I also didn't want them to collide, and I wanted some cool animation effects....
...and believe it or not, the answer lies with first year Physics! I am so glad I didn't sleep through that subject! Actually, I found Physics really interesting, but didn't expected to use my knowledge for this!
I represent each webpage (entity) as a particle. Related particles are connected by a line which models the physics of a spring (remember F=kx and all that?) This lets related nodes stay attached, because of this force. To stop particles colliding, I model them as electro-statically charged particles, each with the same charge. The force repels close particle, so the particles maintain an event spacing, and the particles positions equalizes.
I decided to write this as a Java applet, just for a change. I used the Graphics2D API.
Clicking on an entity triggers a SOAP query, and then the entity 'explodes' with the first 10 related webpages springing out from it. And so on. The entity color is from the HSB colour wheel, and the more similar the colors, the closer related the entities are. Hovering over an entity shows the entities name (webpage title). Entities can also be 'detached' from their children by quickly pulling them away. Moving them close again will 're-link' them together.
Below are some screenshots:
posted by Jordan at 7:44 PM
<< Home