-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (116 loc) · 2.37 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
<!DOCTYPE html>
<meta charset="utf-8">
<title>Force-Directed Graph</title>
<style>
.link line {
stroke: #d8d8d8;
stroke-width: 1px;
}
link .line.diminish {
stroke: red;
}
.link-hover line{
stroke-width: 1px;
}
.link line.separator {
stroke: #fff;
stroke-width: 1px;
}
.d-0,
.d-1{
fill: #c1c1c1;
}
.d-2{
fill: #ddd;
}
.node text {
font: 12px sans-serif;
font-weight: bold;
pointer-events: none;
background: red;
fill: #696969;
}
.node>circle:hover {
stroke: #696969;
stroke-width: 2px;
}
.segment {
fill: none;
}
.parent-cluster {
fill: none;
}
.tip {
font: 12px sans-serif;
position: fixed;
margin: 0px auto;
left: 10px;
bottom: 50px;
}
.buttons {
position: fixed;
}
.row{
display: flex;
display: -ms-flexbox;
align-content: stretch;
-ms-flex-align: stretch;
min-height: 20px;
overflow: visible;
line-height: 20px;
}
.col{
flex: 1;
-ms-flex: 1 0 50px;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
.title {
width: 60px;
min-width: 70px;
flex: initial;
border-right: 1px solid #ccc;
text-align: right;
}
.segment circle.diminish{
fill: #fff;
}
.node>circle.diminish{
fill: #eee;
}
.segment circle.diminish.less{
opacity: .2;
fill: inherit;
}
</style>
<body>
<div class="tip">
<div class="row">
<div class="title col">Name</div>
<div class="name col"></div>
</div>
<div class="row">
<div class="title col">Frequency</div>
<div class="freq col"></div>
</div>
<div class="row">
<div class="title col">Lift</div>
<div class="lift col"></div>
</div>
<div class="row">
<div class="title col">Parent</div>
<div class="p-name col"></div>
</div>
</div>
<div class="buttons">
<button class="filter-button ten">x10</button>
<button class="filter-button one">x1</button>
<button class="top-10 lift">top lift</button>
<button class="clear-filter">reset</button>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/script.js" type="application/javascript"></script>