Added context menu to sankey node titles that will help traverse pathways.

gramcracker · gramcracker · commit 822138a29294 · 2020-01-08T12:51:11.000-06:00
diff --git a/contextmenu.js b/contextmenu.js
@@ -0,0 +1,43 @@
+function contextmenu(d){
+    //d3.select(".custom_menu").remove();
+    d3.event.preventDefault();
+    menu = d3.select(".custom_menu")
+      .style("left", d3.event.pageX + "px")
+      .style("top", d3.event.pageY + "px")
+      .style("position","absolute")
+      .style("display", 'block');
+
+    menu.selectAll('li')
+    .on("click", function(e, i){
+    	contextOptions(d, i);
+
+    });
+
+}
+
+d3.select('body').on('click', function() {
+  d3.select('.custom_menu').style('display', 'none');
+});
+
+function contextOptions(d, i){
+	console.log(i);
+	switch(i){
+		case(0):
+		console.log(focus);
+		focus.children.forEach(function(n){
+			if(n.data.name == d.name){
+				transition(n);
+			}else{
+				console.log(d.name + " not in focus");
+			}
+		});
+		// if (focus.children.some(n => )) {
+		// 	transition(n);
+		// }else{
+		// 	console.log(d.name + " not in focus");
+		// }
+		break;
+		case(1):
+		break;
+	}
+}
diff --git a/fonts/LiberationSans-Regular-webfont.woff b/fonts/LiberationSans-Regular-webfont.woff
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="styles.css">
 	<script src="https://d3js.org/d3.v4.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
 	<div class="container" align="center" >
@@ -15,15 +16,22 @@
 				<div class="md-form mb-3">
 				 	<input class="form-control" type="text" placeholder="Search" aria-label="Search" style="background: none">
 				</div>
-				<text style="color:white; font-size:12px">//Grey matter:</text>
+				<text style="color:white; font-size:13px">//Grey matter:</text>
 				<div id="treemapChart"></div>
-				<text style="color:white; font-size:12px">//White matter:</text>
+				<text style="color:white; font-size:13px">//White matter:</text>
 				<div id="sankeyChart">
 				</div>
 			</div>
 		</div>
 	</div>
+
+	<ul class='custom_menu'>
+	  <li data-action = "view_outgoing">view outgoing</li>
+	  <li data-action = "view_incoming">view incoming</li>
+	</ul>
+
 	<script src="treemap.js"></script>
+	<script src="contextmenu.js"></script>
 	<script src="sankey.js"></script>
 </body>
 </html>
diff --git a/sankey.js b/sankey.js
@@ -92,19 +92,22 @@ function loadSankey(graph){
       return d.name + "\n" + format(d.value); });
 
 // add in the title for the nodes
-  node.append("text")
+    nodeText =  node.append("text")
       .attr("x", -6)
       .attr("y", function(d) { return d.dy / 2; })
       .attr("dy", ".35em")
       .attr("text-anchor", "end")
       .attr("transform", null)
       .text(function(d) { return d.name; })
-    .filter(function(d) { return d.x < width / 2; })
+      .on("contextmenu", function(d) {
+        contextmenu(d);
+      })
+      .filter(function(d) { return d.x < width / 2; })
       .attr("x", 6 + sankey.nodeWidth())
       .attr("text-anchor", "start")
       .style("fill", function(d) {
-        return d.value > 0 ? "black": "white";
-      });
+        return d.value > 0 ? "black": "white";});
+      
 
 // the function for moving the nodes
   function dragmove(d) {
diff --git a/styles.css b/styles.css
@@ -1,16 +1,27 @@
 
+
+@font-face {
+   font-family: LiberationSans; 
+   src: url('fonts/LiberationSans-Regular-webfont.woff');
+} 
+
+
 body {
 	background-color: #24282e;
+	font-family: LiberationSans;
 }
 
 #treemapChart {
 	  width: 750px;
 	  overflow:auto;
 	}
+#sankeyChart {
+	overflow: hidden;
+}
 
 	text {
 	  pointer-events: none;
-	  font-family: "courier new";
+	  font-family: "LiberationSans";
 
 	}
 	.grandparent text {
@@ -70,7 +81,7 @@ body {
 	    overflow:none;
 	}
 	.textdiv .title {
-		font-family: "courier new";
+		font-family: "LiberationSans";
 	    font-size: 102%;
 	    font-weight: bold;
 	    margin-top: 8px;
@@ -89,7 +100,8 @@ body {
 }
 
 .node text {
-  pointer-events: none;
+	cursor: move;
+  pointer-events: auto;
   font-size: 13px;
 }
 
@@ -100,5 +112,31 @@ body {
 
 .link:hover {
   stroke-opacity: .5;
-  stroke: #8f3d3d;
+}
+
+.custom_menu {
+	padding: 0;
+	display: none;
+	list-style-type:none;
+    z-index: 1000;
+    position: absolute;
+    overflow: hidden;
+    border: 1px solid black;
+    white-space: nowrap;
+    font-family: LiberationSans;
+    font-size: 14px;
+
+    background: black;
+    opacity: .7;
+    color: white;
+    
+}
+
+.custom_menu li {
+    padding: 1px 10px;
+    cursor: pointer;
+}
+
+.custom_menu li:hover {
+    background-color: #8f3d3d;
 }
diff --git a/treemap.js b/treemap.js
@@ -17,27 +17,29 @@ var margin = {
 width = divWidth - 1,
 height = 200 - margin.top,
 formatNumber = d3.format(","),
-transitioning;
+transitioning, 
+data, 
+root, focus;
 
 // sets x and y scale to determine size of visible boxes
-var x = d3.scaleLinear().domain([0, width]).range([0, width]);
+let x = d3.scaleLinear().domain([0, width]).range([0, width]);
 
-var y = d3.scaleLinear().domain([0, height]).range([0, height]);
+let y = d3.scaleLinear().domain([0, height]).range([0, height]);
 // adding a color scale
-var colorwheel = 0;
+let colorwheel = 0;
 
-var color = d3.scaleOrdinal(d3.schemeCategory20);
+let color = d3.scaleOrdinal(d3.schemeCategory20);
 
-var treemap = d3.treemap().size([width, height]).paddingInner(0).round(false);
+let treemap = d3.treemap().size([width, height]).paddingInner(0).round(false);
 
-var svg = d3.select('#' + el_id)
+let svg = d3.select('#' + el_id)
 .append("svg").attr("id", "treemap")
 .attr("width", width)
 .attr("height", height + margin.top)
 .append("g").attr("transform", "translate(0," + margin.top + ")")
 .style("shape-rendering", "crispEdges");
 
-var grandparent = svg.append("g")
+let grandparent = svg.append("g")
 .attr("class", "grandparent");
 
 grandparent.append("rect")
@@ -48,25 +50,31 @@ grandparent.append("text")
 .attr("x", 6).attr("y", 6 - margin.top)
 .attr("dy", ".75em");
 
-d3.json("whitematter.json", function(data) {
-  var root = d3.hierarchy(data);
+d3.json("whitematter.json", function(d) {
+  data = d;
+  root = d3.hierarchy(data);
   treemap(root.sum(function(d) {
     return d.value;
   }).sort(function(a, b) {
     return b.height - a.height || b.value - a.value
   }));
   display(root);
 
+  });
+
   function display(d) {
+
+    focus = d;
+
     // write text into grandparent
     // and activate click's handler
     grandparent.datum(d.parent).on("click", transition).select("text").text(name(d));
     // grandparent color
     grandparent.datum(d.parent).select("rect").attr("fill", function() {
       return 'grey'
     });
-    var g1 = svg.insert("g", ".grandparent").datum(d).attr("class", "depth");
-    var g = g1.selectAll("g").data(d.children).enter().append("g");
+    let g1 = svg.insert("g", ".grandparent").datum(d).attr("class", "depth");
+    let g = g1.selectAll("g").data(d.children).enter().append("g");
 
     // add class and click handler to all g's with children
     g.filter(function(d) {
@@ -89,12 +97,14 @@ d3.json("whitematter.json", function(data) {
 
     function transition(d) {
 
+      focus = d;
+
       generateSankey(d);
 
       
       if (transitioning || !d) return;
       transitioning = true;
-      var g2 = display(d),
+      let g2 = display(d),
         t1 = g1.transition().duration(650),
         t2 = g2.transition().duration(650);
       // Update the domain only after entering new elements.
@@ -215,7 +225,7 @@ d3.json("whitematter.json", function(data) {
 
   function generateSankey(d){
 
-          var sankeyMap = {
+          let sankeyMap = {
         nodes: [],
         links: []
       };
@@ -224,6 +234,7 @@ d3.json("whitematter.json", function(data) {
           if (!sankeyMap.nodes.some(n => n.name === d.children[i].data.name)) {
             sankeyMap.nodes.push({
               name: d.children[i].data.name,
+              value: 1
             })
           }
           comb(d.children[i], d.children[i].depth, sankeyMap, i);
@@ -234,4 +245,3 @@ d3.json("whitematter.json", function(data) {
 
   }
 
-});
