-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojectpage.html
61 lines (60 loc) · 3.59 KB
/
projectpage.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
<!DOCTYPE html>
<html>
<head>
<title>Bridging the Generational Gap Project Page</title>
<meta name="description" content="Project Page" />
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap");
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@100&display=swap");
</style>
<script src="radialBarChart.js"></script>
</head>
<body>
<div style="text-align: center;">
<div class="title" style="text-align: center;">
Bridging the Generational Gap in American Politics
</div>
<div class="authors">By Shirley Cao, Jessica Lee, and Annie Zhang</div>
<div style="display: flex; flex-direction: row; justify-content:center; margin-top: 5%;">
<div style="display: flex; flex-direction: column; margin-right: 3%; align-items: center;">
<div class="abstract" style="margin-top:10%; margin-right: 10%;">
<b>Abstract.</b> Polarization in U.S politics has been growing in recent years. The "generation gap"
between youth and older adults in American society reflects these widening divisions in political
viewpoints and media consumption. Even within a family, these gaps between parents and children
have the opportunity to cause conflicts and create communication siloes. With our scrollytelly
visualization "Bridging the Generational Gap", we attempt to find common ground in both the news
different generations have lived through and the news sources they consume. Using media trend data
from Pew Research and headlines from AllSides.com, we also highlight the various media biases and
political leanings of many news sources. Our final visualization encourages people to learn from others
by allowing users to choose from various demographics to build a real reader, step into their perspective,
and explore their newsfeed. Though division has become a defining feature of American Politics, our goal
is to create a story with interactive visualizations to help each side talk with and understand one another.
</div>
<div style="margin-top:10%; margin-right: 10%;">
Read the full
<a class="outro-link" href="./final/FinalPaper.pdf" target="_blank">paper</a>
here.
</div>
</div>
<img style="width:50%; height:40%" src="./img/summaryimage.jpeg"></img>
</div>
<div style="margin-top: 10%;">
Checkout our
<a class="outro-link" href="https://6859-sp21.github.io/final-project-generation-gap/" target="_blank">project visualization</a>,
<a class="outro-link" href="https://github.com/6859-sp21/final-project-generation-gap" target="_blank">github repo</a>, and
<a class="outro-link" href="https://youtu.be/lIBWMexTruk" target="_blank">demo video</a>
for more information and instructions.
</div>
</div>
</body>
</html>