Last active
September 20, 2018 13:46
-
-
Save eSlivinski/d6851d1f0dbdde9d16a052a4ea434d7f to your computer and use it in GitHub Desktop.
connectors
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
{ | |
"nodes": [ | |
{"id": "MP-1", "type": "MP" }, | |
{"id": "MP-2", "type": "MP" }, | |
{"id": "SP-1", "type": "SP" }, | |
{"id": "SP-2", "type": "SP" }, | |
{"id": "SP-3", "type": "SP" }, | |
{"id": "SP-4", "type": "SP" }, | |
{"id": "SP-5", "type": "SP" }, | |
{"id": "SP-6", "type": "SP" }, | |
{"id": "SP-7", "type": "SP" }, | |
{"id":"MP-1-1", "type": "port"}, | |
{"id":"MP-1-2", "type": "port"}, | |
{"id":"MP-1-3", "type": "port"}, | |
{"id":"MP-1-4", "type": "port"}, | |
{"id":"MP-1-5", "type": "port"}, | |
{"id":"MP-1-6", "type": "port"}, | |
{"id":"MP-1-7", "type": "port"}, | |
{"id":"MP-1-8", "type": "port"}, | |
{"id":"MP-2-1", "type": "port"}, | |
{"id":"MP-2-2", "type": "port"}, | |
{"id":"MP-2-3", "type": "port"}, | |
{"id":"MP-2-4", "type": "port"}, | |
{"id":"MP-2-5", "type": "port"}, | |
{"id":"MP-2-6", "type": "port"}, | |
{"id":"MP-2-7", "type": "port"}, | |
{"id":"MP-2-8", "type": "port"}, | |
{"id":"SP-1-1", "type": "port"}, | |
{"id":"SP-1-2", "type": "port"}, | |
{"id":"SP-1-3", "type": "port"}, | |
{"id":"SP-1-4", "type": "port"}, | |
{"id":"SP-1-5", "type": "port"}, | |
{"id":"SP-1-6", "type": "port"}, | |
{"id":"SP-2-1", "type": "port"}, | |
{"id":"SP-2-2", "type": "port"}, | |
{"id":"SP-2-3", "type": "port"}, | |
{"id":"SP-2-4", "type": "port"}, | |
{"id":"SP-2-5", "type": "port"}, | |
{"id":"SP-2-6", "type": "port"}, | |
{"id":"SP-2-7", "type": "port"}, | |
{"id":"SP-2-8", "type": "port"}, | |
{"id":"SP-3-1", "type": "port"}, | |
{"id":"SP-3-2", "type": "port"}, | |
{"id":"SP-3-3", "type": "port"}, | |
{"id":"SP-3-4", "type": "port"}, | |
{"id":"SP-3-5", "type": "port"}, | |
{"id":"SP-3-6", "type": "port"}, | |
{"id":"SP-3-7", "type": "port"}, | |
{"id":"SP-3-8", "type": "port"}, | |
{"id":"SP-4-1", "type": "port"}, | |
{"id":"SP-4-2", "type": "port"}, | |
{"id":"SP-4-3", "type": "port"}, | |
{"id":"SP-4-4", "type": "port"}, | |
{"id":"SP-4-5", "type": "port"}, | |
{"id":"SP-4-6", "type": "port"}, | |
{"id":"SP-4-7", "type": "port"}, | |
{"id":"SP-4-8", "type": "port"}, | |
{"id":"SP-5-1", "type": "port"}, | |
{"id":"SP-5-2", "type": "port"}, | |
{"id":"SP-5-3", "type": "port"}, | |
{"id":"SP-5-4", "type": "port"}, | |
{"id":"SP-5-5", "type": "port"}, | |
{"id":"SP-5-6", "type": "port"}, | |
{"id":"SP-5-7", "type": "port"}, | |
{"id":"SP-5-8", "type": "port"}, | |
{"id":"SP-6-1", "type": "port"}, | |
{"id":"SP-6-2", "type": "port"}, | |
{"id":"SP-6-3", "type": "port"}, | |
{"id":"SP-6-4", "type": "port"}, | |
{"id":"SP-6-5", "type": "port"}, | |
{"id":"SP-6-6", "type": "port"}, | |
{"id":"SP-6-7", "type": "port"}, | |
{"id":"SP-6-8", "type": "port"}, | |
{"id":"SP-7-1", "type": "port"}, | |
{"id":"SP-7-2", "type": "port"}, | |
{"id":"SP-7-3", "type": "port"}, | |
{"id":"SP-7-4", "type": "port"}, | |
{"id":"SP-7-5", "type": "port"}, | |
{"id":"SP-7-6", "type": "port"}, | |
{"id":"SP-7-7", "type": "port"}, | |
{"id":"SP-7-8", "type": "port"} | |
], | |
"links": [ | |
{"source":"MP-1","target":"MP-1-1"}, | |
{"source":"MP-1","target":"MP-1-2"}, | |
{"source":"MP-1","target":"MP-1-3"}, | |
{"source":"MP-1","target":"MP-1-4"}, | |
{"source":"MP-1","target":"MP-1-5"}, | |
{"source":"MP-1","target":"MP-1-6"}, | |
{"source":"MP-1","target":"MP-1-7"}, | |
{"source":"MP-1","target":"MP-1-8"}, | |
{"source":"MP-2","target":"MP-2-1"}, | |
{"source":"MP-2","target":"MP-2-2"}, | |
{"source":"MP-2","target":"MP-2-3"}, | |
{"source":"MP-2","target":"MP-2-4"}, | |
{"source":"MP-2","target":"MP-2-5"}, | |
{"source":"MP-2","target":"MP-2-6"}, | |
{"source":"MP-2","target":"MP-2-7"}, | |
{"source":"MP-2","target":"MP-2-8"}, | |
{"source":"SP-1","target":"SP-1-1"}, | |
{"source":"SP-1","target":"SP-1-2"}, | |
{"source":"SP-1","target":"SP-1-3"}, | |
{"source":"SP-1","target":"SP-1-4"}, | |
{"source":"SP-1","target":"SP-1-5"}, | |
{"source":"SP-1","target":"SP-1-6"}, | |
{"source":"SP-2","target":"SP-2-1"}, | |
{"source":"SP-2","target":"SP-2-2"}, | |
{"source":"SP-2","target":"SP-2-3"}, | |
{"source":"SP-2","target":"SP-2-4"}, | |
{"source":"SP-2","target":"SP-2-5"}, | |
{"source":"SP-2","target":"SP-2-6"}, | |
{"source":"SP-2","target":"SP-2-7"}, | |
{"source":"SP-2","target":"SP-2-8"}, | |
{"source":"SP-3","target":"SP-3-1"}, | |
{"source":"SP-3","target":"SP-3-2"}, | |
{"source":"SP-3","target":"SP-3-3"}, | |
{"source":"SP-3","target":"SP-3-4"}, | |
{"source":"SP-3","target":"SP-3-5"}, | |
{"source":"SP-3","target":"SP-3-6"}, | |
{"source":"SP-3","target":"SP-3-7"}, | |
{"source":"SP-3","target":"SP-3-8"}, | |
{"source":"SP-4","target":"SP-4-1"}, | |
{"source":"SP-4","target":"SP-4-2"}, | |
{"source":"SP-4","target":"SP-4-3"}, | |
{"source":"SP-4","target":"SP-4-4"}, | |
{"source":"SP-4","target":"SP-4-5"}, | |
{"source":"SP-4","target":"SP-4-6"}, | |
{"source":"SP-4","target":"SP-4-7"}, | |
{"source":"SP-4","target":"SP-4-8"}, | |
{"source":"SP-5","target":"SP-5-1"}, | |
{"source":"SP-5","target":"SP-5-2"}, | |
{"source":"SP-5","target":"SP-5-3"}, | |
{"source":"SP-5","target":"SP-5-4"}, | |
{"source":"SP-5","target":"SP-5-5"}, | |
{"source":"SP-5","target":"SP-5-6"}, | |
{"source":"SP-5","target":"SP-5-7"}, | |
{"source":"SP-5","target":"SP-5-8"}, | |
{"source":"SP-6","target":"SP-6-1"}, | |
{"source":"SP-6","target":"SP-6-2"}, | |
{"source":"SP-6","target":"SP-6-3"}, | |
{"source":"SP-6","target":"SP-6-4"}, | |
{"source":"SP-6","target":"SP-6-5"}, | |
{"source":"SP-6","target":"SP-6-6"}, | |
{"source":"SP-6","target":"SP-6-7"}, | |
{"source":"SP-6","target":"SP-6-8"}, | |
{"source":"SP-7","target":"SP-7-1"}, | |
{"source":"SP-7","target":"SP-7-2"}, | |
{"source":"SP-7","target":"SP-7-3"}, | |
{"source":"SP-7","target":"SP-7-4"}, | |
{"source":"SP-7","target":"SP-7-5"}, | |
{"source":"SP-7","target":"SP-7-6"}, | |
{"source":"SP-7","target":"SP-7-7"}, | |
{"source":"SP-7","target":"SP-7-8"}, | |
{"source":"SP-1-1","target":"SP-2"}, | |
{"source":"SP-1-2","target":"SP-3"}, | |
{"source":"SP-1-3","target":"SP-4"}, | |
{"source":"SP-1-4","target":"SP-5"}, | |
{"source":"SP-1-5","target":"SP-6"}, | |
{"source":"SP-1-6","target":"SP-7"}, | |
{"source":"SP-2-1","target":"MP-1-1"}, | |
{"source":"SP-2-2","target":"MP-1-2"}, | |
{"source":"SP-2-3","target":"MP-1-3"}, | |
{"source":"SP-2-4","target":"MP-1-4"}, | |
{"source":"SP-3-5","target":"MP-1-5"}, | |
{"source":"SP-3-6","target":"MP-1-6"}, | |
{"source":"SP-3-7","target":"MP-1-7"}, | |
{"source":"SP-3-8","target":"MP-1-8"}, | |
{"source":"SP-5-1","target":"MP-2-1"}, | |
{"source":"SP-5-2","target":"MP-2-2"}, | |
{"source":"SP-5-3","target":"MP-2-3"}, | |
{"source":"SP-5-4","target":"MP-2-4"}, | |
{"source":"SP-5-5","target":"MP-2-5"}, | |
{"source":"SP-5-6","target":"MP-2-6"}, | |
{"source":"SP-5-7","target":"MP-2-7"}, | |
{"source":"SP-5-8","target":"MP-2-8"} | |
] | |
} |
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> | |
.links line { | |
stroke: #999; | |
stroke-opacity: 0.6; | |
} | |
.nodes circle { | |
stroke: #fff; | |
stroke-width: 1.5px; | |
fill: #eee; | |
} | |
.nodes circle.MP { | |
fill: gold; | |
} | |
.nodes circle.SP { | |
fill: yellowgreen; | |
} | |
</style> | |
<svg width="960" height="600"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var color = d3.scaleOrdinal(d3.schemeCategory20); | |
var simulation = d3.forceSimulation() | |
.force("link", d3.forceLink().id(function(d) { return d.id; })) | |
.force("charge", d3.forceManyBody()) | |
.force("center", d3.forceCenter(width / 2, height / 2)); | |
d3.json("data.json", function(error, graph) { | |
if (error) throw error; | |
var link = svg.append("g") | |
.attr("class", "links") | |
.selectAll("line") | |
.data(graph.links) | |
.enter().append("line") | |
.attr("stroke-width", function(d) { return Math.sqrt(d.value); }); | |
var node = svg.append("g") | |
.attr("class", "nodes") | |
.selectAll("circle") | |
.data(graph.nodes) | |
.enter().append("circle") | |
.attr("r", function(d) { return d.type === 'port' ? 3 : 10; }) | |
.attr("class", function(d) { return d.type }) | |
.call(d3.drag() | |
.on("start", dragstarted) | |
.on("drag", dragged) | |
.on("end", dragended)); | |
node.append("title") | |
.text(function(d) { return d.id; }); | |
simulation | |
.nodes(graph.nodes) | |
.on("tick", ticked); | |
simulation.force("link") | |
.links(graph.links); | |
function ticked() { | |
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("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
} | |
}); | |
function dragstarted(d) { | |
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
d.fx = d.x; | |
d.fy = d.y; | |
} | |
function dragged(d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
} | |
function dragended(d) { | |
if (!d3.event.active) simulation.alphaTarget(0); | |
d.fx = null; | |
d.fy = null; | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment