-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
305 lines (268 loc) · 10.9 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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<html>
<head>
<style type="text/css">
.inline {
background-color: #f7f7f7;
border:solid 1px #B0B0B0;
}
.error {
font-weight: bold;
color: #FF0000;
}
.warning {
font-weight: bold;
}
.message {
font-style: italic;
}
.source, .output, .warning, .error, .message {
padding: 0 1em;
border:solid 1px #F7F7F7;
}
.source {
background-color: #f5f5f5;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.hl.num {
color: #AF0F91;
}
.hl.str {
color: #317ECC;
}
.hl.com {
color: #AD95AF;
font-style: italic;
}
.hl.opt {
color: #000000;
}
.hl.std {
color: #585858;
}
.hl.kwa {
color: #295F94;
font-weight: bold;
}
.hl.kwb {
color: #B05A65;
}
.hl.kwc {
color: #55aa55;
}
.hl.kwd {
color: #BC5A65;
font-weight: bold;
}
</style>
<title>Du Bois Gallery</title>
<!-- Connects to the slim version of JQuery through their CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<!-- Connects to the CSS of Bootstrap through cdnjs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Connects to the CSS -->
<link rel="stylesheet" href="www/styles.css">
<!-- TO CONSIDER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<script src="www/js/anime.min.js"></script>
<!-- Declares a global Array that lists identifiers for the informations menu -->
<script>
var infomenu = ["dubois", "icaro", "starks"];
</script>
<script>
$(document).ready(function(){
// Function that load the galley images
function preload_image_gallery(ids) {
let imgD = new Image();
let imgN = new Image();
imgD.src = "www/dubois/" + ids + ".png";
imgN.src = "www/new/" + ids + ".png";
}
// Applies the function on the image IDs
imageids.forEach(preload_image_gallery);
// Function that load the galley images
function preload_image_info(ids) {
let img = new Image();
img.src = "www/info/" + ids + "-dark.png";
}
// Applies the function on the image IDs
infomenu.forEach(preload_image_info);
});
</script>
<!-- Declares a global object that lists data on all plots -->
<script src="www/js/dataset.js"></script>
<!-- Establishes triggers to show and hide info with a slide animation.
Also changes the svg text that is visible inside the button -->
<script src="www/js/expander.js"></script>
<!-- Connects slider input position to the width of the foreground image -->
<script src="www/js/slider.js"></script>
<!-- Connects clicking on the gallery menu to which
images are shown in the comparative display and
updates the data shown in the details section -->
<script src="www/js/controller.js"></script>
<!-- Populates the menu with items -->
<script src="www/js/builder.js"></script>
<!-- Binds clicking on the buttons to scrolling behaviour
inside the gallery menu. Customizes their animation
to indicate limits of the navigation -->
<script src="www/js/navigator.js"></script>
<!-- Binds hover effects to the pairs of thumbnails -->
<script src="www/js/thumbhover.js"></script>
<!-- Binds hover effects to the info images -->
<script src="www/js/infohover.js"></script>
<!-- Animates the information menu on click -->
<script src="www/js/informer.js"></script>
<!-- Binds hover effects to each svg circle -->
<script src="www/js/morehover.js"></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6C5L03MC06"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-6C5L03MC06');
</script>
<body><div id='container'>
<!-- Title section -->
<div id='title-section'>
<div id='title'>
WEBDUBOIS: VISUALIZING RACIAL INEQUALITY AND BLACK ACHIEVEMENTS IN BRAZIL
<div id='subtitle'>
<a href='https://twitter.com/icarobsc' target='_blank'>
<span class='glyphs' id='twt'></span> @IcaroBSC
</a>
<a href='https://github.com/IcaroBernardes' target='_blank'>
<span class='glyphs' id='ghb'></span> @IcaroBernardes
</a>
<a href='https://www.linkedin.com/in/icarobsc/' target='_blank'>
<span class='glyphs' id='lkd'></span> @icarobsc
</a>
<div id='more'>
<svg viewBox="0 0 30 30">
<circle></circle>
<text x="7" y="27" id='plus'>+</text>
<text x="9" y="27" id='minus'>-</text>
</svg>
<div>MORE INFO:</div>
</div>
</div>
</div>
<div id='info'>
<div id='info-menu'>
<div class='info-item'>
<div class='info-img' id='dubois-light'></div>
<div class='info-text'>WHO WAS W.E.B. DUBOIS?</div>
</div>
<div class='info-item'>
<div class='info-img' id='icaro-light'></div>
<div class='info-text'>WHO IS ICARO BERNARDES?</div>
</div>
<div class='info-item'>
<div class='info-img' id='starks-light'></div>
<div class='info-text'>WHAT IS THE DUBOIS CHALLENGE?</div>
</div>
</div>
<div id='info-content'>
<div id='info-dubois'>
<div>
<a href='https://en.wikipedia.org/wiki/W._E._B._Du_Bois' target='_blank'>W.E.B. Du Bois</a> (February 23, 1868 – August 27, 1963) was an American sociologist, socialist, historian and Pan-Africanist civil rights activist <span style='font-style:italic;'>(Source: Wikipedia)</span>.<br><br>
At the 1900 Paris Exposition, his team made a historical display. They presented in many charts the situation of Black people in Georgia and the US in general. To draw the attention of passersby, they balanced bold aesthetics with elegant solutions for better readability.
</div>
<img src='www/portrait_dubois.jpg' class='portrait'>
</div>
<div id='info-icaro'>
<div>
Hi there! I'm a dataviz specialist and dev. Fullstack R as well as co-founder of BIT::Analytics.<br><br>
Initially, I took on the Du Bois Challenge to hone my dataviz skills in R. Currently, I see the challenge as a way to connect to the African Diaspora around the globe. People who I don't think I would get to know otherwise. It also is a stage to bring knowledge to people and promote Social Justice.<br><br>
Moreover, I'm always left in awe by the small tricks that the Du Bois team used to solve visualization problems. The fan chart is an intuitive comparison tool, while the spirals are a compact way to show huge differences in data.
</div>
<img src='www/portrait_icaro.jpg' class='portrait'>
</div>
<div id='info-starks'>
<div>
The timelessness of Du Bois' posters provoked <a href='https://twitter.com/ajstarks' target='_blank'>Anthony Starks</a>, <a href='https://twitter.com/AlDatavizguy' target='_blank'>Allen Hillery</a>, <a href='https://twitter.com/sqlsekou' target='_blank'>Sekou Tyler</a> and <a href='https://twitter.com/menscuriosa' target='_blank'>Chimdi Nwosu</a> to create and mantain the <a href='https://github.com/ajstarks/dubois-data-portraits/tree/master/challenge' target='_blank'>#DuBoisChallenge</a>. The proposal was to reproduce Du Bois posters with any tools whatsoever. So, I chose <code>ggplot2</code> and its many extensions. Furthermore, I used this opportunity to present data on racial inequality and Black achievements in my homeland, Brazil.<br><br>
Brazil's approach to racial declaration diverges from the US in two major points: Race is self-declared, and Afro-Brazilians are divided into "pretos" and "pardos". I aggregated these two groups into one in this work.
</div>
<img src='www/portrait_starks.jpg' class='portrait'>
</div>
</div>
</div>
<div id='bar'>
<hr/>
<div></div>
<img src="www/africa.png"/>
</div>
</div>
<!-- Main content section -->
<div id='main-content'>
<div id='instructions'>
<div id='menu-instructions'>
<strong>CLICK</strong> ON ONE OF THE <strong>CIRCLES</strong> IN THE MENU BELOW TO DISPLAY A CHALLENGE EXHIBIT.
<strong>NAVIGATE</strong> USING THE <strong>BUTTONS</strong>.
</div>
<div id='comparative-instructions'>
THE DUBOIS ORIGINAL (LEFT) AND<br>
THE NEW PLOT (RIGHT) ARE GOING<br>
TO BE SHOWN IN THE DISPLAY BELOW.<br>
<strong>CLICK</strong> OR <strong>DRAG</strong> THE <strong>SLIDER</strong> TO REVEAL SECTIONS OF EACH PLOT.
</div>
</div>
<!-- Menu section -->
<div id='menu-section'>
<div id='menu-items'>
<div class='menu-button navup navdisable'>▴</div>
<div id='gallery'></div>
<div class='menu-button navdown'>▾</div>
</div>
</div>
<!-- Comparative section -->
<div id='comparative-section'>
<div id='comparative-display'>
<div class='img background-img'></div>
<div class='img foreground-img'></div>
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
<div id='slider-button'></div>
</div>
</div>
</div>
<!-- Details section -->
<div id='details-section'>
<div id='original-title'><strong>ORIGINAL TITLE: </strong><span>THE GEORGIA NEGRO</span></div>
<div id='new-title'><strong>NEW TITLE: </strong><span>THE AFRO-BRAZILIANS</span></div>
<div id='packages'><strong>R PACKAGES USED:</strong>
<div>
<button class="btn">dplyr</button>
<button class="btn">geomtextpath</button>
<button class="btn">ggbump</button>
<button class="btn">ggfx</button>
<button class="btn">ggplot2</button>
<button class="btn">ggtext</button>
<button class="btn">readxl</button>
<button class="btn">rmapshaper</button>
<button class="btn">rnaturalearth</button>
<button class="btn">scales</button>
<button class="btn">sf</button>
<button class="btn">showtext</button>
<button class="btn">sysfonts</button>
<button class="btn">tidyr</button>
</div>
</div>
<div id='downloads'><strong>DOWNLOADS:</strong>
<div>
<span><a id='down-data' class='down-icon' href='https://github.com/IcaroBernardes/webdubois/raw/main/2022/week01/data.xlsx' target='_blank'></a>DATASET</span>
<span><a id='down-original' class='down-icon' href='https://raw.githubusercontent.com/IcaroBernardes/webdubois/main/originals/y22wk01.png' download='original_y2022wk01.png' target='_blank'></a>ORIGINAL PLOT</span>
<span><a id='down-new' class='down-icon' href='https://raw.githubusercontent.com/IcaroBernardes/webdubois/main/2022/week01/enslaved.png' download='new_y2022wk01.png' target='_blank'></a>NEW PLOT</span>
</div>
</div>
</div>
<!-- Connects to a bundle of Bootstrap and Popper through cdnjs -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</div></body>
</html>