Old school D3 from simpler times

All examples By author By category About

ssmith151

Full window Github gist

Pateint Genomic networking_v1

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #bbb;
}

</style>
<div class="ui-widget">
   <input id="search">
    <button type="button" onclick="searchNode()">Search</button>
</div>
<form>
    <h3> Link threshold 0 <input type="range" id="thersholdSlider" name="points" value = 0 min="0" max="10" onchange="threshold(this.value)"> 10 </h3>
</form>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(10).strength(0.5))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 3));
  
var graph = {
  "nodes": [
    {"id": "UMWA0001", "group": 1},
    {"id": "UMWA0002", "group": 1},
    {"id": "UMWA0003", "group": 1},
    {"id": "UMWA0004", "group": 1},
    {"id": "UMWA0005", "group": 2},
    {"id": "UMWA0006", "group": 2},
    {"id": "UMWA0007", "group": 2},
    {"id": "UMWA0008", "group": 3}
    ],
  "links": [
    {"source": "UMWA0001", "target": "UMWA0002", "value": 10},
    {"source": "UMWA0002", "target": "UMWA0003", "value": 5},
    {"source": "UMWA0003", "target": "UMWA0004", "value": 5},
    {"source": "UMWA0002", "target": "UMWA0004", "value": 2},
    {"source": "UMWA0001", "target": "UMWA0004", "value": 4},
    {"source": "UMWA0001", "target": "UMWA0005", "value": 2},
    {"source": "UMWA0001", "target": "UMWA0008", "value": 2},
    {"source": "UMWA0005", "target": "UMWA0006", "value": 6},
    {"source": "UMWA0005", "target": "UMWA0007", "value": 5},
    {"source": "UMWA0006", "target": "UMWA0007", "value": 8},
    ]
};
graphRec = JSON.parse(JSON.stringify(graph));

//var nodes, links, bilinks = restart(graph.nodes, graph.links);  
  
function redoLinks(inNodes, inLinks){
  
  var nodes = inNodes,
    nodeById = d3.map(nodes, function(d) { return d.id; }),
    links = inLinks,
    bilinks = [];

links.forEach(function(link) {
  	var s = link.source = nodeById.get(link.source),
  	    t = link.target = nodeById.get(link.target),
  	    i = {}; // intermediate node
  	nodes.push(i);
  	links.push({source: s, target: i}, {source: i, target: t});
  	bilinks.push([s, i, t]);
	});

var link = svg.selectAll(".link")
  	.data(bilinks)
		.style("stroke-width", function (d) {
  		return Math.sqrt(d.value);
  	})
  	.enter().append("path")
    	.attr("class", "link");

var node = svg.selectAll(".node")
  	.data(nodes.filter(function(d) { return d.id; }))
  	.enter().append("circle")
    	.attr("class", "node")
    	.attr("r", 5)
    	.attr("fill", function(d) { return color(d.group); })
    	.call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
				//.on("dblclick", connectedNodes);
  
  return nodes, links, bilinks;
}
  
var nodes = graph.nodes,
    nodeById = d3.map(nodes, function(d) { return d.id; }),
    links = graph.links,
    bilinks = [];

links.forEach(function(link) {
  	var s = link.source = nodeById.get(link.source),
  	    t = link.target = nodeById.get(link.target),
  	    i = {}; // intermediate node
  	nodes.push(i);
  	links.push({source: s, target: i}, {source: i, target: t});
  	bilinks.push([s, i, t]);
});

var link = svg.selectAll(".link")
  	.data(bilinks)
		.style("stroke-width", function (d) {
  		return Math.sqrt(d.value);
  	})
  	.enter().append("path")
    	.attr("class", "link");

var node = svg.selectAll(".node")
  	.data(nodes.filter(function(d) { return d.id; }))
  	.enter().append("circle")
    	.attr("class", "node")
    	.attr("r", 5)
    	.attr("fill", function(d) { return color(d.group); })
    	.call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
				//.on("dblclick", connectedNodes);
  
node.append("title")
   .text(function(d) { return d.id; });

simulation
   .nodes(nodes)
   .on("tick", ticked);

simulation.force("link")
   .links(links);

function ticked() {
  link.attr("d", positionLink);
  node.attr("transform", positionNode);
}

function positionLink(d) {
  return "M" + d[0].x + "," + d[0].y
       + "S" + d[1].x + "," + d[1].y
       + " " + d[2].x + "," + d[2].y;
}

function positionNode(d) {
  return "translate(" + d.x + "," + d.y + ")";
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x, d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x, d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null, d.fy = null;
}
/////////////////////////////////////////////////////////////
//adjust threshold
function threshold(thresh) {
  graph.links.splice(0, graph.links.length);
  console.log(graph.links)
  var modLinks = []
	for (var i = 0; i < graphRec.links.length; i++) {
		if (graphRec.links[i].value > thresh) {
      console.log("adding :" + graphRec.links[i])
      modLinks.push(graphRec.links[i])
      //graph.links.push(graphRec.links[i]);
    }
	}
  nodes, links, bilinks = redoLinks(graph.nodes, modLinks);
}
//Restart the visualisation after any node and link changes
//function restart() {
//	link = link.data(graph.links);
//	link.exit().remove();
//	link.enter().insert("line", ".node").attr("class", "link");
//	node = node.data(graph.nodes);
	//node.enter().insert("circle").attr("class", "node").attr("r", 5).call(d3.drag());
	//force.start();
//}
/////////////////////////
  //Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
  linkedByIndex[i + "," + i] = 1;
};
//console.log(linkedByIndex)
//graph.links.forEach(function (d) {
//    linkedByIndex[d.source.index + "," + d.target.index] = 1;
//});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
  return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
  if (toggle == 0) {
  //Reduce the opacity of all but the neighbouring nodes
    d = d3.select(this).node().__data__;
  	//console.log(d)
    node.style("opacity", function (o) {
      	//console.log(d, o);
        return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
    });
  	console.log(link);
    link.style("stroke-opacity", function (o) {
      	//console.log(link);
        return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
    });
    //Reduce the op
    toggle = 1;
  } else {
    //Put them back to opacity=1
    node.style("opacity", 1);
    link.style("stroke-opacity", 1);
    toggle = 0;
  }
}
  
</script>

https://d3js.org/d3.v4.min.js