-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (84 loc) · 2.88 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
<!DOCTYPE html>
<html>
<head>
<title>Pipeline Demo</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
body.dark {
background: black;
}
.controls {
text-align: center;
padding: 0.5em 0;
margin-bottom: 2em;
background: #eee;
}
svg {
display: block;
max-width: 100%;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="offset.js"></script>
<script src="compute.js"></script>
<script src="pipeline.js"></script>
</head>
<body>
<div class="controls">
<select id="color-mode" onchange="render()">
<option value="light" selected>Light</option>
<option value="dark">Dark</option>
</select>
<select id="continuity" onchange="render()">
<option value="disconnected" selected>Disconnected</option>
<option value="connected">Connected</option>
</select>
<select id="dataset" onchange="render()">
<option value="flowing" selected>Flowing</option>
<option value="stagnant">Stagnant</option>
</select>
</div>
<svg xmlns="http://www.w3.org/2000/svg"></svg>
<script type="text/javascript">
const render = () => {
const dark = document.getElementById("color-mode").value === "dark"
const continuity = document.getElementById("continuity").value === "connected"
const dataset = document.getElementById("dataset").value
const pipe = pipeline({
continuity: continuity,
grid: {
color: dark ? "#333" : "#eee",
foregroundColor: dark ? "black" : "white",
foregroundFade: dark ? 0.5 : 0.8
},
caption: {
sankeyCaptionColor: dark ? "#aaa" : "white"
},
types: {
enter: ["New"],
exit: ["Fail", "Pass"],
color: {
"New": "#08f",
"Fail": "#f80",
"Pass": "#8fe240"
}
}
})
d3.json(`data-${dataset}.json`).then(data => {
document.body.classList.toggle("dark", dark)
d3.select("svg")
.datum(pipe.process(data))
.call(pipe.render)
})
}
render()
</script>
</body>
</html>