Visualizing Reddit with my graph drawing library | Hacker News Reader

Visualizing Reddit with my graph drawing library

yasiv.com

128 pointsanvaka40 comments

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

Would love to hear what you think...

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!

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!)

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.

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.

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.

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.

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.

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!

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

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

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!

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.

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.

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.

Very nice suggestions! Thank you, kaiwetzel.

I will look into :visited and fix the white spaces. And what is a "recent activity"?

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

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

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

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

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?

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

Great catch! Thank you very much. Fixed it.

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

their search works pretty well

http://metareddit.com/

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

Do something similar for Wikipedia categories, please :)

Intriguing idea...

Really Cool :)

Reply on news.ycombinator.com