Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/index.html

Last active March 8, 2016 01:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/c1196fd21b4c7ac435f7 to your computer and use it in GitHub Desktop.
Save emeeks/c1196fd21b4c7ac435f7 to your computer and use it in GitHub Desktop.
Download ZIP
Clockface Edges
Raw
readme.md

Edges represented only as a pointer from one node to another. They end up as vector edges? Clockface edges?

Raw
index.html
<!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>
Raw
network.json
{"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