48 ms·

Visualizing YouTube with my home-made JavaScript graph drawing library

88 points by anvaka 15y ago

anvaka 15y ago
The source code for the library is here: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS The site itself - you can paste URLs from YouTube to visualize particular video :)
- iambot 15y 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.
  - anvaka 15y ago
    Thank you :)! Would love to hear your feedback!
- slig 15y 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 https://github.com/dhotson/springy
  - anvaka 15y 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 http://js1k.com/2010-first/demo/618 - press any key to add nodes. It's only 1016 bytes. Amazing.
- feralchimp 15y 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. :)
  - anvaka 15y 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 15y ago
Really good work!! Congrats!!
ashazar 15y 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.
dazbradbury 15y 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 15y ago
  Is this the paper: http://www.cs.ox.ac.uk/files/2217/2008_Bradbury%20D.pdf 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 15y 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.
- anvaka 15y 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 :).
paulgb 15y 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.
- anvaka 15y ago
  Thank you paulgb. Edges represent related video ( http://code.google.com/apis/youtube/2.0/reference.html#Related_videos_feed http://code.google.com/apis/youtube/2.0/reference.html#Relat... ) I will add title to the videos shortly...
zunky 15y ago
Awesome! Well, there goes my work productivity for the day:)
zeratul 15y ago
Congrats to Andrei! He has one more, similar, product: http://www.yasiv.com/amazon#/Search?q=data%20mining&category=Books&lang=US 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.
- anvaka 15y 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-Crockford/dp/0596517742 http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockfor...
SanjayUttam 15y 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 15y 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.
- anvaka 15y ago
  Thank you, PetrolMan! It should be fixed now.
eaurouge 15y 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 15y ago
  Always wanted to do something useful with LinkedIn api/graph. Can you elaborate on what that "something" you mentioned could be?
- anvaka 15y 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/svg.js 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/ 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 15y 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.
- anvaka 15y 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!
hashfold 15y ago
nice work. will try it out.
Shuo 15y ago
Hah, Great Job, Andrei!

88 points by anvaka 15y ago

The source code for the library is here: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS The site itself - you can paste URLs from YouTube to visualize particular video :)

iambot 15y 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.
- anvaka 15y ago
  Thank you :)! Would love to hear your feedback!
slig 15y 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 https://github.com/dhotson/springy
- anvaka 15y 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 http://js1k.com/2010-first/demo/618 - press any key to add nodes. It's only 1016 bytes. Amazing.
feralchimp 15y 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. :)
- anvaka 15y 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 15y ago

Really good work!! Congrats!!

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

dazbradbury 15y 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 15y ago
Is this the paper: http://www.cs.ox.ac.uk/files/2217/2008_Bradbury%20D.pdf 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 15y 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.
anvaka 15y 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 :).

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

anvaka 15y ago
Thank you paulgb. Edges represent related video ( http://code.google.com/apis/youtube/2.0/reference.html#Related_videos_feed http://code.google.com/apis/youtube/2.0/reference.html#Relat... ) I will add title to the videos shortly...

zunky 15y ago

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

zeratul 15y ago

Congrats to Andrei! He has one more, similar, product: http://www.yasiv.com/amazon#/Search?q=data%20mining&category=Books&lang=US 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.

anvaka 15y 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-Crockford/dp/0596517742 http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockfor...

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

anvaka 15y ago
Thank you, PetrolMan! It should be fixed now.

eaurouge 15y 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 15y ago
Always wanted to do something useful with LinkedIn api/graph. Can you elaborate on what that "something" you mentioned could be?
anvaka 15y 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/svg.js 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/ 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 15y 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.

anvaka 15y 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!

hashfold 15y ago

nice work. will try it out.

Shuo 15y ago

Hah, Great Job, Andrei!