Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active September 4, 2019 01:08
Show Gist options
  • Save tomshanley/9c6636e39db7ddfe710f484e9ee40cd7 to your computer and use it in GitHub Desktop.
Save tomshanley/9c6636e39db7ddfe710f484e9ee40cd7 to your computer and use it in GitHub Desktop.
Download ZIP
Dagre fish
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.js"></script>
<style>
body { margin:0;top:0;right:0;bottom:0;left:0; }
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #333;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path.path {
stroke: #333;
fill: none;
stroke-width: 1.5px;
opacity: 0.7
}
.arrowhead {
stroke: blue;
fill: blue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<svg id="svg" width=960 height=600></svg>
<script>
// Create the input graph
var graph = new dagreD3.graphlib.Graph().setGraph({});
graph.setGraph({
nodesep: 25,
ranksep: 82,
rankdir: "LR",
marginx: 20,
marginy: 20
});
let fish = [
"Leptodora",
"Heterocope",
"Diapomus",
"Eurytemora",
"Bosmina",
"Daphnia",
"Sikloja",
"Gos",
"Nors",
"Lax",
"Cyclops",
"Bythotrephes",
"Sik",
"UNKNOWN",
"Mort",
"Pontoporeia",
"Algae",
"Gers",
"Chironomidae",
"Pallasea",
"Gammaracanthus",
"Braxen",
"Lake",
"Oligochaeta"
]
let links = [{source:'Leptodora', target:'Nors'},
{source:'Heterocope', target:'Sikloja'},
{source:'Heterocope', target:'Nors'},
{source:'Diapomus', target:'Sikloja'},
{source:'Eurytemora', target:'Sikloja'},
{source:'Bosmina', target:'Sikloja'},
{source:'Daphnia', target:'Sikloja'},
{source:'Bythotrephes', target:'Sikloja'},
{source:'Sikloja', target:'Gos'},
{source:'Sikloja', target:'Lax'},
{source:'Nors', target:'Gos'},
{source:'Nors', target:'Lax'},
{source:'Bythotrephes', target:'Mort'},
{source:'Bythotrephes', target:'Nors'},
{source:'UNKNOWN', target:'Nors'},
{source:'Bythotrephes', target:'Sik'},
{source:'Chironomidae', target:'Sik'},
{source:'Pontoporeia', target:'Sik'},
{source:'Pontoporeia', target:'Gers'},
{source:'Chironomidae', target:'Gers'},
{source:'Chironomidae', target:'Braxen'},
{source:'Pallasea', target:'Nors'},
{source:'Pallasea', target:'Lake'},
{source:'Pallasea', target:'Gers'},
{source:'Pallasea', target:'Braxen'},
{source:'Algae', target:'Braxen'},
{source:'Oligochaeta', target:'Braxen'},
{source:'Gammaracanthus', target:'Nors'},
{source:'Gammaracanthus', target:'Lake'},
{source:'Cyclops', target:'Sik'},
{source:'UNKNOWN', target:'Lake'},
{source:'Gers', target:'Lake'},
{source:'Nors', target:'Lake'}]
fish.forEach(function(d){
graph.setNode(d, {});
})
graph.nodes().forEach(function(v) {
var node = graph.node(v);
node.rx = node.ry = 5;
});
links.forEach(function(l){
graph.setEdge(l.source, l.target, {
curve: d3.curveBasis,
minlen: 2
});
})
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
inner = svg.append("g");
// Run the renderer. This is what draws the final graph.
render(inner, graph);
// Center the graph
var xCenterOffset = (svg.attr("width") - graph.graph().width) / 2;
inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", graph.graph().height + 40);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment