forked from max-mapper/gh-pages-template
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
100 lines (99 loc) · 7.43 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<title>Communiviz | Social network visualisations</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">
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" href="css/tablet.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.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="wrap">
<!-- URL shortened to http://goo.gl/ReMvh -->
<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 class="active"><a href="/sna">Home</a></li>
<li><a href="/sna/vizit">Vizit</a></li>
<li><a href="/sna/selfposts.html">Self-post graph</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<header id="header" class="hero-unit">
<h1 id="main-title">Communiviz</h1>
<h2>Visualising social media networks</h2>
</header>
<p>
In April 2013 <a target="_blank" href="http://www.reddit.com/r/TheoryOfReddit/comments/1ava66/has_anyone_ever_made_a_graph_of_how_all_the/">I posed the question</a>: has anyone ever tried to perform social network analysis on <a target="_blank" href="http://www.reddit.com">Reddit</a> by visualising the links between different subreddits? As you can see from the discussion on that page, several other attempts have also been made at answering this question, mainly by using sidebar links to define connections between subreddits.
</p>
<p>
Here are my attempts at creating an interactive map of Reddit:
</p>
<h2>Vizit</h2>
<div class="preview">
<a href="/sna/vizit">
<img class="bottom shadow" src="img/vizit-megaman.png" alt="Go to Vizit" title="Go to Vizit" />
<img class="top shadow" src="img/vizit-preview.png" alt="Go to Vizit" title="Go to Vizit" />
</a>
</div>
<p>
After creating my original self-post map (see below) I was unsatisfied with how little of Reddit was represented in this dataset. To that end I created a new dataset, this time defining links by the number of times subreddits contain links to the same websites (so not just other sections of reddit). This dataset was much larger, so I had to make the visualisation more interactive to allow you to hide parts of the network in order to focus on the bits you care about. <a href="/sna/vizit">Click here to try it out</a>.
</p>
<h3>Offshoots</h3>
<p>
You may also want to check out Rhiever's <a href="http://rhiever.github.io/redditviz/">redditviz</a> site. This uses the vizit code to visualise a slightly different dataset comprising link submissions, self-posts, and comments on reddit. Check out the <a href="http://arxiv.org/abs/1312.3387">research paper</a> by Michigan State University if you'd like to know how the dataset was produced.
</p>
<h2>Self-post map</h2>
<div class="preview">
<a href="/sna/selfposts.html">
<img class="shadow" src="img/selfpost-preview.png" alt="Click for an interactive version" title="Click for an interactive version" />
</a>
</div>
<p>
This was my first attempt at mapping the relationships between subreddits, with associations defined by a redditor posting a link to one subreddit in another subreddit. In order to make the map usable, I had to remove a lot of data (which is why many subs are missing). This work has largely been superseded by <a href="/sna/vizit">Vizit</a> now, but I've left <a href="/sna/selfposts.html">here</a> for reference, due to the media interest it received.
</p>
<h3>Press</h3>
<p>
It just so happened that a few online media types picked up on this work and reported it. Here are some links to those articles:
</p>
<ul>
<li><a href="http://mashable.com/2013/05/13/reddit-subreddit-graph/">Mashable</a> - Here's How Reddit's Communities Are Interconnected</li>
<li><a href="http://www.huffingtonpost.com/2013/05/16/reddit-graph-subreddit_n_3280563.html">Huffington Post</a> - Reddit User Makes Beautiful, Explorable Graph Of Subreddit Community</li>
<li><a href="http://www.technobuffalo.com/2013/05/27/mapping-the-universe-of-reddit/">Techno Buffalo</a> - Redditor Visually Maps Subreddit Community In Visually Arresting, Interactive Graph</li>
<li><a href="http://www.crackajack.de/2013/05/14/visualization-of-the-reddit-network/">Crackajack.de</a> -
Visualization of the Reddit Network (German)</li>
<li><a href="http://animalnewyork.com/2013/this-is-what-reddit-really-looks-like/">Animal</a> - This Is What Reddit Really Looks Like</li>
<li><a href="http://www.trendhunter.com/trends/interactive-data-map">Trendhunter</a> - This Interactive Data Map of the Reddit Universe is Responsive</li>
</ul>
<p>
If you'd like to write about any of my work, please <a target="_blank" href="http://www.reddit.com/message/compose/?to=sharkbait784&subject=Reddalysis">contact me</a> to set up an interview.
</p>
</div>
</div>
</div>
<div id="footer">
<div>
<p>This site is all original content by sharkbait784, unless stated otherwise.</p>
<p>
If you'd like to make use of any of this work feel free, it's all open-sourced - license details are available on each individual page. All I ask is that you <a target="_blank" href="http://www.reddit.com/message/compose/?to=sharkbait784&subject=Reddalysis">let me know</a> first.
</p>
</div>
</div>
</body>
</html>