-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (114 loc) · 5.7 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Project</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
crossorigin=""/>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v4.js"></script>
<script src="https://d3js.org/topojson.v3.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
crossorigin=""></script>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body style="background-color: black">
<div class="tooltip"></div>
<div class="header" style="font-size: 25px;
border:3px solid #1DA1F2; border-radius: 100px;
width: 700px; margin: auto;
margin-top: 50px">
<h1>Our world in tweets</h1>
</div>
<div class="header" style="margin: 200px 200px 50px;">
<h1>Social media has revolutionized the way we communicate, allowing us to share
thoughts and media about the trends that we feel matter most. This has generated loads of
data on what people all over the world are passionate about. We collected just a sliver
of what's possible in Twitter data to see what people cared about most in November 2022,
and where. Scroll down to learn more.
</h1>
<br>
<input type="button" onclick="window.location.href='https://www.youtube.com/watch?v=Fhpq2__YXOU';"
class="video-link" value="Watch the video"/>
</div>
<div id="wrapper" style="margin-top: 150px">
<div id="wrapper-inner">
<div id="scroll-down">
<span class="arrow-down">
<!-- css generated icon -->
</span>
</div>
</div>
</div>
<div class="header" style="margin-top: 150px; margin-bottom: 50px">
<h1><span class="blinking-cursor">|</span><span style="color: darkgray">What's happening?</span></h1>
<h1><span id="country-label" style="color: #1DA1F2">The entire world</span> tweeted most about
<span id="top-trend-label" style="color: #1DA1F2"></span>
on
<span id="date-label" style="color: #1DA1F2">11/09/2022 </span>
</h1>
<input type="date" min="2022-11-09" max="2022-11-30" id="tweet-dates" value="2022-11-09">
</div>
<div id="content" class="grid-container">
<svg id="bubble-chart">
</svg>
<div id="map"></div>
<script src="js/mapScript.js"></script>
</div>
<div id="wrapper" style="margin-top: 150px">
<div id="wrapper-inner">
<div id="scroll-down">
<span class="arrow-down">
<!-- css generated icon -->
</span>
</div>
</div>
</div>
<div class="header" style="margin: 150px 200px 50px;">
<h1><span style="color: darkgray">#HowsItHoldingUp</span></h1>
<h1>We took the <span style="color: #1DA1F2">top 20 global</span> trends from the
<span style="color: #1DA1F2">first week of our data collection</span> and put together time-series data on them to get an idea
of how well trends held up throughout the month. Are Twitter trends just quick fads or something more?</h1>
</div>
<div>
<svg id="line-chart" width="1300" height="600" style="display: block; margin: auto">
<g id="x-axis"></g>
<g id="y-axis"></g>
<g id="lines"></g>
<g id="overlay"><line></line></g>
</svg>
</div>
<div id="trend-buttons">
</div>
<div id="wrapper" style="margin-top: 150px">
<div id="wrapper-inner">
<div id="scroll-down">
<span class="arrow-down">
<!-- css generated icon -->
</span>
</div>
</div>
</div>
<div class="header" style="margin: 150px 200px 50px;">
<h1>Thanks for using our visualization. As you can probably tell, a lot happened in just less than
a month. The world is often times excited about some of the same things, even though we're separated
by thousands of miles of ocean and lands. It seems as though more unites us than divides us.</h1>
<h1>Trends seem to blow up all of a sudden for day and then
cool back down, showcasing how contagious excitement is, especially when social media can amplify it.
But it's also such a volatile thing.</h1>
<h1>
By <span style="color: #1DA1F2">Hibban Butt</span>, <span style="color: #1DA1F2">Ashley Lan</span>,
and <span style="color: #1DA1F2">Kelsey Nicholson</span>
</h1>
</div>
</body>
</html>