-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
211 lines (208 loc) · 8.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/news-story-viz/index.css" />
<title id="page-title">News Viz</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/pdfkit.standalone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/source.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="module" src="/news-story-viz/index.js"></script>
<div id="about-container">
<div id="about">
<button id="about-close">Close</button>
<h1>News Viz</h1>
<hr />
<p>
Project developed for my master's dissertation, Narrative
Visualization of News Stories. The main goal behind the developement
of this tool was to explore ways in which news stories can be analysed
while taking into consideration elements typically associated with
other types of narratives (such as films or books), such as
characters, scenes, and locations. Simon Elvery's d3-layout-narrative
served as the foundation of this project. The source-code is on
Github. Licensed under the MIT License.
</p>
</div>
</div>
<div class="tooltip">
<p class="tooltip-date"></p>
<p class="tooltip-text"></p>
</div>
<div class="hide-sidebar-div">
<button id="hide-sidebar-button">Esconder barra lateral</button>
</div>
<div class="download-pdf-div">
<button id="button-download-storyline">Download PDF</button>
</div>
<div class="about-button-div">
<button id="about-button">Sobre</button>
</div>
<div class="flex layout">
<div id="viz-and-info" class="flex column">
<h2 id="viz-title">Capitol Riot</h2>
<div
id="visualization"
class="visualization"
style="overflow-x: scroll; scroll-behavior: smooth"
>
<div id="timeline-div"></div>
</div>
<div id="scene-info-container">
<h2 id="event-title">Selecione um evento</h2>
<small id="event-date"></small>
<small id="event-location"></small>
<div class="event-navigation" id="event-scroll">
<button id="previous-button">Evento anterior</button>
<button id="focus-button">Remover foco</button>
<button id="next-button">Próximo evento</button>
</div>
<p id="event-info">
Clique num evento ou no botão `Próximo evento` para consultar mais
informação sobre um evento em particular
</p>
</div>
</div>
<div id="options-container">
<div class="options">
<h1>News Viz</h1>
<div id="storyline-picker">
<label class="storyline-picker-label">Escolha uma história</label>
<select
name="storyline-picker-select"
id="storyline-picker-select"
></select>
</div>
<button class="block character-button" id="button-reset-storyline">
Reiniciar história
</button>
<hr />
<h2>
<span style="background-color: yellow; color: #404040"
>Entidades</span
>
</h2>
<div>
<div class="characters" id="characters"></div>
<hr />
<div>
<input type="checkbox" id="checkbox-hide-chars" />
<label for="checkbox-hide-chars"
>Esconder entidades que não estão selecionadas</label
>
</div>
<div>
<input type="checkbox" id="checkbox-include-selected" />
<label for="checkbox-include-selected"
>Incluir entidades mesmo que estas não participem na cena
atualmente em foco</label
>
</div>
<button class="block character-button" id="button-reset-chars">
Reiniciar seleção de entidades
</button>
<button class="block character-button" id="button-update-storyline">
Atualizar história de forma a incluir apenas as entidades
selecionadas
</button>
<button
class="block character-button"
id="button-select-event-chars"
>
Selecionar as entidades na cena atualmente em foco (se existir)
</button>
</div>
<div>
<div>
<h2>
<span style="background-color: yellow; color: #404040"
>Tempo</span
>
</h2>
<div class="timeline-select">
<div>
<label class="timeline-label" for="timeline-select-start"
>Data de início</label
>
<input id="timeline-select-start" type="datetime-local" />
</div>
<div>
<label class="timeline-label" for="timeline-select-end"
>Data de fim</label
>
<input id="timeline-select-end" type="datetime-local" />
</div>
</div>
<hr />
<div>
<input type="checkbox" id="timeline-hide-scenes" />
<label for="timeline-hide-scenes"
>Esconder eventos fora do intervalo temporal selecionado
</label>
</div>
<div>
<input type="checkbox" id="checkbox-space-out-events" />
<label for="checkbox-space-out-events"
>Espaçar os eventos proporcionalmente de acordo com a sua data
</label>
</div>
<div>
<input type="checkbox" id="checkbox-show-dates" />
<label for="checkbox-show-dates"
>Mostrar datas em vez de títulos da barra superior
</label>
</div>
<button class="block option-button" id="timeline-update">
Atualizar história de forma a incluir apenas os eventos dentro
do intervalo temporal selecionado
</button>
<button class="block option-button" id="timeline-reset">
Reiniciar intervalo temporal selecionado
</button>
</div>
</div>
<div>
<h2>
<span style="background-color: yellow; color: #404040"
>Eventos</span
>
</h2>
<div>
<div class="events" id="events"></div>
<hr />
<div>
<input type="checkbox" id="checkbox-hide-events" />
<label for="checkbox-hide-events"
>Esconder eventos que não incluam as entidades selecionadas
</label>
</div>
<div>
<input type="checkbox" id="checkbox-hide-unselected-events" />
<label for="checkbox-hide-unselected-events"
>Esconder eventos que não estão selecionados
</label>
</div>
<button
class="block character-button"
id="button-update-storyline-scenes"
>
Atualizar história de forma a incluir apenas os eventos
selecionados
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>