-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsankey.html
67 lines (60 loc) · 2.35 KB
/
sankey.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sankey</title>
<!--Stylesheets-->
<link rel="stylesheet" type="text/css" href="sankey.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
overflow-x: hidden;
}
#timeslider {
width: 100%;
background-color: #5d478b;
left: 0px;
top: 0px;
height: 50px;
</style>
</head>
<body>
<div id="timeslider"></div>
<br>
<form>
<div class="form-row">
<div class="col-4">
<input type="text" class="form-control" name="search" id="city" value="" placeholder="Search for a connection">
</div>
<div class="col-2">
<button id="search" class="btn btn-primary" type="button">Search</button>
<button id="clear" class="btn btn-primary" type="button">Clear</button>
</div>
</div>
</form>
<svg id="sankey" width=1100 height=1000 id="chart"></svg>
<!--SCRIPTS-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.7.1/d3-sankey.min.js"></script>
<script src="https://unpkg.com/[email protected]/EventEmitter.min.js"></script>
<script src="timeslider.js"></script>
<script src="data_components.js"></script>
<script type="text/javascript" src="d3-sankey.js"></script>
<script type="text/javascript" src="sankey.js"></script>
<script>
let min_date = new Date(1999, 1, 1);
let max_date = new Date(2017, 8, 1);
const timesliderDiv = document.getElementById("timeslider");
const timeslider = new TimeSlider({startDate:min_date, endDate:max_date, containerDiv:timesliderDiv});
timeslider.draw();
const ds = new DataSource(timeslider);
const skey = new SankeyDiagram(ds, document.getElementById("sankey"));
</script>
</body>
</html>