-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (327 loc) · 15.1 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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://d3js.org/d3.v7.min.js"></script>
<link rel="icon" href="/fav.ico" type="image/x-icon">
<link rel="shortcut icon" href="/fav.ico" type="image/x-icon">
<link rel="stylesheet" href="https://use.typekit.net/cig3amv.css" />
<script src="/assets/scripts/script.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>Where numbers meet empathy</title>
</head>
<body>
<div class="hover-text"></div>
<div class="home__header">
<div class="nav">
<a data-modal="glossary" class="button-with-brackets">methodology</a>
<a data-modal="love" style="font-style: normal;" class="button-with-brackets">♥</a>
</div>
<div class="container container--default">
<h1>
<div class="site-title home__site-title light hover-effect">
<span>Where numbers </span>
</div>
<div class="site-title home__site-title">
<span>meet </span>
<span class="title-desc"
>A collection of data-driven projects showcasing
<span class="tag">techniques</span> designed to create emotional
impact</span
>
<span class="italic" id="empathy">empathy</span>
</div>
</h1>
</div>
<div clas="grid"></div>
</div>
<div class="grid">
<div id="techniques-sensations" class="filter-list">
<h3>Address Sensations</h3>
<ul></ul>
</div>
<div id="techniques-narrative" class="filter-list">
<h3>shape narrative</h3>
<ul></ul>
</div>
<div id="techniques-behaviour" class="filter-list">
<h3>influence behaviour</h3>
<ul></ul>
</div>
<div id="techniques-context" class="filter-list">
<h3>change Context</h3>
<ul></ul>
</div>
</div>
<div class="cards" id="project-gallery"></div>
<div class="gradient-div"></div>
<footer id="contact">
<div class="home__header">
<div class="container container--default">
<h1>
<div class="site-title home__site-title light hover-effect">
<span>Any projects or</span>
</div>
<div class="site-title home__site-title">
<span>ideas</span>
<span class="title-desc flexCenter" style="width: 270px"
>Let’s expand this collection together. Feel free to get in
touch at
<a class="link" href="mailto:anastasiia.balagurova@gmail.com"
>anastasiia.balagurova@gmail.com</a
>
</span>
<span>in mind?</span>
</div>
</h1>
</div>
<div clas="grid"></div>
</div>
</footer>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close-button">
<span class="material-symbols-outlined close-icon">close</span>
</span>
<div class="modal-body">
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('modal');
const closeButton = document.querySelector('.close-button');
const modalBody = modal.querySelector('.modal-body');
// Create the cursor dot
const cursorDot = document.createElement('div');
cursorDot.classList.add('cursor-dot');
document.body.appendChild(cursorDot);
// Handle cursor behavior for "empathy"
const empathyElement = document.getElementById('empathy');
// Content for different modal triggers
const modalContent = {
love: `
<h2>Hi!</h2>
<p class='lead'>
My name is Anastasia, and this project is part of my master's thesis, 'Visualising People in Humanitarian Crises: Where Numbers Meet Empathy,' at Aalto University in Helsinki, Finland. As part of this thesis, I am collecting data-driven projects and examining techniques that bridge data with the human experiences behind the numbers.</p>
<p class='lead'>If you have a project in mind, I would love to hear about it so we can expand this collection together and share ideas that inspire us, as data visualization practitioners, to create more human-centered projects.</p>
<p class='lead'>
This topic is close to my heart and connected to my practice, and I would be grateful for any feedback or conversations on it. Feel free to drop me a line via email <a class='link' href='mailto:anastasia.balagurova@gmail.com'>anastasia.balagurova@gmail.com</a>.</p>
`,
glossary: `
<h2>Methodo­logy</h2>
<p class='lead'>
Affective data visualisation encompasses various techniques and approaches which can be categorised in different ways. In this project I'm using four categoeies suggested by Lan et al. (2023): sensations, narrative, behavior, context.</p>
<p class='lead'>
Affective techniques, or methods that bring out the human side of data and highlight the experiences behind the numbers, are being gathered through theoretical review and case study analysis. This project presents a curated collection of projects resulting from this process.</p>
<p class='lead'>
Below is a list of affective techniques that can be used to make data visualization more empathetic. These techniques suggest possible approaches but do not necessarily guarantee the desired outcome, as their effectiveness depends on context and implementation.</p>
<h3>address sensations</h3>
<p style='padding-bottom: 16px;'>
This strategy targets different human senses (sight, hearing, touch etc.)
</p>
<div class='dictionaryItem'>
<p><span class='tag'>Handcrafted Style</span></p>
<p>Emphasizes a personal touch to data by using a handcrafted Handcrafted style, like hand-drawn sketches and textures or handwritten typography.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>True-Life Imagery</span></p>
<p> Uses realistic visuals like photography or illustrations to foster a connection to the context of the data.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Data with a Human Face</span></p>
<p>Uses portraits of people behind the data to emphasize human impact and connect the numbers to real individuals and their stories.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Visual metaphor</span></p>
<p>Represents data with symbolic visuals to convey it in an emotionally resonant way, using imagery that link cultural, contextual, or thematic elements to data.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Organic shape</span></p>
<p>Uses natural, flowing forms to highlight the human side in data, making rigid datasets feel more relatable.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>color</span></p>
<p>Utilizes colors to evoke specific emotional responses.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>sound meraphor</span></p>
<p>Adds sounds that connect symbolically to the data’s context and evoke an emotional response.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>sound</span></p>
<p>Utilizes sounds and its property (rythm, volume, tone etc.) to evoke specific emotional responses.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>human voice</span></p>
<p>Incorporates spoken words or voiceovers for a personal touch.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>tangible material</span></p>
<p>Uses textures and materiality of physical objects to create a sensory connection.</p>
</div>
<h3>shape narrative</h3>
<p style='padding-bottom: 16px;'>
This strategy utilises storytelling to evoke affective response.
</p>
<div class='dictionaryItem'>
<p><span class='tag'>one element, one lifee</span></p>
<p>Highlights individual elements to represent unique data points, such as using one dot to symbolize one life.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>data with a name</span></p>
<p>Gives names or other personal information behind each data point, making them feel more personal and relatable.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Real-Life Story in Focus</span></p>
<p>Centers the narrative on personal, relatable experiences.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Human-Centric Language</span></p>
<p>Employs accessible, empathetic language.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Gradual Revealr</span></p>
<p>Builds suspense or interest by unveiling information step-by-step, often using techniques like scrolling, sliding, or animations.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Quoting people people</span></p>
<p>Uses direct quotes of people behind the data to add authenticity and voice.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Changing the flow</span></p>
<p>Adjusts pacing of narrative to manipulate the flow of information.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Changing the flow</span></p>
<p>adjusts the pacing and sequence of information (Changing the flow or slowing down) to address specific emotions such as excitement, anticipation, calmness, or reflection.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Breaking the Fourth Wall:</span></p>
<p>Directly engages the audience for immediacy.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Breaking the Fourth Wall:</span></p>
<p>Directly engages the audience to create a sense of personal involvement</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Statistical Framing</span></p>
<p>Presents data within a relatable context to make it more accessible, such as converting large numbers into smaller units (e.g., per second or per person), helping audiences grasp the scale more tangibly.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Incorporating the Audience</span></p>
<p>Actively involves viewers in the narrative by asking questions and adapting data visualizations based on their responses.</p>
</div>
<h3>influence behaviour</h3>
<p style='padding-bottom: 16px;'>
This strategy aims at influencing human actions.
</p>
<div class='dictionaryItem'>
<p><span class='tag'>manipulate</span></p>
<p>Allows viewers to interact with the data by manipulating or operating the visualisation.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>play</span></p>
<p>Leverages gamification to connect viewers with data by integrating interactive elements.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>walk</span></p>
<p>Guides viewers through a process or environment to explore data.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>participate</span></p>
<p>Encourages active involvement from users by creating engaging experiences such as data-driven events, exhibitions, or participatory activities.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>create</span></p>
<p>Enable viewers to create or build their own visualisations from the data.</p>
</div>
<h3>change context</h3>
<p style='padding-bottom: 16px;'>
This strategy explores how surroundings could influence the experience of data visualisation.
</p>
<div class='dictionaryItem'>
<p><span class='tag'>3D</span></p>
<p>Incorporates three-dimensional elements or environment to add realistic context or address the complexity of data.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>VR/IR</span></p>
<p>Uses Virtual Reality (VR) and Immersive Reality (IR) to create immersive environments where users explore data in lifelike settings, connecting emotionally by simulating real-world contexts.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Physical World</span></p>
<p>Bridges the gap between digital data and tangible reality.</p>
</div>
<div class='dictionaryItem'>
<p><span class='tag'>Situated place</span></p>
<p>Places data in a specific, meaningful and relatable context or location.</p>
</div>
`,
};
// Function to open the modal
function openModal(contentKey) {
modal.style.display = 'block';
modalBody.innerHTML = modalContent[contentKey] || '<p>Content not found.</p>';
cursorDot.classList.remove('blurred'); // Remove blurred class when modal is open
}
// Function to close the modal
function closeModal() {
modal.style.display = 'none';
modalBody.innerHTML = ''; // Clear content
}
// Cursor dot movement and logic
document.addEventListener('mousemove', (e) => {
cursorDot.style.left = `${e.clientX}px`;
cursorDot.style.top = `${e.clientY}px`;
// Handle "blurred" class logic only if the modal is not open
if (modal.style.display !== 'block') {
const rect = empathyElement.getBoundingClientRect();
const isInside =
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom;
if (isInside) {
cursorDot.classList.add('blurred');
empathyElement.classList.add('highlight');
} else {
cursorDot.classList.remove('blurred');
empathyElement.classList.remove('highlight');
}
cursorDot.style.zIndex = '0';
} else {
// Ensure "blurred" class is removed when the modal is open
cursorDot.classList.remove('blurred');
cursorDot.style.zIndex = '1001';
}
});
// Event listeners for modal buttons
document.querySelectorAll('[data-modal]').forEach((link) => {
link.addEventListener('click', (event) => {
event.preventDefault();
const contentKey = link.getAttribute('data-modal'); // Get the modal content key
openModal(contentKey);
});
});
// Event listener for the close button
closeButton.addEventListener('click', closeModal);
// Close modal when clicking outside of it
window.addEventListener('click', (event) => {
if (event.target === modal) {
closeModal();
}
});
});
</script>
</script>
<script src="script.js"></script>
</body>
</html>