

Visualizing YouTube with my home-made JavaScript graph drawing library - anvaka
http://www.yasiv.com/youtube#/Search?q=Write%20in%20C%20-%20Let%20it%20be%20Cover%20-%20Piano&id=XHosLhPEN3k

======
anvaka
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 :)

~~~
slig
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>

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

------
dazbradbury
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
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?

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

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

[http://www.yasiv.com/amazon#/Search?q=data%20mining&cate...](http://www.yasiv.com/amazon#/Search?q=data%20mining&category=Books&lang=US)

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.

~~~
anvaka
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...](http://www.amazon.com/JavaScript-Good-Parts-Douglas-
Crockford/dp/0596517742)

------
eaurouge
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?

~~~
anvaka
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...](https://github.com/anvaka/VivaGraphJS/blob/master/src/Svg/svg.js)
) 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
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.

~~~
anvaka
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!

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

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

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

I will add title to the videos shortly...

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

~~~
anvaka
Thank you, PetrolMan! It should be fixed now.

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

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

------
mrleinad
Really good work!! Congrats!!

------
Shuo
Hah, Great Job, Andrei!

------
hashfold
nice work. will try it out.

