Skip to content

Commit b6356cd

Browse files
gramcrackergramcracker
committed
Search function now works. Also changed the style a bit and filled in the json a bit more.
1 parent 3138b1d commit b6356cd

File tree

6 files changed

+161
-70
lines changed

6 files changed

+161
-70
lines changed

‎contextmenu.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ function contextOptions(d, i) {
2525
transition(n.parent);
2626
return;
2727
}
28-
2928
});
3029

3130
searchNodes(root, d.name);
@@ -35,15 +34,33 @@ function contextOptions(d, i) {
3534
}
3635
}
3736

38-
3937
function searchNodes(d, s) {
40-
if (d.data.name == s) {
38+
s = s.toLowerCase();
39+
if (d.data.name == s || d.data.alttitles.includes(s)) {
4140
transition(d.parent);
42-
return;
41+
return;
4342
}
4443
if (d.children) {
4544
for (let i in d.children) {
4645
searchNodes(d.children[i], s);
47-
}
46+
}
47+
}
48+
}
49+
50+
function search(s) {
51+
searchNodes(root, s);
52+
}
53+
54+
55+
function getIncoming(d, s){
56+
57+
if( d.data.connections.includes(s)){
58+
//addPath()
59+
}
60+
61+
if (d.children) {
62+
for (let i in d.children) {
63+
getIncoming(d.children[i], s);
64+
}
4865
}
4966
}

‎index.html

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@
1111
<body>
1212
<div class="container" align="center" >
1313
<div class="container" >
14-
<div align="left" style="display: inline-block; outline: 1px solid grey; padding: 4px;" >
15-
<!-- Search form -->
16-
<div class="md-form mb-3">
17-
<input class="form-control" type="text" placeholder="Search" aria-label="Search" style="background: none">
14+
<div align="left" style="display: inline-block; padding: 5px; border: 1px solid #353b45; margin: 10px" >
15+
<div class="md-form mb-3" style="margin-right: 50px; margin-left: 50px; margin-top: 15px">
16+
<input class="form-control" id="Search" type="text" placeholder="Search" style="background: #0e0f12; box-shadow: 0px 0px 5px #0e0f12; border: none;" >
1817
</div>
19-
<text style="color:white; font-size:13px">//Grey matter:</text>
18+
<text style="color:#8992a1; font-size:13px">//Grey matter:</text>
2019
<div id="treemapChart"></div>
21-
<text style="color:white; font-size:13px">//White matter:</text>
20+
<text style="color:#8992a1; font-size:13px">//White matter:</text>
2221
<div id="sankeyChart">
2322
</div>
2423
</div>
@@ -33,5 +32,12 @@
3332
<script src="treemap.js"></script>
3433
<script src="contextmenu.js"></script>
3534
<script src="sankey.js"></script>
35+
<script>
36+
$("#Search").keydown(function(event) {
37+
if(event.keyCode === 13){
38+
search($("#Search").val());
39+
}
40+
});
41+
</script>
3642
</body>
3743
</html>

‎sankey.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -138,16 +138,14 @@ function loadSankey(graph) {
138138

139139
// the function for moving the nodes
140140
function dragmove(d) {
141-
d3
142-
.select(this)
143-
.attr(
144-
"transform",
145-
"translate(" +
146-
d.x +
147-
"," +
148-
(d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) +
149-
")"
150-
);
141+
d3.select(this).attr(
142+
"transform",
143+
"translate(" +
144+
d.x +
145+
"," +
146+
(d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) +
147+
")"
148+
);
151149
sankey.relayout();
152150
link.attr("d", path);
153151
}

‎styles.css

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1+
2+
13
@font-face {
24
font-family: LiberationSans;
35
src: url("fonts/LiberationSans-Regular-webfont.woff");
46
}
57

8+
text {
9+
pointer-events: none;
10+
font-family: "LiberationSans";
11+
}
12+
613
body {
714
background-color: #24282e;
815
font-family: LiberationSans;
@@ -12,76 +19,84 @@ body {
1219
width: 750px;
1320
overflow: auto;
1421
}
22+
1523
#sankeyChart {
1624
overflow: hidden;
1725
}
1826

19-
text {
20-
pointer-events: none;
21-
font-family: "LiberationSans";
22-
}
23-
.grandparent text {
24-
}
27+
28+
/*Treemap styles*/
29+
30+
.grandparent text {}
31+
2532
rect {
2633
stroke: grey;
2734
stroke-opacity: 0.2;
2835
stroke-width: 1px;
2936
}
37+
3038
rect.parent,
31-
.grandparent rect {
32-
}
39+
.grandparent rect {}
40+
3341
.grandparent:hover rect {
3442
fill: grey;
3543
}
44+
3645
.children rect.parent,
3746
.grandparent rect {
3847
cursor: pointer;
3948
}
49+
4050
.children rect.child {
4151
opacity: 0;
4252
}
43-
.children rect.parent {
44-
}
53+
54+
.children rect.parent {}
55+
4556
.children:hover rect.child {
4657
opacity: 0.7;
4758
transition: 1s;
4859
}
60+
4961
.children:hover rect.parent {
5062
opacity: 0.2;
5163
transition: 0.3s;
5264
}
53-
.legend {
54-
/* margin-bottom:8px !important;*/
55-
}
56-
.legend rect {
57-
}
65+
5866
.legend text {
5967
text-anchor: middle;
6068
pointer-events: auto;
6169
}
70+
6271
.form-group {
6372
text-align: left;
6473
}
74+
6575
.textdiv {
6676
font-size: 14px;
6777
padding: 7px;
6878
cursor: pointer;
6979
overflow: none;
7080
}
81+
7182
.textdiv .title {
7283
font-family: "LiberationSans";
7384
font-size: 102%;
7485
font-weight: bold;
7586
margin-top: 8px;
7687
font-size: 13px !important;
7788
}
89+
7890
.textdiv p {
7991
line-height: 13px;
8092
margin: 0 0 4px !important;
8193
padding: 0px;
8294
font-size: 10px !important;
8395
}
8496

97+
98+
/*Sankey Map Styles*/
99+
85100
.node rect {
86101
cursor: move;
87102
shape-rendering: crispEdges;
@@ -102,6 +117,9 @@ rect.parent,
102117
stroke-opacity: 0.5;
103118
}
104119

120+
121+
/*Context Menu Styles*/
122+
105123
.custom_menu {
106124
padding: 0;
107125
display: none;
@@ -113,7 +131,6 @@ rect.parent,
113131
white-space: nowrap;
114132
font-family: LiberationSans;
115133
font-size: 14px;
116-
117134
background: black;
118135
opacity: 0.7;
119136
color: white;
@@ -127,3 +144,4 @@ rect.parent,
127144
.custom_menu li:hover {
128145
background-color: #8f3d3d;
129146
}
147+

‎treemap.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ d3.json("whitematter.json", function(d) {
8181
});
8282
/* Adding a foreign object instead of a text object, allows for text wrapping */
8383
g.append("foreignObject").call(rect).attr("class", "foreignobj").append("xhtml:div").attr("dy", ".75em").html(function(d) {
84-
let t = d.data.altTitles ? "/" + d.data.altTitles.join("<br>/") : "" ;
84+
let t = d.data.alttitles ? "/" + d.data.alttitles.join("<br>/") : "" ;
8585
return '' + '<p class="title"> ' + d.data.name + '</p>' + '<p>' + t + '</p>';
8686
}).attr("class", "textdiv"); //textdiv class allows us to style the text easily with CSS
8787

@@ -176,6 +176,22 @@ d3.json("whitematter.json", function(d) {
176176

177177
function name(d) {
178178
return d.data.name;
179+
//uncomment when arrow glyphs are set up.
180+
//return breadcrumbs(d);
181+
}
182+
183+
function breadcrumbs(d) {
184+
var res = "";
185+
var sep = " <";
186+
d.ancestors().forEach(function(i){
187+
res += i.data.name + sep;
188+
});
189+
return res
190+
.split(sep)
191+
.filter(function(i){
192+
return i!== "";
193+
})
194+
.join(sep);
179195
}
180196

181197
function comb(d, dep, map, ref) {

0 commit comments

Comments
 (0)