Visualizing YouTube with my home-made JavaScript graph drawing library

http://www.yasiv.com/youtube#/Search?q=Write%20in%20C%20-%20Let%20it%20be%20Cover%20-%20Piano&id=XHosLhPEN3k

by anvaka • 14 years ago

88 29 14 years ago

yasiv.com

anvaka10• 14 years ago

The source code for the library is here: https://github.com/anvaka/VivaGraphJS

The site itself - you can paste URLs from YouTube to visualize particular video :)

iambot• 14 years ago

Nice work. I've been looking for something Exactly like this, I'll give it a test run and feedback as much as I can.

Thank you.

anvaka10• 14 years ago

Thank you :)! Would love to hear your feedback!

slig• 14 years ago

Really nice. Recently I built a very simple game and I used springy[1]. It's great to have other beautiful written alternatives.

https://github.com/dhotson/springy

anvaka10• 14 years ago

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.

feralchimp• 14 years ago

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.

Cool library, too. :)

anvaka10• 14 years ago

Thank you very much :). I am JS n00b also. I started learning the language several months ago with Crockford's "JavaScript: The good parts" book.

And I left a looot of room for improvement in VivaGraphJS (blush). I don't like a lot of its parts. Hope to make it better in the future.

mrleinad• 14 years ago

Really good work!! Congrats!!

ashazar• 14 years ago

Congrats! Nice work.

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.

dazbradbury3• 14 years ago

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.

jskopek• 14 years ago

Is this the paper: http://www.cs.ox.ac.uk/files/2217/2008_Bradbury%20D.pdf?

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?

dazbradbury3• 14 years ago

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.

anvaka10• 14 years ago

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

dazbradbury3• 14 years ago

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!

paulgb• 14 years ago

Nice!

Do the edges represent "recommended videos" from the origin?

Also, it would be nice to be able to see the video's title without having to play the video.

anvaka10• 14 years ago

Thank you paulgb. Edges represent related video ( http://code.google.com/apis/youtube/2.0/reference.html#Relat... )

I will add title to the videos shortly...

zeratul• 14 years ago

Congrats to Andrei! He has one more, similar, product:

http://www.yasiv.com/amazon#/Search?q=data%20mining&cate...

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.

anvaka10• 14 years ago

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.

I believe recommendation was successful. The book is Crockford's "JavaScript: The good parts" - http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockfor...

SanjayUttam• 14 years ago

Pretty cool. It would be awesome if you showed the title or other meta-info when you hover over the thumbnail of a video. Great job though.

PetrolMan• 14 years ago

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.

anvaka10• 14 years ago

Thank you, PetrolMan! It should be fixed now.

eaurouge• 14 years ago

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?

joering2• 14 years ago

Always wanted to do something useful with LinkedIn api/graph. Can you elaborate on what that "something" you mentioned could be?

anvaka10• 14 years ago

No, I'm not using Raphaël - didn't want to add dependency. Though it's a great library indeed. I wrote my own very simple svg wrapper (https://github.com/anvaka/VivaGraphJS/blob/master/src/Svg/sv... ) to simplify syntaxis.

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

some1else• 14 years ago

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.

anvaka10• 14 years ago

Thank you some1else!

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!

zunky• 14 years ago

Awesome! Well, there goes my work productivity for the day:)

hashfold• 14 years ago

nice work. will try it out.

Shuo• 14 years ago

Hah, Great Job, Andrei!

Visualizing YouTube with my home-made JavaScript graph drawing library

Related Stories