-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
100 lines (95 loc) · 5.12 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>
<meta charset="utf-8">
<title>Syntactic Tree Viewer</title>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="parser.js"></script>
<script src="d3Tree.js"></script>
<script type="text/javascript">
var defaultPTBText = "(S (NP-SBJ (NP (NNP Pierre) (NNP Vinken) ) (, ,) (ADJP (NP (CD 61) (NNS years) ) (JJ old) ) (, ,) ) (VP (MD will) (VP (VB join) (NP (DT the) (NN board) ) (PP-CLR (IN as) (NP (DT a) (JJ nonexecutive) (NN director) )) (NP-TMP (NNP Nov.) (CD 29) ))) (. .) )";
var defaultCCGText = "(<T S[dcl] 0 2> (<T S[dcl] 1 2> (<T NP 0 2> (<T NP 0 2> (<T NP 0 2> (<T NP 0 1> (<T N 1 2> (<L N/N NNP NNP Pierre N_73/N_73>) (<L N NNP NNP Vinken N>) ) ) (<L , , , , ,>) ) (<T NP\\NP 0 1> (<T S[adj]\\NP 1 2> (<T NP 0 1> (<T N 1 2> (<L N/N CD CD 61 N_93/N_93>) (<L N NNS NNS years N>) ) ) (<L (S[adj]\\NP)\\NP JJ JJ old (S[adj]\\NP_83)\\NP_84>) ) ) ) (<L , , , , ,>) ) (<T S[dcl]\\NP 0 2> (<L (S[dcl]\\NP)/(S[b]\\NP) MD MD will (S[dcl]\\NP_10)/(S[b]_11\\NP_10:B)_11>) (<T S[b]\\NP 0 2> (<T S[b]\\NP 0 2> (<T (S[b]\\NP)/PP 0 2> (<L ((S[b]\\NP)/PP)/NP VB VB join ((S[b]\\NP_20)/PP_21)/NP_22>) (<T NP 1 2> (<L NP[nb]/N DT DT the NP[nb]_29/N_29>) (<L N NN NN board N>) ) ) (<T PP 0 2> (<L PP/NP IN IN as PP/NP_34>) (<T NP 1 2> (<L NP[nb]/N DT DT a NP[nb]_48/N_48>) (<T N 1 2> (<L N/N JJ JJ nonexecutive N_43/N_43>) (<L N NN NN director N>) ) ) ) ) (<T (S\\NP)\\(S\\NP) 0 2> (<L ((S\\NP)\\(S\\NP))/N[num] NNP NNP Nov. ((S_61\\NP_56)_61\\(S_61\\NP_56)_61)/N[num]_62>) (<L N[num] CD (null) 29 N[num]>) ) ) ) ) (<L . . . . .>) )";
function onSub() {
var textArea = document.getElementById("text");
// Reset the colour
textArea.style.color = "black";
var data = textArea.value;
// Escape backslashes
data = data.replace(/\\/g, "\\\\");
// Parse the string into JSON (defined in parser.js)
var jsonData = parse(data);
var sentenceString = "";
sentenceString = getYield(jsonData, sentenceString);
// Add the sentence (yield of the JSON tree) to the sentence container
document.getElementById("sentence-container").innerHTML = "<p>"+sentenceString+"</p>";
d3Tree(jsonData);
return false;
}
function getYield(node, string){
if (node.children == null) string = string.concat(node.name, " ");
else {
for (var i in node.children) {
var child = node.children[i];
string = getYield(child, string);
}
}
return string;
}
function loadTextArea(type) {
var textArea = document.getElementById("text");
textArea.style.color = "black";
if (type == "PTB") textArea.value = defaultPTBText;
else if (type == "CCG") textArea.value = defaultCCGText;
}
window.onload = function() {
var textArea = document.getElementById("text");
textArea.onfocus = function() {
textArea.style.color = "black";
if (textArea.value == "Enter your tree here...")
textArea.value = "";
};
textArea.onblur = function() {
if (textArea.value == "") {
textArea.style.color = "grey";
textArea.value = "Enter your tree here...";
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="tree-viewer.css">
<!-- General stylesheet -->
<link rel="stylesheet" media="all" href="../style.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="../mobile.style.css" />
<body>
<div class="wrapper">
<a href="" onclick="window.history.back()">[back]</a>
<div id="info">
<h3>Syntactic Tree Viewer</h3>
This is a <a href="http://d3js.org/">d3.js</a>-based tree viewer that allows you to expand and collapse tree nodes and pan/zoom to different areas of the tree.
Input the bracketed tree that you want to view in the box above and press "View Tree". The viewer has been designed to work with <a href="#" onclick="loadTextArea('PTB');">Penn Treebank (.mrg)</a> and <a href="#" onclick="loadTextArea('CCG');">CCGbank (.auto)</a> style trees. <br/>(Click on the links to try an example)
</div>
<div style="text-align: center;">
<div id="tree-container"></div>
<div id="sentence-container"></div>
<div id="input-text">
<!--Initialise the default text with grey -->
<textarea id="text" rows="5" style="color: grey;">Enter your tree here...</textarea>
</div>
<div id="input-submit">
<input type="submit" id="submit-button" value="View Tree" onclick="return onSub();" />
</div>
</div>
<!-- Fork me on GitHub button -->
<a href="https://github.com/christos-c/tree-viewer">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
</a>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45185696-1', 'christos-c.com');
ga('send', 'pageview');
</script>
</body>
</html>