Edges represented only as a pointer from one node to another. They end up as vector edges? Clockface edges?
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Sankey Particles</title> | |
| <style> | |
| .node rect { | |
| cursor: move; | |
| fill-opacity: .9; | |
| shape-rendering: crispEdges; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .05; | |
| } | |
| .link:hover { | |
| stroke-opacity: .25; | |
| } | |
| svg { | |
| position: absolute; | |
| } | |
| canvas { | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="1000" height="1000" ></svg> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| function arrowhead(d, headSize, bodySize) { | |
| var bodySize = 2; | |
| var diffX = d.target.y - d.source.y; | |
| var diffY = d.target.x - d.source.x; | |
| var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
| var angle1 = angle0 - ( Math.PI / 2 ); | |
| var angle2 = angle0 + ( Math.PI / 2 ); | |
| var x1 = d.source.x + (headSize * Math.cos(angle1)); | |
| var y1 = d.source.y - (headSize * Math.sin(angle1)); | |
| var x2 = d.source.x + (headSize * Math.cos(angle2)); | |
| var y2 = d.source.y - (headSize * Math.sin(angle2)); | |
| var x3 = d.target.x + (headSize * Math.cos(angle2)); | |
| var y3 = d.target.y - (headSize * Math.sin(angle2)); | |
| var x4 = d.target.x + (headSize * Math.cos(angle1)); | |
| var y4 = d.target.y - (headSize * Math.sin(angle1)); | |
| var mx1 = d.source.x + (bodySize * Math.cos(angle1)); | |
| var my1 = d.source.y - (bodySize * Math.sin(angle1)); | |
| var mx2 = d.source.x + (bodySize * Math.cos(angle2)); | |
| var my2 = d.source.y - (bodySize * Math.sin(angle2)); | |
| var mx3 = d.target.x + (bodySize * Math.cos(angle1)); | |
| var my3 = d.target.y - (bodySize * Math.sin(angle1)); | |
| var mx4 = d.target.x + (bodySize * Math.cos(angle2)); | |
| var my4 = d.target.y - (bodySize * Math.sin(angle2)); | |
| var midY2 = (my1 + my3) / 2; | |
| var midX2 = (mx1 + mx3) / 2; | |
| var midY1 = (my2 + my4) / 2; | |
| var midX1 = (mx2 + mx4) / 2; | |
| var midDiffY1 = my1 - my3; | |
| var midDiffX1 = mx1 - mx3; | |
| var midDiffY2 = my2 - my4; | |
| var midDiffX2 = mx2 - mx4; | |
| var pythag = Math.sqrt((midDiffX1 * midDiffX1) + (midDiffY1 * midDiffY1)); | |
| var adjX1 = mx1 - ((midDiffX1 * headSize) / pythag); | |
| var adjY1 = my1 - ((midDiffY1 * headSize) / pythag); | |
| var adjX2 = mx1 - ((midDiffX2 * headSize) / pythag); | |
| var adjY2 = my1 - ((midDiffY2 * headSize) / pythag); | |
| return "M" + mx1 + "," + my1 + "L" + adjX1 + "," + adjY1 + " L " + adjX2 + "," + adjY2 + " L " + mx2 + "," + my2 + "z"; | |
| } | |
| set3 = ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]; | |
| d3.json("network.json", makeViz) | |
| function makeViz(data) { | |
| force = d3.layout.force().links(data.links).nodes(data.nodes) | |
| .charge(function (d) {return d.weight * -200}) | |
| .size([1000,1000]) | |
| .on("tick", tick) | |
| d3.select("svg").selectAll("path.source").data(data.links) | |
| .enter() | |
| .append("path") | |
| .attr("class", "source") | |
| .style("fill", "lightgreen") | |
| .style("stroke", "black") | |
| .style("stroke-width", 1) | |
| d3.select("svg").selectAll("path.target").data(data.links) | |
| .enter() | |
| .append("path") | |
| .attr("class", "target") | |
| .style("fill", "gold") | |
| .style("stroke", "black") | |
| .style("stroke-width", 1) | |
| d3.select("svg").selectAll("circle").data(data.nodes) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 20) | |
| .style("fill", function (d) {return set3[d.module]}) | |
| .style("fill-opacity", 0.2) | |
| .style("stroke", "darkgray") | |
| .style("stroke-opacity", 0.3) | |
| .call(force.drag) | |
| force.start(); | |
| function tick(e) { | |
| d3.selectAll("circle") | |
| .attr("cx", function (d) {return d.x}) | |
| .attr("cy", function (d) {return d.y}); | |
| d3.selectAll("path.source") | |
| .attr("d", function (d) {return arrowhead(d, 20, 1)}) | |
| d3.selectAll("path.target") | |
| .attr("d", function (d) {return arrowhead({source: d.target, target: d.source}, 20, 1)}) | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
| {"nodes":[{"id":0,"module":0},{"id":2,"module":0},{"id":7,"module":0},{"id":8,"module":0},{"id":11,"module":0},{"id":14,"module":4},{"id":22,"module":2},{"id":25,"module":2},{"id":36,"module":10},{"id":45,"module":0},{"id":1,"module":1},{"id":3,"module":0},{"id":4,"module":2},{"id":5,"module":3},{"id":6,"module":1},{"id":9,"module":0},{"id":10,"module":3},{"id":12,"module":1},{"id":13,"module":1},{"id":15,"module":5},{"id":17,"module":1},{"id":18,"module":3},{"id":19,"module":1},{"id":20,"module":2},{"id":21,"module":0},{"id":24,"module":3},{"id":26,"module":1},{"id":27,"module":2},{"id":28,"module":1},{"id":30,"module":8},{"id":32,"module":9},{"id":33,"module":9},{"id":34,"module":1},{"id":37,"module":1},{"id":40,"module":1},{"id":31,"module":0},{"id":39,"module":11},{"id":16,"module":2},{"id":35,"module":2},{"id":38,"module":2},{"id":43,"module":2},{"id":44,"module":3},{"id":41,"module":9},{"id":42,"module":12},{"id":23,"module":6},{"id":29,"module":7}], | |
| "links":[{"source":1,"target":7},{"source":1,"target":12},{"source":1,"target":13},{"source":1,"target":26},{"source":1,"target":27},{"source":1,"target":37},{"source":2,"target":0},{"source":2,"target":8},{"source":2,"target":11},{"source":2,"target":31},{"source":2,"target":45},{"source":4,"target":38},{"source":5,"target":18},{"source":5,"target":44},{"source":6,"target":19},{"source":6,"target":28},{"source":6,"target":33},{"source":7,"target":0},{"source":7,"target":3},{"source":7,"target":11},{"source":7,"target":21},{"source":7,"target":31},{"source":9,"target":7},{"source":10,"target":19},{"source":10,"target":44},{"source":13,"target":1},{"source":16,"target":22},{"source":17,"target":1},{"source":17,"target":19},{"source":17,"target":24},{"source":19,"target":7},{"source":19,"target":10},{"source":19,"target":13},{"source":19,"target":17},{"source":19,"target":26},{"source":19,"target":27},{"source":19,"target":28},{"source":19,"target":37},{"source":20,"target":16},{"source":20,"target":28},{"source":20,"target":43},{"source":20,"target":44},{"source":21,"target":37},{"source":22,"target":16},{"source":22,"target":25},{"source":22,"target":28},{"source":22,"target":38},{"source":22,"target":43},{"source":24,"target":18},{"source":24,"target":25},{"source":25,"target":16},{"source":25,"target":27},{"source":26,"target":1},{"source":26,"target":19},{"source":26,"target":28},{"source":27,"target":16},{"source":27,"target":22},{"source":27,"target":43},{"source":28,"target":1},{"source":28,"target":6},{"source":28,"target":19},{"source":28,"target":22},{"source":33,"target":32},{"source":34,"target":26},{"source":35,"target":18},{"source":35,"target":24},{"source":35,"target":27},{"source":35,"target":38},{"source":37,"target":6},{"source":37,"target":13},{"source":37,"target":40},{"source":38,"target":22},{"source":38,"target":25},{"source":38,"target":43},{"source":41,"target":33},{"source":43,"target":25},{"source":43,"target":35},{"source":43,"target":38},{"source":44,"target":16},{"source":44,"target":18},{"source":44,"target":19},{"source":44,"target":24},{"source":44,"target":43},{"source":45,"target":2}]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment