Visualizing YouTube with my home-made JavaScript graph drawing library(yasiv.com)
yasiv.com
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
13 comments
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
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.
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.
Cool library, too. :)
Cool library, too. :)
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.
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.
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 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.
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 :).
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!
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!
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?
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.
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.
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.
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.
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...
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...
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?
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?
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...
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...
Always wanted to do something useful with LinkedIn api/graph. Can you elaborate on what that "something" you mentioned could be?
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.
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.
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!
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!
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.
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.
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.
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.
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...
I will add title to the videos shortly...
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.
Awesome! Well, there goes my work productivity for the day:)
Really good work!! Congrats!!
Hah, Great Job, Andrei!
nice work. will try it out.
The site itself - you can paste URLs from YouTube to visualize particular video :)