Very good for 500 lines of code :)! Thanks for sharing. O(n^2) for n-body simulation could hurt performance for the larger graph, i guess. But it should work really well for smaller ones.
BTW this one by Lars Rönnbäck is also very impressive: http://js1k.com/2010-first/demo/618 - press any key to add nodes. It's only 1016 bytes. Amazing.
It's such a pleasure to read well organized, well commented code. I'm a total JS n00b, but I feel like I could learn the language very quickly with examples like yours to follow.
Really nice work. The drag and drop functionality makes it really fun. However, I'm a little unsure as to the usefulness of the app?
I wrote a 3D run-time object visualiser for object-orientated code whilst at Uni ("Visualising Memory Graphs in Java3D"). It was interesting, and kind of useful for debugging, really good for an overview of your running program's object structure, but not useful enough to be considered successful.
I'm just hoping you can put a well executed app to good use, because the UI is really nice.
I'm looking forward to reading it tonight. I've been experimenting with a module that profiles Django applications and reports on slow or unused methods. Part of the challenge has been coming up with a decent way of presenting the information, and I've been playing with basic graphing APIs.
Has anyone heard of tools that do this? Does it seem like a decent idea?
That's the one! It appears to be a scan though, email me if you want the original. There is an accompanying paper describing the process of obtaining and analysing the memory graph (written by a friend and classmate of mine), if your interested am sure I could dig it out.
Regarding your django profiler, I would take a look at some current profilers to see what the standard is. Am on my phone at the moment so don't have much info at hand, but visual studio does it out of the box, and redgate have a decent tool (these are .Net geared - but the principle is the same). Am sure others exist.
I'm not sure how well 3D memory graphs translate to speed profiling visualization, but I hope you find the paper interesting nevertheless.
Thank you, Darius. I'm not sure about its usefulness as well :). But I'm having fun doing these visualizations - that's for sure.
YouTube visualization helps me to avoid duplicates and watch related videos without accidental repetitions. Amazon visualization - I use it to discover primary resources in a given knowledge domains. And sometimes to find what to read next. So far I never regretted a single book that I read based on this visualization. But I might be preconceived :).
Well, that's clearly the most important thing. When on HN I often go into startup business mode, apologies. Also, it was so polished, I just thought you'd have a long-term plan for it.
I guess finding related items is important for shop fronts, I think you just need a way of engaging them in the first place. I need to think, I'll go to that app to find the product I want. Going to that app, with a product in mind, to find what's related, doesn't seem all that engaging.
My point is, if you could find a reason I'd go to your app first (best reviews/price comparison/something else...), then your visualiser would be an awesome way to up sell further products.
Great project though, keep hacking! And thanks again for sharing your work!
Both youtube and amazon visualization show very nice clustering. In case of technical books they cluster into, e.g., beginners, intermediate, advanced book groupings. It's impossible to notice that without the graph visualization.
That's right! I love the discovery part of these visualizations. It helped me to find proper books many times - the graph drawing library is a result of such discovery.
I wanted to learn JavaScript. So I read a book recommended by my old Silverlight-based visualization, and developed the library.
It looks like you're using Raphael. How has the performance been? Are you having to limit the number of nodes to prevent performance degradation? Also, do you happen to have any tips for improving SVG performance?
I can see the YouTube graph being useful for discovering artists and songs. I wonder if you could do something similar for Pandora, or LinkedIn? Generating playlists? Visualizing and ranking recipes?
In terms of performance - that's a spot on. Rendering turned out to be the most CPU intensive part of the library. The easiest way to improve it is to render less elements (e.g. render one path element for all node's links, instead of having one path per link). But it's harder do it than say :)
LinkedIn has its own visualization: http://inmaps.linkedinlabs.com/ The main problem with social networks visualization is the giant component which usually exists in the network. It makes reading networks of 300 and more people quite challenging. Well, clustering/multi-scale algorithms help, but still it's very difficult problem. Hope one day we can solve it nicely.
Pandora - very nice idea. I wonder if they have API to fetch related songs. Could also look into Last.fm. I would really love if Steam could expose their data through API, but last time I checked them - they did not provide information about similar games...
Nice! Seems like the performance drops substantially when I zoom out all the way though (using latest Safari/Lion).
Goes to show that YouTube could really work on their relevance scoring. Does anyone know what's taken into account? It'd be sensible to relate to stuff that's mentioned in the comments, but then again, this takes control over scope away from the author.
Interesting point about performance... I'm also running Safari/Lion. Could not notice performance degradation. Maybe it's related to rendering loop: I stop the cycle as soon as algorithm thinks layout is stable enough. The rendering loop restarts when the graph is modified or you interact with nodes.
In rare cases though system cannot find stable state and keeps bouncing. There could also be a bug in my rendering loop start/stop code... Will check it out. Thank you for noticing!
I really liked the visualization of the relations with the other videos, and the arrows&thumbnails come to their original places when you drag'em to somewhere else.
Not a complaint, just to let the creator know: when I drag and drop the "window" grows vertically. This resets when I drop the window. I'm using Firefox 10.0.1.
The site itself - you can paste URLs from YouTube to visualize particular video :)