-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (61 loc) · 2.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Secret Sauce Of TED Talks</title>
<link rel="stylesheet" href="assets/style/main.css">
<link rel="stylesheet" href="https://use.typekit.net/ahi3pbr.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-oi8o31xSQq8S0RpBcb4FaLB8LJi9AT8oIdmS1QldR8Ui7KUQjNAnDlJjp55Ba8FG" crossorigin="anonymous">
<link rel="shortcut icon" href="favicon.png" type="image/png" />
</head>
<body>
<header class="header">
<div class="header-container">
<img src="assets/images/logo/logo_1.svg" alt="Logo" class="logo">
<div class="selectable-sentence">
<p>I want to hold a talk about</p>
<div class="select-style">
<select name="category" id="select-category" onchange="onChangeCategory()">
<option value="-1">Whatever</option>
</select>
</div>
<p>which should be</p>
<div class="select-style">
<select name="sentiment" id="select-rating" onchange="onChangeRating()">
<option value="-1">Whatever</option>
</select>
</div>
</p>
</div>
<a class="header-link" href="https://github.com/yannickpulver/ivis-ted-visualization" target="_blank">Docs</a>
</div>
</header>
<section class="card">
<div class="left">
<p><span class="tag tag-red">TED Talks</span>, visualised as drops of sauce by their <span class="tag">view count</span>
(relatively to shown data).</p>
<p>Saturated by <span class="tag" id="bubbles-sortby">view count</span></p>
<div id="canvas-bubbles" class="canvas"></div>
</div>
<div class="right">
<p>According to the people, talks about <span id="selected-category-label" class="tag">Whatever</span> are
rather <span id="selected-category-rating" class="tag">...</span></p>
<div id="canvas-lines" class="canvas canvas-lines"></div>
<br>
<p>The most viewed talk in this category is <span class="tag" id="selected-category-mostviewed">Do schools kill creativity?</span>.
The talk started <span class="tag" id="selected-category-sentiment">positive</span></p>
<div class="container-sentiment">
<div class="scale">
<i class="fal fa-smile"></i>
<i class="fal fa-meh"></i>
<i class="fal fa-frown"></i>
</div>
<div id="canvas-sentiment" class="canvas"></div>
</div>
</div>
</section>
<script src="assets/js/vendor/d3.v4.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>