-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
65 lines (58 loc) · 3.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="networks.css">
</head>
<body>
<div id="heading"><h1>Roman à clef and Communication Networks in the 1920-30s British Literary Field</h1></div>
<div id="principal">
Choose a graph:
<input type="button" class="btn" value="communication map" id="com"/>
<input type="button" class="btn" value="who is who" id="wiw"/>
<div id="text">
<h4> Literary communication in Great Britain of the 1920-30s </h4>
Nodes size reflects the number of connections, which this or that person have (influence index). Arrows mirror the directionality of relationships: who and of whom wrote a novel/ a review/ a study etc.
<br />
<br />
Click on node to look into all the relations of the concrete person.
</div>
<div id="text1">
<h4> Who is who in modernist romans à clefs? </h4>
This graph represents correspondences between the participants of literary field and the characters of the selected romans à clefs. Who was the source/ inspiration for this or that personage? And at the same time under the guise of what personnages this or that writer, artist, critic, editor is represented? There are two types of nodes representing characters and actors of literary field; edges are colored according to the novel, which they represent.
<br />
<br />
Guide the cursor on nodes in order to see the name of the person/character.
</div>
<div id="legend">
Choose the relations:
<div class="input-group" id="filters">
<input type="radio" name="filter" value="all" id="chk1" checked="checked"><label for="chk1"> <span class="buttons">All</span></label>
<input type="radio" name="filter" value="personal" id="chk2"><label for="chk2"><span class="buttons"> Personal</span></label>
<input type="radio" name="filter" value="correspondance" id="chk3"> <label for="chk3"><span class="buttons">Correspondence</span></label>
<input type="radio" name="filter" value="review" id="chk4"> <label for="chk4"><span class="buttons">Review</span></label>
<input type="radio" name="filter" value="publishing" id="chk5"><label for="chk5"> <span class="buttons">Editing/Publishing</span> </label>
<input type="radio" name="filter" value="study" id="chk6"> <label for="chk6"> <span class="buttons"> Study</span></label>
<input type="radio" name="filter" value="rac" id="chk7"><label for="chk7"><span class="buttons"> Roman à clef</span></label>
</div>
<div id="names">
<input type="checkbox" name="names" id="namesId" /><label for="namesId"><span id="namesSpan">Show names </span></label>
</div>
</div>
<div id="legend1">
<ul class="legend_list">
<li><span class="actors" id="people"></span> Persons</li> <br />
<li><span class="actors" id="personnages"></span> Characters</li><br />
<li><span class="novels" id="woolf"></span> <i>Orlando</i></li><br />
<li><span class="novels" id="huxley"></span><i>Point Counter Point</i> </li><br />
<li><span class="novels" id="maugham"></span> <i>Cakes and Ale</i></li><br />
<li><span class="novels" id="sitwell"></span> <i>Triple Fugue</i></li><br />
<li><span class="novels" id="lawrence"></span> <i>Women in Love</i></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="networks.js"></script>
</body>
</html>