-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscatterplot.html
61 lines (61 loc) · 2.12 KB
/
scatterplot.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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualisation 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body id='viz3'>
<h2 id="viz1-heading-outside" style="padding-top: 1rem">
Cultural Background: Your Disposition
</h2>
<div class="viz-descr">
<span>
This visualisation focuses on how the speaker's disposition and speech is perceived by the public.
Explore different ratings and learn about how each one drives the number of views. Zoom into the ratings,
hover over talks, click to watch, and uncover why talks evoking strong positive emotions are popular!
</span>
</div>
<div id="scatterplot"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="selectors-viz3" style="transform: translateY(70%);">
<select id="attribute-selector-rating">Funny</select>
</div>
<div id="viz3-svg">
</div>
<div id="lineOfBestFitContainer" style="padding: 20px">
<input type="checkbox" id="lineOfBestFitCheckbox">
<label for="lineOfBestFitCheckbox" style="color: white">Show Line of Best Fit</label>
</div>
<script src="scatterplot.js"></script>
<script>
document.addEventListener('keyup', function(event) {
if (event.key === 'ArrowLeft') {
window.location.href = 'birthplaces.html';
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
window.location.href = 'conclusion.html';
}
});
</script>
<div class="arrow-container">
<a href="birthplaces.html" class="arrow-link" style="left: 10px;">
←
</a>
<a href="conclusion.html" class="arrow-link" style="right: 10px;">
→
</a>
</div>
<div class="arrow-container">
<a href="birthplaces.html" class="arrow-link" style="left: 10px;">
←
</a>
<a href="conclusion.html" class="arrow-link" style="right: 10px;">
→
</a>
</div>
</body>
</html>