-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (84 loc) · 2.76 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
<html>
<head>
<title>Wikipedia Codex</title>
<link rel='stylesheet' href='codex.css'/>
<meta name="viewport" content="width=device-width, initial-scale=0.5">
</head>
<body>
<div class='main-header'>
<b>
WikipediaCodex
v0.0.2 (⛏prototype)
</b><br/>
Pure client-side knowledge graph visualizer.
<div class='menubuttons'>
<a class='gh' href='https://github.com/keroserene/wikicodex' target='_blank'>
<img src='img/github64.png' style='width: 60%; margin-top: 1rem;'/>
</a>
<a class='helptoggle' href='#' onclick='toggleHelp()'>?</a>
</div>
</div>
<div class='helptext'>
<h2>Help & Info</h2>
<p>
This is a knowledge-graph traversal interface which operates on the current, live Wikipedia.
</p>
<b>Click or tap on a node to examine it.</b>
<hr/>
<p>
<h4>Keyboard Shortcuts</h4>
<code>
SPACE / N - Enumerate Adjacent Nodes.<br/>
ESC - Minimize Current Node.<br/>
ENTER / O - Open Full Wikipedia page.<br/>
? / H - Toggle this help pane.
</code>
</p>
<hr/>
<h4>Interactions / Graph Traversal</h4>
<p>
Examining a node
open a summary with the current text excerpt (plus primary image, if
available.)
Then, if you click on the main button below "Enumerate Adjacent Nodes",
the codex will load all relevant adjacent nodes for
that Wikipedia article.
This reveals links and backlinks as additional nodes and edges on the graph,
which you may also explore.
</p><p>
If the node has not been interacted with for a while, it gradually fades into
the background, and out of existence (as far as this interface is concerned)
to conserve memory and preserve performance.
However, any node is easily retrieved, as long as Wikipedia is up.
</p>
<hr/>
<h4>Misc. Notes</h4>
<p>
This is a very simple light-weight client which does nothing but interact with the
Wikipedia API and render some nodes and edges with basic js and css shenanigans,
so there is no preserved state. (As of now.)
</p>
<p>
You may need to zoom out a bit for better scaling of the interface, depending
on your device.
</p><p>
Works better on larger screens, though still workable on mobile.
More features may be included soon to refine the navigation and interactions.
</p>
<hr/>
<p>
This experiment was thrown together in a day by
<a href='//serene.cx' target='_blank'>S E R E N E (serene.cx)</a>.
She hopes this tool might enhance your wikipedia tab-explosion explorations.
<br/><br/>Have fun. ♥
</p>
</div>
<div class='main'>
<div class='intro-text'>Select Seed Node</div>
<a class="level1 hidden" href="#" onclick="generateNeighbors()">⎈</a>
</div>
<svg class="edges" id="edges" version="1.1"></svg>
</body>
<script src='lib/jquery.js'></script>
<script src='codex.js'></script>
</html>