-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
67 lines (56 loc) · 4.89 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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script> <!--d3.v6 으로 변경-->
<script src="graph.js"></script> <!-- graph.js 파일 불러옴-->
<script src="effect.js"></script>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
</head>
<body>
<nav>
<label class="title">I-E-I : Information of "The Ethics of Information"</label>
<label class="subtitle">_A Data visualisation for understanding and knowledge</label>
<label class="developer">A project by Darae Jang, Minsik Choi</label>
</nav>
<div class="scroll-down-arrow">
↓
</div>
<svg></svg> <!--d3 그래프가 그려질 곳-->
<div class="eng-content">
<div class="eng-1"><strong>1. How the nodes are connected?</strong><br/></div>
<div class ="eng-content1"> How can we explain that two words are related to each other? For an explanation about a word which has a connection with another word, we need a specific standard. So in this project, we have divided every sentences in the book which is “The Ethics of Information” by a specific interval for recognition of word association. This specific interval is called, ‘window’.
<br/><br/>
I love cats.<br/>
Cats are the most adorable creatures in the world.<br/>
But cats mostly don't like me.<br/>
<br/>
Here are three example sentences. First, it is divided into three sentences according to the period(.). When we consider that there are three windows, in the first sentence, which is “I love cats” has three words is related each other. The second sentence is divided into three words. For instance, cat is the / is the most / the most adorable / most adorable creatures e.t.c. As a result, three words in a row in this way are considered to be related to each other.
<br/></br/></div>
<div class="eng-2"><strong>2. What does the size of nodes mean?</strong><br/></div>
<div class ="eng-content2"> So, are all the words connected with each other eventually? Yes, right. However, it may be different because of the number of times ‘love’ and ‘cats’ are connected, and the number of times ‘love’ and ‘I’ are connected. Therefore, we used a specific process which is ‘textrank’ to calculate the importance and degree of connection for each word using the number of times. The word which appears the most will be the most important and the two words will be more connected if the frequency of occurrence of two specific words together is high. When managing words, the frequency of their appearance is important. Therefore, the more it appears, the larger the node size, and vice versa. Also, the 100 words selected in the graph were also selected from 100 words with high importance according to their frequency of appearance.
<br/><br/></div>
<div class="eng-3"><strong>3. What does the color and position of the node mean?</strong><br/></div>
<div class ="eng-content3"> Now we have found a word which is used for nodes, a line for connecting each node, and the size of the nodes. We drew enough graphs with these materials, but we wanted more effective and useful visual information. So we decided to add colour to make the graph more understandable. At this point, the colour tells which community the word belongs to. In this project, we used Louvain algorithms to print out which word were more 'close' to other word and as a result we divided the words into several communities. In addition, the classification by this community placed each word closer to the center of the mindmap, which corresponds to the important word in the text book. For this work, we used the textrank score.
<br/><br/></div>
<div class="eng-4"><strong>4. When you click a node...</strong><br/></div>
<div class ="eng-content4"> When we look at the words written on the node at a glance, We don't know in what context and for what reason this word was used. To help with this difficulty, when clicking on a node, a modal window will appear with a few lines of text. This selects the sentence in which the word appears first and shows the sentences before and after.
Of course, people may not know enough information about words simply by checking that part, but at least we think it will be a help to know " The Ethics of Information ".
</div>
</div>
<footer>
<img class="footer__image logo-pillowsophy" src="png/logo.png" alt="pillowsophy logo">
</footer>
<!-- modal -->
<div id="myModal" class="background">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<p id="header-text"></p>
</div>
<div class="modal-body" id = "body-text"></div>
</div>
</div>
</body>