-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
219 lines (162 loc) · 7.68 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/showdown/1.5.0/dist/showdown.min.js"></script>
<!-- Ace Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ext-static_highlight.js"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/d46185390d.js"></script>
<script src="js/readMeParse.js"></script>
<script src="js/parse.js"></script>
<script src="js/examples.js"></script>
<script src="js/detailPanel.js"></script>
<script src="js/pathHighlighting.js"></script>
<script src="js/refreshTree.js"></script>
<script src="js/dndTree.js"></script>
<script src="js/detailPanel.js"></script>
<script src="js/detailCodeBlock.js"></script>
<script src="js/search.js"></script>
<script>
var d3info;
var root;
var examples;
$(document).ready(function () {
getFileText("d3.json").then(function(d3) {
d3info = jQuery.parseJSON(d3);
createD3Tree(d3info);
});
getExamples();
$("#scroll-down").click(function() {
$('html, body').animate({
scrollTop: $("#viz").offset().top
}, 1000);
});
});
</script>
<body>
<div id="intro-container">
<div id="intro">
<h1>
Exploring D3
</h1>
<h3>
Nicholas Yan, Nick Usoff, Joshua Howe
</h3>
<p>
D3 is a complex library. With over 300 different functions, the scope of D3's functionality — and capabilities — is hard to grasp. While there exists a variety of documentation for D3 online, there is no resource that allows the user to simply explore the library without having to scroll through walls of text. D3Viz is our solution.
</p>
<p>
D3Viz displays the D3 library as a tree to allow users to quickly view or explore aspects of the library that they are interested in. Functions that belong in the same module of D3 are grouped to allow for ease of exploration. If the user is trying to look for a particular function or capability, they can search the tree. And, in limited instances, there are also code examples for modules and functions.
</p>
<p>
To obtain your own copy of D3 (and our dataset), download D3 via npm using the command <span class="code">npm install d3</span>.
</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SmYq8zlhBRU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="scroll-down">
Scroll down to view D3Viz<br>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<!-- <div id="gradient">
</div> -->
<!-- <div id="key" style="position: fixed; top: 20px; left: 20px; width: 200px; z-index: 10;">
<h1>
Key:
</h1>
<div>
<svg width="9" height="9">
<circle cx="4.5" cy="4.5" r="4.5" style="fill: #7f9b66;"></circle>
</svg> D3 Module
<br>
<svg width="9" height="9">
<circle cx="4.5" cy="4.5" r="4.5" style="fill: #A6D785;"></circle>
</svg> D3 Function
</div>
</div> -->
<div id="viz">
<div id="button-container">
<div id="reset-button" class="button">
Reset Tree
</div>
<div id="refresh-button" class="button">
Refresh Tree
</div>
</div>
<div id="back-button-container">
<div id="back-button" class="btn-group">
<button type="button" class="btn nav-button"><i class="fa fa-chevron-left" aria-hidden="true"></i> <span id="back-id"></span></button>
<button type="button" class="btn nav-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" id="back-button-dropdown">
<!-- <li><a href="#">Another action</a></li> -->
</ul>
<!-- <i class="fa fa-chevron-left" aria-hidden="true"></i> <span id="back-id"></span> -->
</div>
<div id="forward-button" class="btn nav-button">
<span id="forward-id"></span> <i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
<div id="tree-container"></div>
<div id="search-container">
<div id="search-bar-container">
<input id="search-bar" placeholder="Search">
</input>
<i id="search-button" class="fa fa-search" aria-hidden="true"></i>
</div>
<div id="search-instr">
If a hidden child-node contains the search term, its visible parent is highlighted. If this parent itself does not contain the search term, upon expanding this parent, the parent will reset to its default color.
</div>
</div>
<div id="detail-container" class="panel-resizable show-caption">
<div id="caption">
<h1>
<i>Let's explore D3!</i>
</h1>
<hr>
<h3>
<p>
Explore the tree to the left to see what capabilities D3 has to offer.
</p>
<p>
To interact with the tree, just click to expand a node. Click the node again to shrink the node.
</p>
<p>
And, to zoom in on the visualization, scroll up; to zoom out, scroll down.
</p>
<p>
<i>Have fun!</i>
</p>
</h3>
<h5 id="built-with">
Built with <a href="https://d3js.org/">D3</a> (of course) and <a href="https://github.com/RodrigoSC/dndTree">dndTree</a>
</h5>
</div>
<!-- <h1 id="dc-title"></h1> -->
<div id="info-container">
<a id="view-example" target="_blank">Click to view an example</a>
<div id="toggle-tab" class="button">View Code</div>
<div id="dc-description-container">
<h3><span id="pathModule"></span><span id="pathFunction"></span></h3>
<p><pre id="dc-description"></pre></p>
</div>
<div id="dc-code-container"></div>
</div>
</div>
</div>
</body>
</html>