Visualizing Reddit with my graph drawing library(yasiv.com)
yasiv.com
Visualizing Reddit with my graph drawing library
http://www.yasiv.com/reddit#/Search?q=programming
40 comments
This is pretty awesome! Very smooth experience.
Have you seen d3.js? It has a similar force layout component, I'm curious as to your motivation for writing your own (although it looks and works very nice!)
Have you seen d3.js? It has a similar force layout component, I'm curious as to your motivation for writing your own (although it looks and works very nice!)
Yep, D3 is amazing and I truly love it. As for my motivation - I wrote the library to learn JavaScript. But I would really want to make it extremely fast even on the large graphs...
Very nice! I like how the lines on the graph wrap to 45 degrees.
Cool project indeed. I didn't have time to read your graph viz library, but I noticed the link to D3 in your github page. I realized then that all beautiful graph stuff I have seen in JS are made in D3, thank you for adding the ref to it. Just to mention a project which uses D3, https://secure.toolness.com/xpi/collusion.html . More over, the D3 page pointed me to circos, which looks amazing (not graph related, anyway). A bit offtopic, but wanted to share.
Very nice work!
I'm curious. What library was used to untangle the web of subreddits? It worked quite well? How do you untangle a web of random nodes & connections?
EDIT: apparently https://github.com/anvaka/VivaGraphJS
EDIT: apparently https://github.com/anvaka/VivaGraphJS
Is your library open-source or available for use at all? It's pretty slick looking
it's in the comment below yours: https://github.com/anvaka/VivaGraphJS
Really Cool :)
Great work. Later you can also add more sources like twitter, facebook
What "things" would you link together in twitter and facebook?
I'm guessing how friends/followers are connected.
Whole 6 degrees of separation idea
This is interesting and challenging problem. Interesting because it always leads to unexpected discoveries. Challenging because it's hard to show large clusters of friends in accessible manner.
LinkedIn has InMaps app ( http://inmaps.linkedinlabs.com/ ) which shows your network. It's cool, but really hard to read it...
LinkedIn has InMaps app ( http://inmaps.linkedinlabs.com/ ) which shows your network. It's cool, but really hard to read it...
Very nice. Thanks for including links to other graph libraries in your README on github. I have a "weekend" project coming up that requires this style of graph, so I'll be sure to try your library out.
Sure. Graph Dracula's site ( http://www.graphdracula.net/ ) has even more references to the similar projects. Could also be interesting :)
Nice - I found a few new subreddits to subscribe to, so a very good job!
their search works pretty well
http://metareddit.com/
http://metareddit.com/
Any easy way to set/get the exact position of nodes? rather than have it automatically generated, or overriding the automatically assigned position.
Just enumerate the nodes:
graph.forEachNode(function(node) { console.dir(node.position); });
By default nodes will not have any position assigned. Only after you run one step of layout algorithm ( https://github.com/anvaka/VivaGraphJS/blob/master/src/Layout... ) they get their positions.
graph.forEachNode(function(node) { console.dir(node.position); });
By default nodes will not have any position assigned. Only after you run one step of layout algorithm ( https://github.com/anvaka/VivaGraphJS/blob/master/src/Layout... ) they get their positions.
I learned three things:
1) There are many, many more reddits than I knew about but I can't read that many.
2) That is a very nice library. I guess you have a simple spring system which compute the relative placements of the different things?
3) It is really fun to play with the springs. In fact, I will do that now.
1) There are many, many more reddits than I knew about but I can't read that many.
2) That is a very nice library. I guess you have a simple spring system which compute the relative placements of the different things?
3) It is really fun to play with the springs. In fact, I will do that now.
Thank you :).
2) Yes, every node is a particle, every edge is a spring. Then you apply forces and mother nature does the rest. It always amazed me.
2) Yes, every node is a particle, every edge is a spring. Then you apply forces and mother nature does the rest. It always amazed me.
One thing that I noticed and hasn't been mentioned here (and everyone should try), the scrolling/zooming is fantastic. It remains smooth even with many many items displayed.
Well done.
It is all too common that a visualization like this will cripple performance, the reddit and book visualization are still very smooth for panning/zooming.
Well done.
It is all too common that a visualization like this will cripple performance, the reddit and book visualization are still very smooth for panning/zooming.
It's a smooth effect, but it's so much nicer when scrolling scrolls instead of zooming. On this one, scrolling left or right just duplicates scrolling up or down, and for some reason, scrolling right (zooming out) sometimes stutters. I would have thought that trackpad scrolling was really common now, but maybe it's somewhat Mac-specific?
Agreed, that's annoying. I couldn't find an easy way to separate horizontal scroll event from vertical. But it's something I really want to fix...
To be fair, I haven't seen a good solution to this anywhere. Even on Apple's site, you'll sometimes be scolling down a page, and then the page will stop while an embedded frame scrolls sideways.
The pinch to zoom would work fine, but Safari intercepts this. Modifier key+scrolling to zoom would be fine as well, but not so discoverable. Apple should add some of the iOS multitouch events to Safari, but it's not a good fit since there's really only one visible pointer in OS X. Google Maps would really benefit from this.
The pinch to zoom would work fine, but Safari intercepts this. Modifier key+scrolling to zoom would be fine as well, but not so discoverable. Apple should add some of the iOS multitouch events to Safari, but it's not a good fit since there's really only one visible pointer in OS X. Google Maps would really benefit from this.
Hopefully this isn't on my side, but clicking on "The dark side of RATP (Paris metro) tickets" from /r/ReverseEngineering gives link address http://translate.google.com/translate?sl=fr&tl=en... which resolves to a blank translate page.
The url from Reddit direct is: http://translate.google.com/translate?sl=fr&tl=en&js...
Looks like the handling of & on your side? Looks very cool though :)
The url from Reddit direct is: http://translate.google.com/translate?sl=fr&tl=en&js...
Looks like the handling of & on your side? Looks very cool though :)
Good catch! I didn't realize reddit encodes '&', '<' and '>' when it returns json data:
https://github.com/reddit/reddit/blob/master/r2/r2/controlle...
which ends up in:
https://github.com/reddit/reddit/blob/master/r2/r2/lib/filte...
It should be fixed now :). Thank you for pointing out!
It should be fixed now :). Thank you for pointing out!
If you click into this using IE, you are trapped by your detection page and it breaks the back function.
Please consider fixing this. I know we dont like IE users, but please dont punish them!
Please consider fixing this. I know we dont like IE users, but please dont punish them!
No-no, you are right. I will fix it. Thank you for noticing!
A comparison of "conservative" versus "progressive" reveals some interesting things. Progressive leads to the Obama subreddit, where conservative leads to the Ron Paul and Rand Paul subreddits. The connections in each are ingriguing, for instance, the progressive has connections to environmental sub reddits, while the conservative has links to financial sub reddits. Interesting.
useful software if you happen to often work with graphs : http://gephi.org. The ForceAtlas V2 algorithm which is an optimization of Barnes-Hut one is pretty fast !
Thank you for the reference. I read they are using Barnes-Hut optimization for larger graphs. Do you know what kind of optimization?
Well done, Andrei. I will +1 on "do something in Wikipedia." or academic paper references.
Very nice work!
I wonder if it's possible to highlight the reddit mascot with css according to the :visited pseudo-class if you put an a-element around it (or some other way)?
Showing "recent activity" for sub-reddits in a subtle way would be awesome, too, can't click on everything :)
Small detail: if the search term has a white-space around, no results are found.
I wonder if it's possible to highlight the reddit mascot with css according to the :visited pseudo-class if you put an a-element around it (or some other way)?
Showing "recent activity" for sub-reddits in a subtle way would be awesome, too, can't click on everything :)
Small detail: if the search term has a white-space around, no results are found.
Very nice suggestions! Thank you, kaiwetzel.
I will look into :visited and fix the white spaces. And what is a "recent activity"?
I will look into :visited and fix the white spaces. And what is a "recent activity"?
The graph drawing library source code: https://github.com/anvaka/VivaGraphJS
Would love to hear what you think...