5 ms·

Visualizing Reddit with my graph drawing library

128 points by anvaka 15y ago

anvaka 15y ago
It shows how subreddits relate to each other. The data is taken from subreddit description. And a link between two subreddits means one has a reference to another. The graph drawing library source code: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS Would love to hear what you think...
- gghh 15y ago
  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 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.
- mcdillon 15y ago
  Very nice work!
- enjalot 15y ago
  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!)
  - anvaka 15y ago
    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...
- mhansen 15y ago
  Very nice! I like how the lines on the graph wrap to 45 degrees.
lukejduncan 15y ago
Is your library open-source or available for use at all? It's pretty slick looking
- jurre 15y ago
  it's in the comment below yours: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS
Hackura 15y ago
Really Cool :)
mandeepj 15y ago
Great work. Later you can also add more sources like twitter, facebook
- bawatski 15y ago
  What "things" would you link together in twitter and facebook?
  - m_ke 15y ago
    I'm guessing how friends/followers are connected. Whole 6 degrees of separation idea
    - anvaka 15y ago
      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/ http://inmaps.linkedinlabs.com/ ) which shows your network. It's cool, but really hard to read it...
cruise02 15y ago
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.
- anvaka 15y ago
  Sure. Graph Dracula's site ( http://www.graphdracula.net/ http://www.graphdracula.net/ ) has even more references to the similar projects. Could also be interesting :)
ChrisAnn 15y ago
Nice - I found a few new subreddits to subscribe to, so a very good job!
- gtani 15y ago
  their search works pretty well http://metareddit.com/ http://metareddit.com/
muyuu 15y ago
Any easy way to set/get the exact position of nodes? rather than have it automatically generated, or overriding the automatically assigned position.
- anvaka 15y ago
  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/forceDirected.js https://github.com/anvaka/VivaGraphJS/blob/master/src/Layout... ) they get their positions.
tomjen3 15y ago
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.
- anvaka 15y ago
  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.
orofino 15y ago
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.
- dubya 15y ago
  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?
  - anvaka 15y ago
    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...
    - dubya 15y ago
      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.
nik_0_0 15y ago
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&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fvirtualabs.fr%2FLa-face-cachee-des-tickets-RATP&act=url http://translate.google.com/translate?sl=fr&tl=en&#3... which resolves to a blank translate page. The url from Reddit direct is: http://translate.google.com/translate?sl=fr&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fvirtualabs.fr%2FLa-face-cachee-des-tickets-RATP&act=url http://translate.google.com/translate?sl=fr&tl=en&js... Looks like the handling of & on your side? Looks very cool though :)
- anvaka 15y ago
  Good catch! I didn't realize reddit encodes '&', '<' and '>' when it returns json data: https://github.com/reddit/reddit/blob/master/r2/r2/controllers/reddit_base.py#L731 https://github.com/reddit/reddit/blob/master/r2/r2/controlle... which ends up in: https://github.com/reddit/reddit/blob/master/r2/r2/lib/filters.py#L48 https://github.com/reddit/reddit/blob/master/r2/r2/lib/filte... It should be fixed now :). Thank you for pointing out!
tsunamifury 15y ago
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!
- anvaka 15y ago
  No-no, you are right. I will fix it. Thank you for noticing!
dhammack 15y ago
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.
ptbrowne 15y ago
useful software if you happen to often work with graphs : http://gephi.org http://gephi.org. The ForceAtlas V2 algorithm which is an optimization of Barnes-Hut one is pretty fast !
- anvaka 15y ago
  Thank you for the reference. I read they are using Barnes-Hut optimization for larger graphs. Do you know what kind of optimization?
ajarmoniuk 15y ago
Do something similar for Wikipedia categories, please :)
- anvaka 15y ago
  Intriguing idea...
Shuo 15y ago
Well done, Andrei. I will +1 on "do something in Wikipedia." or academic paper references.
kaiwetzel 15y ago
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.
- anvaka 15y ago
  Very nice suggestions! Thank you, kaiwetzel. I will look into :visited and fix the white spaces. And what is a "recent activity"?
groaner 15y ago
Minor typo on your about page: Yasiv is a visual diScovery engine.
- anvaka 15y ago
  Great catch! Thank you very much. Fixed it.
nixarn 15y ago
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 https://github.com/anvaka/VivaGraphJS

128 points by anvaka 15y ago

It shows how subreddits relate to each other. The data is taken from subreddit description. And a link between two subreddits means one has a reference to another. The graph drawing library source code: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS Would love to hear what you think...

gghh 15y ago
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 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.
mcdillon 15y ago
Very nice work!
enjalot 15y ago
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!)
- anvaka 15y ago
  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...
mhansen 15y ago
Very nice! I like how the lines on the graph wrap to 45 degrees.

lukejduncan 15y ago

Is your library open-source or available for use at all? It's pretty slick looking

jurre 15y ago
it's in the comment below yours: https://github.com/anvaka/VivaGraphJS https://github.com/anvaka/VivaGraphJS

Hackura 15y ago

Really Cool :)

mandeepj 15y ago

Great work. Later you can also add more sources like twitter, facebook

bawatski 15y ago
What "things" would you link together in twitter and facebook?
- m_ke 15y ago
  I'm guessing how friends/followers are connected. Whole 6 degrees of separation idea
  - anvaka 15y ago
    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/ http://inmaps.linkedinlabs.com/ ) which shows your network. It's cool, but really hard to read it...

cruise02 15y ago

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.

anvaka 15y ago
Sure. Graph Dracula's site ( http://www.graphdracula.net/ http://www.graphdracula.net/ ) has even more references to the similar projects. Could also be interesting :)

ChrisAnn 15y ago

Nice - I found a few new subreddits to subscribe to, so a very good job!

gtani 15y ago
their search works pretty well http://metareddit.com/ http://metareddit.com/

muyuu 15y ago

Any easy way to set/get the exact position of nodes? rather than have it automatically generated, or overriding the automatically assigned position.

anvaka 15y ago
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/forceDirected.js https://github.com/anvaka/VivaGraphJS/blob/master/src/Layout... ) they get their positions.

tomjen3 15y ago

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.

anvaka 15y ago
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.

orofino 15y ago

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.

dubya 15y ago
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?
- anvaka 15y ago
  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...
  - dubya 15y ago
    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.

nik_0_0 15y ago

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&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fvirtualabs.fr%2FLa-face-cachee-des-tickets-RATP&act=url http://translate.google.com/translate?sl=fr&tl=en&#3... which resolves to a blank translate page. The url from Reddit direct is: http://translate.google.com/translate?sl=fr&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fvirtualabs.fr%2FLa-face-cachee-des-tickets-RATP&act=url http://translate.google.com/translate?sl=fr&tl=en&js... Looks like the handling of & on your side? Looks very cool though :)

anvaka 15y ago
Good catch! I didn't realize reddit encodes '&', '<' and '>' when it returns json data: https://github.com/reddit/reddit/blob/master/r2/r2/controllers/reddit_base.py#L731 https://github.com/reddit/reddit/blob/master/r2/r2/controlle... which ends up in: https://github.com/reddit/reddit/blob/master/r2/r2/lib/filters.py#L48 https://github.com/reddit/reddit/blob/master/r2/r2/lib/filte... It should be fixed now :). Thank you for pointing out!

tsunamifury 15y ago

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!

anvaka 15y ago
No-no, you are right. I will fix it. Thank you for noticing!

dhammack 15y ago

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.

ptbrowne 15y ago

useful software if you happen to often work with graphs : http://gephi.org http://gephi.org. The ForceAtlas V2 algorithm which is an optimization of Barnes-Hut one is pretty fast !

anvaka 15y ago
Thank you for the reference. I read they are using Barnes-Hut optimization for larger graphs. Do you know what kind of optimization?

ajarmoniuk 15y ago

Do something similar for Wikipedia categories, please :)

anvaka 15y ago
Intriguing idea...

Shuo 15y ago

Well done, Andrei. I will +1 on "do something in Wikipedia." or academic paper references.

kaiwetzel 15y ago

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.

anvaka 15y ago
Very nice suggestions! Thank you, kaiwetzel. I will look into :visited and fix the white spaces. And what is a "recent activity"?

groaner 15y ago

Minor typo on your about page: Yasiv is a visual diScovery engine.

anvaka 15y ago
Great catch! Thank you very much. Fixed it.

nixarn 15y ago

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 https://github.com/anvaka/VivaGraphJS