-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (91 loc) · 3.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TigerCat! MIA Graph</title>
<link rel="stylesheet" href="mia-graph.css"/>
<link rel="shortcut icon" href="img/tigercat.ico" type="image/x-icon">
<script>
// Sniff MSIE version
// http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
var ie = ( function() {
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML='<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',all[0]
);
return v > 4 ? v : undef;
}() );
function takeAction() {
if( ie && ie < 9 ) {
D3notok();
} else {
// Load D3.js, and once loaded do our stuff
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "d3.min.js";
script.addEventListener('load', D3ok, false);
script.onload = "D3ok();";
head.appendChild(script);
}
}
</script>
</head>
<body onload="takeAction();">
<div id="nocontent">
<h1>Sadly your browser is not compatible with this site</h1>
<div>You can use <a href="http://www.google.com/chrome/">Google
Chrome</a>, <a href="http://www.mozilla.org/firefox">Mozilla Firefox</a>
or <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Microsoft
Internet Explorer (v9 or above)</a> to access the PopCha Movie
Network</div>
</div>
<div id="knowledgeGraph"></div>
<div id="sidepanel">
<div id="title">
<img src="img/tigercat-100.png"/><br/>Knowledge Graph<br/>
<!-- <a href="javascript:void(0);"
onClick="zoomCall(0.5);" style="pointer-events: all;">+</a>
<a href="javascript:void(0);"
onClick="zoomCall(-0.5);" style="pointer-events: all;">-</a> -->
<img id="helpIcon"
src="img/help-question-48.png" title="Click for help"
onClick="toggleDiv('help');"/>
</div>
<div id="help" class="panel_off">
<img src="img/close.png" style="float: right;"
onClick="toggleDiv('help');"/>
This is a subset of the knowledge network produced from data in the
MIA200m. Tags relate to each other <em>as they get picked by Tiger Cat! </em>
<ul>
<li>Hover over a node to see the tag title , and to highlight
the tags related to it.</li>
<li>Click on a node to show tag details. It will open up a
side panel.</li>
<li>On the tag details panel, you can click on the <em>target</em>
icon to center the graph on that tag. And clicking on the link to
a related tag will move to that tag (in the graph and in the
panel)</li>
<li>You can use you usual browser controls to zoom and pan
over the graph. If you zoom in when centred on a tag, the
graph will expand around it.</li>
<li>Above a certain zoom level, tag titles are automatically
displayed for all the nodes.</li>
</ul>
<!-- For additional information, check the <strong><a href="" onClick="return toggleDiv('faq');">FAQ</a></strong>. -->
</div>
<div id="movieInfo" class="panel_off"></div>
</div>
<div id="faq" class="panel_off">
<div id="close_faq">
<img src="img/close.png" onClick="toggleDiv('faq');"/>
</div>
<dt>Where does this come from?</dt>
<dt>Ok, but <em>how</em> was the graph actually computed?</dt>
</div>
<script src="mia-graph.js"></script>
</body>
</html>