-
Notifications
You must be signed in to change notification settings - Fork 0
/
data.html
150 lines (120 loc) · 5.21 KB
/
data.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="copyright" content="MACode ID, https://macodeid.com/">
<title>YA LIT FP</title>
<link rel="stylesheet" href="stylesheets/stylesheet.css">
<link rel="stylesheet" href="stylesheets/normalize.css">
<link rel="stylesheet" href="stylesheets/github-light.css">
<link rel="stylesheet" href="assets/css/maicons.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" href="assets/css/theme.css">
<script src="components/page/footer.js" type="text/javascript" defer></script>
<script src="components/page/header.js" type="text/javascript" defer></script>
</head>
<style type="text/css">
#box1, #box2{
width:100%;
height:200px;
margin:10px;
padding:20px;
}
#box1 {
background:#D3D3D3;
border-radius: 25px;
}
#box2 {
background:#ff0;
border-radius: 25px;
}
h2, p {
padding:5px;
}
</style>
<body>
<!-- Back to top button -->
<div class="back-to-top"></div>
<header-component pagename="Data"></header-component>
<div class="page-section">
<div class="container">
<div class="row align-items-center">
<div class="col py-3">
<h2 class="title-section">Data</h2>
<div class="divider"></div>
<tableau-viz id='tableau-viz'
src='https://prod-useast-a.online.tableau.com/t/yalitfp/views/ya-lit-project/DiversityDashboard'
width='1000' height='850' toolbar='bottom'>
</tableau-viz>
<div id="box1" style="height:260px">
<p>
We can see a few trends evident here. First, that the amount of diverse books overall each year does seem to
be increasing slightly, and is noticeable. Especially since in 2013-2015 there were 15 books per list, so
the percentage of books that made the NYT list in comparison to other years is much smaller Another
interesting thing to note is how what kinds of diversity changes over time. Back in the early 2010s, Books
about mental illnesses were much more prevalent, but as time has gone on books involving race and the LGBTQ
community have become much more dominant. I am curious about what has impacted these changes, but I think
the heightening of the Black Lives Matter movement in 2020 and the rise of social media book discussions
(like BookTok) have played major roles.
</p>
<p>
I also wanted to include the 2020 Census Population Map below to highlight how the diversity of our books
does not reflect the diversity of the people in the United States.
</p>
</div>
<div class='tableauPlaceholder' id='viz1670371378248' style='position: relative'>
<object class='tableauViz' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
<param name='embed_code_version' value='3' />
<param name='path' value='shared/X2D6CGNF5' />
<param name='toolbar' value='no' />
<param name='static_image'
value='https://public.tableau.com/static/images/X2/X2D6CGNF5/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='no' />
<param name='display_count' value='yes' />
<param name='tabs' value='no' />
<param name='language' value='en-US' />
</object>
</div>
</div>
</div>
</div>
</div>
<footer-component>
<footer-component />
</body>
<script type='module'
src='https://prod-useast-a.online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js'></script>
<noscript>
<a
href='https://www.census.gov/library/visualizations/interactive/racial-and-ethnic-diversity-in-the-united-states-2010-and-2020-census.html'>
<img alt=' ' src='https://public.tableau.com/static/images/X2/X2D6CGNF5/1_rss.png'
style='border: none' />
</a>
</noscript>
<script type='text/javascript'>
var divElement = document.getElementById('viz1670371378248');
var vizElement = divElement.getElementsByTagName('object')[0];
if (divElement.offsetWidth > 800) {
vizElement.style.width = '1140px';
vizElement.style.height = '1227px';
}
else if (divElement.offsetWidth > 500) {
vizElement.style.width = '1140px';
vizElement.style.height = '1227px';
}
else {
vizElement.style.width = '100%';
vizElement.style.height = '1527px';
}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
</html>