-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (94 loc) · 5.48 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
101
102
103
104
<!doctype html>
<html>
<head>
<!-- Title & Favicon -->
<title>Reddit Comment Communities</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- Bootstrap meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css-dist/styles.min.css" />
<!-- D3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M"
crossorigin="anonymous" defer></script>
<!-- Custom JS -->
<script src="js/main.min.js" defer></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="http://localhost:3000/">
<img src="assets/favicon.ico" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target=".about-modal">About</a>
</li>
<li class="nav-item">
<a class="nav-link reset-visualization">Reset Visualization</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button id='startStopButton' type="button" class="btn btn-success">Get comments</button>
</li>
</ul>
</div>
</nav>
<div class="modal fade about-modal" tabindex="-1" role="dialog" aria-labelledby="aboutLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutLabel">About this project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="lead mb-0">
<strong>Comment Communities</strong> visualizes the comment activity on reddit in real time</p>
<p>by repeatedly poking the
<a target="_blank" href="https://www.reddit.com/r/all/comments/.json?limit=3">reddit comments API</a> for new comments, sorting them by subreddit, and using D3 to visualize the
subreddits as bubbles.</p>
<p>The colors are chosen randomly from a D3 palette, and the sizes are proportional to the number of comments
left in a subreddit.</p>
<p>All of the data is kept in the front-end, so you can look at it yourself by opening your javascript console
and looking at the
<code>subreddits</code> global object.</p>
<p>We have a full
<a target="_blank" href="https://github.com/gt-big-data/comment-communities/blob/master/README.md">
<code>README.md</code>
</a> in our GitHub Repository, linked below.</p>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-lg" role="group" aria-label="Meet the team, View Source Code, Close">
<button type="button" class="btn btn-primary">
<a target='_blank' href='https://github.com/orgs/gt-big-data/teams/visualization/members'>Meet the Team</a>
</button>
<button type="button" class="btn btn-success">
<a target='_blank' href="https://github.com/gt-big-data/comment-communities">Check out the Source Code on GitHub</a>
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class='container-fluid' id='svg-wrap'>
<h1 class='display-4 text-center'>Reddit Comment Communities</h1>
<p class='lead px-5'>A project by the
<a href='https://github.com/orgs/gt-big-data/teams/visualization' target='_blank'>GT Big Data Club</a> to visualize the activity on Reddit in real time.</p>
<p class='px-5'>A lot of people on Reddit have a lot of opinions, and they aren't afraid to express them in the form of comments.
Constantly. By checking all the new comment activity on Reddit, we can group incoming comments by their Subreddit
and visualize the activity in real time. Use the navigation bar above to learn more about the project, view the
source code, or to reset the visualization. Click the button in the upper-right corner to start it up</p>
</div>
</body>
</html>