Bookmark with del.icio.us submit First%20Whack%20at%20JavaScript%20Visual%20Wordnet digg.com reddit

First Whack at JavaScript Visual Wordnet

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 Wordnet

Yes ... 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)


Update on Licensing:

Creative Commons License
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.

Trackback

Listed below are links to weblogs that reference First Whack at JavaScript Visual Wordnet:

» Force Directed Graphs, Performance, and Trees? from kylescholz.com :: blog
This weekend I finally got a chance to go over the wishlist that has been accumulating for the Force Directed Graph libraries I posted about earlier this month. Nearly everyone has asked that I do something about the performance problems,... [Read More]

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

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

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.

Monkey,

Is your implementation available for public viewing? Can we get a URL? Thanks.

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!

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!

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.

Really sweet Kyle!

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?