This is a follow-on graph to the Basic Directional Force Layout Diagram and the Directional Force Layout Diagram with Node Highlighting and builds on it by couring the nodes.
-
-
Save PallaviTS/8dca8bbcdb43b8e19b9d4674578b4b65 to your computer and use it in GitHub Desktop.
Directional Force Layout Diagram with node colouring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| source | target | value | |
|---|---|---|---|
| Drugs | Drug Classes | 1.2 | |
| Drug Classes | Drugs | 1.3 | |
| Therapeutic Areas | Drugs | 0.2 | |
| Drugs | Manufacturers | 0.5 | |
| Manufacturers | Drugs | 1.6 | |
| Drugs | Drug Strengths | 0.4 | |
| Drugs | Drugs | 0.6 | |
| Drugs | Health Plan Drug Comments | 0.7 | |
| Health Plans | Health Plan Drug Comments | 0.8 | |
| Drug Types | Drugs | 0.8 | |
| Preliminary Drug Data Types | Drugs | 0.7 | |
| Injectable Types | Drugs | 0.8 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <style> | |
| path.link { | |
| fill: none; | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| } | |
| path.link.twofive { | |
| opacity: 0.25; | |
| } | |
| path.link.fivezero { | |
| opacity: 0.50; | |
| } | |
| path.link.sevenfive { | |
| opacity: 0.75; | |
| } | |
| path.link.onezerozero { | |
| opacity: 1.0; | |
| } | |
| circle { | |
| fill: #ccc; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| fill: #000; | |
| font: 10px sans-serif; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <body> | |
| <script> | |
| // get the data | |
| d3.csv("force.csv", function(error, links) { | |
| var nodes = {}; | |
| // Compute the distinct nodes from the links. | |
| links.forEach(function(link) { | |
| link.source = nodes[link.source] || | |
| (nodes[link.source] = {name: link.source}); | |
| link.target = nodes[link.target] || | |
| (nodes[link.target] = {name: link.target}); | |
| link.value = +link.value; | |
| }); | |
| var width = 960, | |
| height = 500, | |
| color = d3.scale.category20c(); | |
| var force = d3.layout.force() | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .size([width, height]) | |
| .linkDistance(100) | |
| .charge(-500) | |
| .on("tick", tick) | |
| .start(); | |
| // Set the range | |
| var v = d3.scale.linear().range([0, 100]); | |
| // Scale the range of the data | |
| v.domain([0, d3.max(links, function(d) { return d.value; })]); | |
| // asign a type per value to encode opacity | |
| links.forEach(function(link) { | |
| if (v(link.value) <= 25) { | |
| link.type = "twofive"; | |
| } else if (v(link.value) <= 50 && v(link.value) > 25) { | |
| link.type = "fivezero"; | |
| } else if (v(link.value) <= 75 && v(link.value) > 50) { | |
| link.type = "sevenfive"; | |
| } else if (v(link.value) <= 100 && v(link.value) > 75) { | |
| link.type = "onezerozero"; | |
| } | |
| }); | |
| console.log(nodes); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // build the arrow. | |
| svg.append("svg:defs").selectAll("marker") | |
| .data(["end"]) // Different link/path types can be defined here | |
| .enter().append("svg:marker") // This section adds in the arrows | |
| .attr("id", String) | |
| .attr("viewBox", "0 -5 10 10") | |
| .attr("refX", 15) | |
| .attr("refY", -1.5) | |
| .attr("markerWidth", 6) | |
| .attr("markerHeight", 6) | |
| .attr("orient", "auto") | |
| .append("svg:path") | |
| .attr("d", "M0,-5L10,0L0,5"); | |
| // add the links and the arrows | |
| var path = svg.append("svg:g").selectAll("path") | |
| .data(force.links()) | |
| .enter().append("svg:path") | |
| .attr("class", function(d) { return "link " + d.type; }) | |
| .attr("marker-end", "url(#end)"); | |
| // define the nodes | |
| var node = svg.selectAll(".node") | |
| .data(force.nodes()) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .on("click", click) | |
| .on("dblclick", dblclick) | |
| .call(force.drag); | |
| // add the nodes | |
| node.append("circle") | |
| .attr("r", 5) | |
| .style("fill", function(d) { return color(d.name); }); | |
| // add the text | |
| node.append("text") | |
| .attr("x", 12) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.name; }); | |
| // add the curvy lines | |
| function tick() { | |
| path.attr("d", function(d) { | |
| var dx = d.target.x - d.source.x, | |
| dy = d.target.y - d.source.y, | |
| dr = Math.sqrt(dx * dx + dy * dy); | |
| return "M" + | |
| d.source.x + "," + | |
| d.source.y + "A" + | |
| dr + "," + dr + " 0 0,1 " + | |
| d.target.x + "," + | |
| d.target.y; | |
| }); | |
| node | |
| .attr("transform", function(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; }); | |
| } | |
| // action to take on mouse click | |
| function click() { | |
| d3.select(this).select("text").transition() | |
| .duration(750) | |
| .attr("x", 22) | |
| .style("stroke", "lightsteelblue") | |
| .style("stroke-width", ".5px") | |
| .style("font", "20px sans-serif"); | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 16); | |
| } | |
| // action to take on mouse double click | |
| function dblclick() { | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 6); | |
| d3.select(this).select("text").transition() | |
| .duration(750) | |
| .attr("x", 12) | |
| .style("stroke", "none") | |
| .style("fill", "black") | |
| .style("stroke", "none") | |
| .style("font", "10px sans-serif"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment