This example is based on data from Phoibos2 workshop's identifier counting group. For more information, see https://github.com/jhpoelen/id-link-template .
Last active
March 1, 2016 02:03
-
-
Save jhpoelen/1fbfc8022ebc8b435221 to your computer and use it in GitHub Desktop.
Phoibos2 Specimen Identifier Graph (manual only)
This file contains 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 |
This file contains 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
| .DS_Store |
This file contains 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"> | |
| <style> | |
| .circle { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| stroke-opacity: 0.5; | |
| fill-opacity: 0.5; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| font: 0.1em sans-serif; | |
| } | |
| .link { | |
| stroke: #999; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var force = d3.layout.force() | |
| .charge(-20) | |
| .linkDistance(40) | |
| .size([width, height]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.csv("https://rawgit.com/jhpoelen/id-link-template/master/id_links_manual.csv") | |
| .row(function(d) { return {source: d.start_id, target: d.end_id}; }) | |
| .get(function(error, rawLinks) { | |
| if (error) throw error; | |
| var nodeById = d3.map(); | |
| var links = rawLinks.filter(function(link, i) { return link.source !== undefined && link.source.length > 0 && link.target !== undefined && link.target.length > 0; }); | |
| var nodes = links.reduce(function(agg, link) { agg.push(link.source); agg.push(link.target); return agg; }, []); | |
| nodes = nodes.filter(function(node, i) { return nodes.indexOf(node) == i; }); | |
| nodes = nodes.map(function(node) { return { id: node }; }); | |
| var graph = { nodes: nodes, links: links}; | |
| graph.nodes.forEach(function(node) { | |
| nodeById.set(node.id, node); | |
| }); | |
| graph.links.forEach(function(link) { | |
| link.source = nodeById.get(link.source); | |
| link.target = nodeById.get(link.target); | |
| }); | |
| force | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .start(); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("line") | |
| .attr("class", "link"); | |
| var nodeEnter = svg.selectAll(".node") | |
| .data(graph.nodes) | |
| .enter(); | |
| var node = nodeEnter.append("g") | |
| .call(force.drag); | |
| var circle = node | |
| .append("circle") | |
| .attr("class", "circle") | |
| .attr("r", 4) | |
| .style("fill", function(d) { return d.id; }) | |
| .append("svg:title") | |
| .text(function(d) { return d.id; }); | |
| //var text = node | |
| // .append("text") | |
| // .text(function(d) { return d.id;}); | |
| force.on("tick", function() { | |
| link.attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment