

Visualizing Reddit with my graph drawing library - anvaka
http://www.yasiv.com/reddit#/Search?q=programming

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

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

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

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

------
tsunamifury
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
No-no, you are right. I will fix it. Thank you for noticing!

------
nik_0_0
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&amp;tl=en...](http://translate.google.com/translate?sl=fr&amp;tl=en&amp;js=n&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=2&amp;eotf=1&amp;u=http%3A%2F%2Fvirtualabs.fr%2FLa-
face-cachee-des-tickets-RATP&amp;act=url) which resolves to a blank translate
page.

The url from Reddit direct is:
[http://translate.google.com/translate?sl=fr&tl=en&js...](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)

Looks like the handling of & on your side? Looks very cool though :)

~~~
anvaka
Good catch! I didn't realize reddit encodes '&', '<' and '>' when it returns
json data:
[https://github.com/reddit/reddit/blob/master/r2/r2/controlle...](https://github.com/reddit/reddit/blob/master/r2/r2/controllers/reddit_base.py#L731)
which ends up in:
[https://github.com/reddit/reddit/blob/master/r2/r2/lib/filte...](https://github.com/reddit/reddit/blob/master/r2/r2/lib/filters.py#L48)

It should be fixed now :). Thank you for pointing out!

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

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

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

------
kaiwetzel
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
Very nice suggestions! Thank you, kaiwetzel.

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

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

------
cruise02
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
Sure. Graph Dracula's site ( <http://www.graphdracula.net/> ) has even more
references to the similar projects. Could also be interesting :)

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

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

~~~
jurre
it's in the comment below yours: <https://github.com/anvaka/VivaGraphJS>

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

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

------
groaner
Minor typo on your about page: Yasiv is a visual di _S_ covery engine.

~~~
anvaka
Great catch! Thank you very much. Fixed it.

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

~~~
gtani
their search works pretty well

<http://metareddit.com/>

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

~~~
bawatski
What "things" would you link together in twitter and facebook?

~~~
m_ke
I'm guessing how friends/followers are connected. Whole 6 degrees of
separation idea

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

------
ajarmoniuk
Do something similar for Wikipedia categories, please :)

~~~
anvaka
Intriguing idea...

------
Hackura
Really Cool :)

