-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (43 loc) · 2.45 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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Annulus</title>
<link rel="stylesheet" href="assets/css/annulus.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One|Muli|Nunito' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="lib/jquery-ui-1.11.4.custom/jquery-ui.css">
<style type='text/css' id="animation"></style>
</head>
<body>
<div id="title"><div id="name">Annulus</div><div id="subtitle">a data visualization experiment</div></div>
<div id="legend"></div>
<div id="main"></div>
<div id="control_container">
<h2>Controls and Parameters</h2>
<input type="file" id="fileupload"/><br>
<button id="graph_button">Generate Annulus</button>
<button id="demo_button">Demo: Article 10</button>
<button id="slide_button" disabled>View Step by Step</button>
<button id="test_button">TEST</button>
<form>
<br>
Pick a category to graph <input type="text" id="category-select"><br><br>
Value 1 <input type="text" id="v1"> Color for Value 1 <input type="text" id="c1"><br>
Value 2 <input type="text" id="v2"> Color for Value 2 <input type="text" id="c2"><br>
Value 3 <input type="text" id="v3"> Color for Value 3 <input type="text" id="c3"><br>
Value 4 <input type="text" id="v4"> Color for Value 4 <input type="text" id="c4"><br>
Value 5 <input type="text" id="v5"> Color for Value 5 <input type="text" id="c5"><br>
<p> Undefined/other <input type="text" id="c0"></p>
<input type="sumbit" value="Update Values and Colors" id="submit">
</form>
<p>Instructions: upload a TSV of your choice containing a sequence/order column. Pick a category from the other columns of your TSV and select the values you would like to graph, as well as color for each value. Click update, and then generate your Annulus.</p>
</div>
<div id="bottom"><div id="slider"></div></div>
</body>
<script type="text/javascript" src="lib/d3.min.js"></script>
<script type="text/javascript" src="assets/js/annulus.js"></script>
<!-- <script type="text/javascript" src="lib/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>