| Posted by kyle on June 3, 2006 4:16 PM | bookmark / share: |
|
Here's my first whack at a Visual Wordnet. It's the first application that uses my Force Directed Graph engine for Javascript.
Use Visual WordnetYes ... Javascript. This is an exercise to see if Javascript-driven Force Directed Graphs might be useable in web application user interfaces for search, document navigation, etc. The display uses only the DOM (Document Object Model) with CSS (Cascading Style Sheets) for absolute positioning and ... being pretty.
Sources and Background
Wordnet is a project at Princeton University's Cognitive Science Laboratory that provides a map of the English language. Visual Wordnet currently presents only a narrow view of Wordnet's resources.
The idea of using Force Directed and Hyperbolic graphs to display and navigate Wordnet is nothing new. ThinkMap's Visual Thesaurus is just awesome and it does a much better job scaling to support large graphs. So why write this implementation? ThinkMap's solution is implemented in Java and available as an applet. It's just not appropriate for some applications. Also ... it ain't free.
Known Issues (echoed from my initial post on Force Directed Graphs)
- Performance: As currently implemented, the graphing engine consumes a lot of processing power, even after the graph has settled. An entropy-based throttle would help.
- Scaling: The layout algorithm has a complexity of On2 :(. It just doesn't scale very well.
- Graphs for words with a lot of synonyms, like "work" and "go", contain a lot of nodes. With the scaling problems, this drives performance to a near-stall.
Update on Licensing:
This work is licensed under a Creative Commons Attribution 2.5 License.
As promised, I'm providing an open source license for the files referenced here. I've chosen a Creative Commons Attribution License, which means you are free to distribute the files and create derivative works as long as you include the license and attribution information contained in each file. I will follow up with a post describing each of these files to help you integrate with your project.
Comments
Some people have asked about using the Safari/Mozilla "canvas" tag to display the graph. I've done a little bit of experimentation with it.
This example draws edges with canvas
Posted by: Kyle Scholz | June 7, 2006 11:39 AM
I have a similar, yet much simpler, implementation in javascript + svg (firefox / mozilla only)
it really doesn't incorporate motion into the graph, just pre-positioned nodes and popup text, similar to what yours looks like when it's finished settling.
I have similar scaling problems and performance issues when scrolling a large graph with many nodes, however, I am working on optimizing and would be willing to collaborate with you if you want :)
this could be an open source project and it might attract many developers if we created the central collaboration point online somewhere.
twentyafterfour [a t] gmail dot com
Posted by: Monkey | June 7, 2006 12:08 PM
known issues notwithstanding, this is still some nice work. I've seen similar things but never in Javascript -- very nice.
I have an intern working on some variants on force directed graphs this summer. If she comes up with anything that might be helpful to you, we'll be back in touch.
Posted by: Scott Butner | June 7, 2006 1:21 PM
Monkey,
Is your implementation available for public viewing? Can we get a URL? Thanks.
Posted by: Kyle Scholz | June 7, 2006 1:31 PM
Scott,
I'll be making this available via an open source license ASAP, and I hope you find it useful. I'm very interested in any input you might have after your own analysis. Thanks!
Posted by: Kyle Scholz | June 7, 2006 1:33 PM
I have been working on something incredibly similar. I've been focusing on an SVG implementation, but an HTML DOM should be pretty straight forward. My post in response to yours:
http://www.graffitiweb.org/blog/2006/06/07/graph-layouts/
I've been focusing on some backend framework type issues (like plugging in different layout engines to a graph), and so haven't been polishing up the front end. You have much prettier pictures to show!
Posted by: Schuyler Duveen | June 7, 2006 1:50 PM
I had an idea for a possible use for something like this a few days ago. I drew up a dependency diagram of the parts of a project I'm working on. Something like this could do it for me automagically.
Posted by: Michael Johnson | June 7, 2006 4:17 PM
Really sweet Kyle!
Posted by: Oliver Tse | June 7, 2006 6:57 PM
Great stuff. The demo, however, doesn't work in Safari. Is this just for the time being or is there a deeper incompatibility issue with Safari?
Posted by: alex | June 22, 2006 11:05 AM