-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (65 loc) · 2.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="nv.d3.css" rel="stylesheet" type="text/css" />
<link href="treeView.css" type="text/css" rel="stylesheet" />
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.11.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="d3.min.js"></script>
<script src="nv.d3.js"></script>
<script src="chartView.js"></script>
<script src="treeView.js"></script>
<style>
/*#chart_div {
position: fixed;
bottom: 100px;
right: 30px;
}*/
</style>
</head>
<body>
<div class="container">
<br />
<div class="row">
<div class="col-lg-12 btn-row">
<button class="btn btn-primary btn-lg" type="button" data-toggle="collapse" data-target="#about" aria-expanded="false" aria-controls="about">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</button>
<!--<a class="btn btn-default btn-lg" href="#" role="button" onclick="clearAll()">Quick Options</a>-->
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="collapse" id="about">
<div class="well">
BLSVisualizer is a visualization tool used to view time series data imported from the Bureau of Labor Statistics. The tree view organizes the data in a hierarchical order, making it easy to navigate to the desired dataset. The user can <b>drag and drop the desired data into the chart slots</b>, causing the corresponding plot on the right to automatically update with the newly added data. The user may add multiple time series data to each plot and can <b>remove them individually by clicking on them in the plotting box or all of them by clicking "Clear"</b>. <span style="color:orange">Orange icons</span> indicate dimensional values, whereas <span style="color:green">green icons</span> indicate rates. <br><br> See the tutorial: <a href='http://youtu.be/9RiOq78xIr8' target="_blank">http://youtu.be/9RiOq78xIr8</a>
</div>
</div>
</div>
</div>
</div>
<table >
<tr>
<td rowspan="3" style="width: 980px; height:100%">
<div id="tree_div" ></div>
</td>
<td>
<div id="chart_div1"><svg></svg></div>
</td>
</tr>
<tr>
<td >
<div id="chart_div2"><svg></svg></div>
</td>
</tr>
<tr>
<td>
<div id="chart_div3"><svg></svg></div>
</td>
</tr>
</table>
</body>
</html>