forked from max-mapper/gh-pages-template
-
Notifications
You must be signed in to change notification settings - Fork 6
/
selfposts.html
131 lines (124 loc) · 9.07 KB
/
selfposts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html>
<head>
<title>Subreddit connections</title>
<link rel="shortcut icon" href="img/reddit.png" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="js/sigma.min.js"></script>
<script type="text/javascript" src="js/sigma.fisheye.js"></script>
<script type="text/javascript">
var graphData = "data/subreddits.json";
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/sigma.parseJson.js"></script>
<script type="text/javascript" src="js/selfGraph.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136763356-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-136763356-1', { 'optimize_id': 'GTM-MKCF9FP'});
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="wrap">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="header-container">
<a class="brand" href="/sna">Communiviz</a>
<ul class="nav">
<li><a href="/sna">Home</a></li>
<li><a href="/sna/vizit">Vizit</a></li>
<li class="active"><a href="/sna/selfposts.html">Self-post graph</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<h1 id="main-title">The Reddit network - self posts</h1>
<p>
This graph was based on data collected from public Reddit posts since 2008, kindly provided by <a target="_blank" href="http://www.reddit.com/user/Deimorz">Deimorz</a>.
</p>
<p>
In order to identify the most interesting cliques, the following process was applied to the data (if you aren't familiar with the nomenclature of graph theory, a "node" is a point on a graph (so one of the subreddits in this case), an "edge" is a link between two nodes and the "degree" of a node is the number of edges connected to it):
<ul>
<li>Removed edges between subreddits that have less than eight occurrances.</li>
<li>Removed nodes with a degree greater than 75 (this was enough to get rid of every sub in the <a target="_blank" href="http://stattit.com/">top 20 subreddits (by subscriber)</a>. Since these subs are likely to link to a wide variety of topics, an association with one of these subs is not particularly interesting to us.</li>
<li>Remove any remaining nodes that are now orphaned (i.e. no edges link to them).</li>
<li>Use a <a target="_blank" href="http://gephi.org/2011/forceatlas2-the-new-version-of-our-home-brew-layout/">ForceAtlas</a> layout in <a target="_blank" href="https://gephi.org/">Gephi</a> to define the cliques.</li>
</ul>
</p>
<p>
The nodes have been sized and coloured according to their degree (i.e. the number of edges connected to them), so subreddits that link to lots of other parts of reddit will appear to be bigger and redder.
</p>
<p>
There are many different ways to define associations and many different ways to filter/identify niches, so if you have any other ideas then feel free to post something on the <a href="http://www.reddit.com/r/TheoryOfReddit/comments/1e596w/a_graph_of_reddit_linking_subs_based_on_internal/" target="_blank">comments</a> for this page if you'd like to suggest anything. A link to download the graph file displayed here can be found at the <a href="#footnote">bottom of the page</a>.
</p>
<p>
The graph below is zoomable, draggable and searchable, so have an explore! It covers posts from <span class="datetime">Thu, 23 Jun 2005 18:50:02 GMT</span> to <span class="datetime">Thu, 28 Mar 2013 01:24:17 GMT</span>. If you click on a subreddit, it will open in a new tab.
</p>
<div id="graph-wrapper">
<div id="controls">
<button id="reset-graph">Reset graph</button>
<button id="toggle-hiding">Hide unconnected networks</button>
<div id="search">
<input type="search" name="searchbox" id="searchbox" results=5 placeholder="e.g. 'Minecraft'"/>
<div id="searchalert" class="alert">No matches found</div>
</div>
<div id="likebuttons">
<!-- LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="right"></script>
<!-- Facebook -->
<div class="fb-like" data-href="http://redditstuff.github.io/sna/selfposts.html" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Google+ -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<div id="graph"></div>
<div class="right footnote">Powered by <div class="sigma-font">sigma.js</div>. Best viewed in <a target="_blank" href="http://www.google.com/chrome">Google Chrome</a></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
This graph was produced with <a target="_blank" class="sigma-font" href="http://sigmajs.org">sigma.js</a> by <a target="_blank" href="http://www.reddit.com/message/compose/?to=sharkbait784&subject=Reddalysis">sharkbait784</a> in May 2013, and may be distributed under the <a href="https://www.gnu.org/copyleft/fdl.html" target="_blank">GFDL</a> License. You can download the graph in <a target="_blank" href="http://gexf.net/format/">GEXF</a> format <a target="_blank" href="data/subreddits.gexf">here</a>.
</div>
<p>
Embed this graph in your webpage with the following code snippet:
</p>
<code class="prettyprint">
<iframe src="http://redditstuff.github.io/sna/embedded/" style="height:500px;width:500px;border:1px dashed;" />
</code>
</div>
</body>
</html>