Last active
May 15, 2017 13:48
-
-
Save wolfiex/be714769c97148d2b94c6c6d4de08cb7 to your computer and use it in GitHub Desktop.
D3 V4 Hive simple plot example
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
| ## A simple hive plot example | |
| Using randomly generated node and link data, and updating Mike bostocks gist https://bl.ocks.org/mbostock/2066415 to use the latest d3 (version4) |
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
| d3.hive={},d3.hive.link=function(){function t(t,s){var u,h=a(r,this,t,s),i=a(n,this,t,s);h.a>i.a&&(u=i,i=h,h=u),i.a-h.a>Math.PI&&(h.a+=2*Math.PI);var e=h.a+(i.a-h.a)/3,c=i.a-(i.a-h.a)/3;return h.r0-h.r1||i.r0-i.r1?"M"+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0+"L"+Math.cos(h.a)*h.r1+","+Math.sin(h.a)*h.r1+"C"+Math.cos(e)*h.r1+","+Math.sin(e)*h.r1+" "+Math.cos(c)*i.r1+","+Math.sin(c)*i.r1+" "+Math.cos(i.a)*i.r1+","+Math.sin(i.a)*i.r1+"L"+Math.cos(i.a)*i.r0+","+Math.sin(i.a)*i.r0+"C"+Math.cos(c)*i.r0+","+Math.sin(c)*i.r0+" "+Math.cos(e)*h.r0+","+Math.sin(e)*h.r0+" "+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0:"M"+Math.cos(h.a)*h.r0+","+Math.sin(h.a)*h.r0+"C"+Math.cos(e)*h.r1+","+Math.sin(e)*h.r1+" "+Math.cos(c)*i.r1+","+Math.sin(c)*i.r1+" "+Math.cos(i.a)*i.r1+","+Math.sin(i.a)*i.r1}function a(t,a,r,n){var e=t.call(a,r,n),c=+("function"==typeof s?s.call(a,e,n):s)+i,o=+("function"==typeof u?u.call(a,e,n):u),M=u===h?o:+("function"==typeof h?h.call(a,e,n):h);return{r0:o,r1:M,a:c}}var r=function(t){return t.source},n=function(t){return t.target},s=function(t){return t.angle},u=function(t){return t.radius},h=u,i=-Math.PI/2;return t.source=function(a){return arguments.length?(r=a,t):r},t.target=function(a){return arguments.length?(n=a,t):n},t.angle=function(a){return arguments.length?(s=a,t):s},t.radius=function(a){return arguments.length?(u=h=a,t):u},t.startRadius=function(a){return arguments.length?(u=a,t):u},t.endRadius=function(a){return arguments.length?(h=a,t):h},t}; |
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
| license: gpl-3.0 | |
| height: 960 | |
| border: no |
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"> | |
| <!-- /* Code adapted from https://bost.ocks.org/mike/hive/ 's simple example- for use with d3v4' */ --> | |
| <style> | |
| .link { | |
| fill: none; | |
| stroke-width: 1.5px; | |
| } | |
| .axis, .node { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="d3.hive.min.js"></script> | |
| <script> | |
| var width = window.innerWidth, | |
| height = window.innerHeight, | |
| innerRadius = 40, | |
| outerRadius = 240; | |
| var groupings = 3; ///number of groups | |
| var nnodes = 25; ///number of nodes | |
| var nlinks = 150; /// number of links | |
| var angle = d3 | |
| .scalePoint() | |
| .domain(d3.range(groupings + 1)) | |
| .range([0, 2 * Math.PI]), | |
| radius = d3.scaleLinear().range([innerRadius, outerRadius]), | |
| color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(20)); | |
| /* | |
| // Original input format: | |
| var nodes = [{ x: 0, y: 0.1 }, { x: 0, y: 0.9 }, { x: 1, y: 0.2 }]; | |
| var links = [ | |
| { source: nodes[0], target: nodes[2] }, | |
| { source: nodes[0], target: nodes[1] } //use net | |
| ]; | |
| */ | |
| var nodes = d3.range(nnodes).map(d => { | |
| return { x: ~~(Math.random() * groupings), y: Math.random() }; | |
| }); | |
| var links = d3.range(nlinks).map(d => { | |
| return { | |
| source: nodes[~~(Math.random() * nnodes)], | |
| target: nodes[~~(Math.random() * nnodes)] | |
| }; | |
| }); | |
| var svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| svg | |
| .selectAll(".axis") | |
| .data(d3.range(groupings)) | |
| .enter() | |
| .append("line") | |
| .attr("class", "axis") | |
| .attr("transform", function(d) { | |
| return "rotate(" + degrees(angle(d)) + ")"; | |
| }) | |
| .attr("x1", radius.range()[0]) | |
| .attr("x2", radius.range()[1]); | |
| svg | |
| .selectAll(".link") | |
| .data(links) | |
| .enter() | |
| .append("path") | |
| .attr("class", "link") | |
| .attr( | |
| "d", | |
| d3.hive | |
| .link() | |
| .angle(function(d) { | |
| return angle(d.x); | |
| }) | |
| .radius(function(d) { | |
| return radius(d.y); | |
| }) | |
| ) | |
| .style("stroke", function(d) { | |
| return color(d.source.x); | |
| }) | |
| .style("stroke-opacity", 0.4); | |
| svg | |
| .selectAll(".node") | |
| .data(nodes) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { | |
| return "rotate(" + degrees(angle(d.x)) + ")"; | |
| }) | |
| .attr("cx", function(d) { | |
| return radius(d.y); | |
| }) | |
| .attr("r", 5) | |
| .style("fill", function(d) { | |
| return color(d.x); | |
| }); | |
| function degrees(radians) { | |
| return radians / Math.PI * 180 - 90; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment