Skip to content

Instantly share code, notes, and snippets.

@johnnygizmo

johnnygizmo/.block

Last active September 29, 2016 14:08
Show Gist options
  • Save johnnygizmo/205ce4d0666903bec8e02ac1274d3237 to your computer and use it in GitHub Desktop.
Save johnnygizmo/205ce4d0666903bec8e02ac1274d3237 to your computer and use it in GitHub Desktop.
Download ZIP
Computer Network Diagram
Raw
.block
license: gpl-3.0
height: 500
Raw
README.md

Computer Network Diagram

Raw
index.html
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id='canvas'></svg>
<style>
.links {
}
.nodes circle {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
.ap {
fill:red;
stroke: blue;
}
.switch {
r:6px;
}
line.fiber {
stroke: lightblue;
stroke-width: 2;
}
line.cat5 {
stroke: grey;
stroke-width: 2;
}
line.wifi {
stroke: pink;
stroke-width: 2;
stroke-dasharray: 5 1;
}
</style>
<script>
var height = 500;
var width = 500;
var simulation = d3.forceSimulation()
.force("link",d3.forceLink().id(function(d){return d.id;}))
.force("charge",d3.forceManyBody().strength(-10))
.force("center", d3.forceCenter(width / 2, height / 2))
;
var svg = d3.select("#canvas").attr("height",height).attr("width",width);
d3.json("networkdata.json",function(error,graph){
if(error) throw error;
console.log(graph);
var link = svg.append("g")
.attr("class","links")
.selectAll("line")
.data(graph.links)
.enter()
.append("line")
.attr("class",function(d){
if(d.Connection_Type == "fiber"){
return "fiber";
} else if (d.Connection_Type == "cat5"){
return "cat5";
} else if (d.Connection_Type == "wifi"){
return "wifi";
}
});
var node = svg.append("g")
.attr("class","nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("class",function(d){
if(d.type == "Access Point"){
return "ap";
} else {
return "switch";
}
})
.attr("r",5)
.attr("title",function(d){return d.name+' '+d.id;});
node.append("svg:title").text(function(d){return d.name+' '+d.id;});
simulation.nodes(graph.nodes).on("tick",ticked);
simulation.force("link").links(graph.links);
function ticked(e) {
//return;
var k = .006;
graph.nodes.forEach(function(o, i) {
if(o.group == 1 ){
o.y += k* (300-o.y);
o.x += k* (300-o.x);
} else {
o.y += k* (100-o.y);
o.x += k* (100-o.x);
}
});
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; });
}
});
</script>
Raw
networkdata.json
{"nodes":[{"id":1540,"name":"","type":"Data Switch","group":2},{"id":1206,"name":"","type":"Data Switch","group":2},{"id":922,"name":"","type":"Access Point","group":2},{"id":1200,"name":"","type":"Data Switch","group":2},{"id":1248,"name":"","type":"Data Switch","group":2},{"id":1209,"name":"","type":"Data Switch","group":2},{"id":1220,"name":"","type":"Data Switch","group":2},{"id":926,"name":"","type":"Access Point","group":2},{"id":927,"name":"","type":"Access Point","group":2},{"id":928,"name":"","type":"Access Point","group":2},{"id":929,"name":"","type":"Access Point","group":2},{"id":930,"name":"","type":"Access Point","group":2},{"id":931,"name":"","type":"Access Point","group":2},{"id":1212,"name":"","type":"Data Switch","group":2},{"id":1383,"name":"","type":"Data Switch","group":2},{"id":1255,"name":"","type":"Data Switch","group":2},{"id":1247,"name":"","type":"Data Switch","group":2},{"id":1249,"name":"","type":"Data Switch","group":2},{"id":932,"name":"","type":"Access Point","group":2},{"id":933,"name":"","type":"Access Point","group":2},{"id":934,"name":"","type":"Access Point","group":2},{"id":935,"name":"","type":"Access Point","group":2},{"id":936,"name":"","type":"Access Point","group":2},{"id":937,"name":"","type":"Access Point","group":2},{"id":938,"name":"","type":"Access Point","group":2},{"id":939,"name":"","type":"Access Point","group":2},{"id":940,"name":"","type":"Access Point","group":2},{"id":941,"name":"","type":"Access Point","group":2},{"id":1044,"name":"","type":"Access Point","group":2},{"id":942,"name":"","type":"Access Point","group":2},{"id":943,"name":"","type":"Access Point","group":2},{"id":944,"name":"","type":"Access Point","group":2},{"id":1213,"name":"","type":"Data Switch","group":2},{"id":945,"name":"","type":"Access Point","group":2},{"id":946,"name":"","type":"Access Point","group":2},{"id":947,"name":"","type":"Access Point","group":2},{"id":948,"name":"","type":"Access Point","group":2},{"id":949,"name":"","type":"Access Point","group":2},{"id":950,"name":"","type":"Access Point","group":2},{"id":1203,"name":"","type":"Data Switch","group":1},{"id":1201,"name":"","type":"Data Switch","group":1},{"id":1199,"name":"","type":"Data Switch","group":1},{"id":1197,"name":"","type":"Data Switch","group":1},{"id":1384,"name":"","type":"Data Switch","group":1},{"id":1385,"name":"","type":"Data Switch","group":1},{"id":1373,"name":"","type":"Data Switch","group":2},{"id":1374,"name":"","type":"Data Switch","group":2},{"id":1375,"name":"","type":"Data Switch","group":2},{"id":951,"name":"","type":"Access Point","group":2},{"id":952,"name":"","type":"Access Point","group":2},{"id":953,"name":"","type":"Access Point","group":2},{"id":954,"name":"","type":"Access Point","group":2},{"id":920,"name":"","type":"Access Point","group":2},{"id":921,"name":"","type":"Access Point","group":2},{"id":916,"name":"","type":"Access Point","group":2},{"id":917,"name":"","type":"Access Point","group":2},{"id":1234,"name":"","type":"Data Switch","group":2},{"id":1205,"name":"","type":"Data Switch","group":2},{"id":1372,"name":"","type":"Data Switch","group":2},{"id":918,"name":"","type":"Access Point","group":2},{"id":919,"name":"","type":"Access Point","group":2},{"id":955,"name":"","type":"Access Point","group":2},{"id":956,"name":"","type":"Access Point","group":2},{"id":1221,"name":"","type":"Data Switch","group":2},{"id":1232,"name":"","type":"Data Switch","group":2},{"id":957,"name":"","type":"Access Point","group":2},{"id":958,"name":"","type":"Access Point","group":2},{"id":959,"name":"","type":"Access Point","group":2},{"id":1389,"name":"","type":"Data Switch","group":2},{"id":1390,"name":"","type":"Data Switch","group":2},{"id":1242,"name":"","type":"Data Switch","group":2},{"id":1243,"name":"","type":"Data Switch","group":2},{"id":964,"name":"","type":"Access Point","group":2},{"id":965,"name":"","type":"Access Point","group":2},{"id":966,"name":"","type":"Access Point","group":2},{"id":967,"name":"","type":"Access Point","group":2},{"id":968,"name":"","type":"Access Point","group":2},{"id":969,"name":"","type":"Access Point","group":2},{"id":970,"name":"","type":"Access Point","group":2},{"id":971,"name":"","type":"Access Point","group":2},{"id":960,"name":"","type":"Access Point","group":2},{"id":961,"name":"","type":"Access Point","group":2},{"id":962,"name":"","type":"Access Point","group":2},{"id":963,"name":"","type":"Access Point","group":2},{"id":1237,"name":"","type":"Data Switch","group":2},{"id":1214,"name":"","type":"Data Switch","group":2},{"id":1256,"name":"","type":"Data Switch","group":2},{"id":972,"name":"","type":"Access Point","group":2},{"id":973,"name":"","type":"Access Point","group":2},{"id":974,"name":"","type":"Access Point","group":2},{"id":975,"name":"","type":"Access Point","group":2},{"id":976,"name":"","type":"Access Point","group":2},{"id":977,"name":"","type":"Access Point","group":2},{"id":978,"name":"","type":"Access Point","group":2},{"id":979,"name":"","type":"Access Point","group":2},{"id":980,"name":"","type":"Access Point","group":2},{"id":981,"name":"","type":"Access Point","group":2},{"id":982,"name":"","type":"Access Point","group":2},{"id":983,"name":"","type":"Access Point","group":2},{"id":984,"name":"","type":"Access Point","group":2},{"id":985,"name":"","type":"Access Point","group":2},{"id":986,"name":"","type":"Access Point","group":2},{"id":1261,"name":"","type":"Data Switch","group":2},{"id":1262,"name":"","type":"Data Switch","group":2},{"id":987,"name":"","type":"Access Point","group":2},{"id":988,"name":"","type":"Access Point","group":2},{"id":1257,"name":"","type":"Data Switch","group":2},{"id":1259,"name":"","type":"Data Switch","group":2},{"id":1207,"name":"","type":"Data Switch","group":2},{"id":989,"name":"","type":"Access Point","group":2},{"id":990,"name":"","type":"Access Point","group":2},{"id":991,"name":"","type":"Access Point","group":2},{"id":992,"name":"","type":"Access Point","group":2},{"id":993,"name":"","type":"Access Point","group":2},{"id":994,"name":"","type":"Access Point","group":2},{"id":995,"name":"","type":"Access Point","group":2},{"id":1230,"name":"","type":"Data Switch","group":2},{"id":1231,"name":"","type":"Data Switch","group":2},{"id":1376,"name":"","type":"Data Switch","group":2},{"id":1215,"name":"","type":"Data Switch","group":2},{"id":1229,"name":"","type":"Data Switch","group":2},{"id":1244,"name":"","type":"Data Switch","group":2},{"id":1238,"name":"","type":"Data Switch","group":2},{"id":1377,"name":"","type":"Data Switch","group":2},{"id":999,"name":"","type":"Access Point","group":2},{"id":1000,"name":"","type":"Access Point","group":2},{"id":1001,"name":"","type":"Access Point","group":2},{"id":1002,"name":"","type":"Access Point","group":2},{"id":1003,"name":"","type":"Access Point","group":1},{"id":1004,"name":"","type":"Access Point","group":1},{"id":1005,"name":"","type":"Access Point","group":1},{"id":1006,"name":"","type":"Access Point","group":1},{"id":1007,"name":"","type":"Access Point","group":1},{"id":1008,"name":"","type":"Access Point","group":1},{"id":1009,"name":"","type":"Access Point","group":1},{"id":1010,"name":"","type":"Access Point","group":1},{"id":1011,"name":"","type":"Access Point","group":1},{"id":1012,"name":"","type":"Access Point","group":1},{"id":1013,"name":"","type":"Access Point","group":1},{"id":1381,"name":"","type":"Data Switch","group":1},{"id":1245,"name":"","type":"Data Switch","group":1},{"id":1236,"name":"","type":"Data Switch","group":1},{"id":1218,"name":"","type":"Data Switch","group":1},{"id":1223,"name":"","type":"Data Switch","group":1},{"id":1211,"name":"","type":"Data Switch","group":1},{"id":1258,"name":"","type":"Data Switch","group":2},{"id":996,"name":"","type":"Access Point","group":2},{"id":997,"name":"","type":"Access Point","group":2},{"id":998,"name":"","type":"Access Point","group":2},{"id":1382,"name":"","type":"Data Switch","group":2},{"id":1252,"name":"","type":"Data Switch","group":2},{"id":1198,"name":"","type":"Data Switch","group":2},{"id":1217,"name":"","type":"Data Switch","group":2},{"id":1219,"name":"","type":"Data Switch","group":2},{"id":1411,"name":"","type":"Data Switch","group":2},{"id":1014,"name":"","type":"Access Point","group":2},{"id":1015,"name":"","type":"Access Point","group":2},{"id":1016,"name":"","type":"Access Point","group":2},{"id":1017,"name":"","type":"Access Point","group":2},{"id":1018,"name":"","type":"Access Point","group":2},{"id":1019,"name":"","type":"Access Point","group":2},{"id":1020,"name":"","type":"Access Point","group":2},{"id":1021,"name":"","type":"Access Point","group":2},{"id":1225,"name":"","type":"Data Switch","group":2},{"id":1226,"name":"","type":"Data Switch","group":2},{"id":1022,"name":"","type":"Access Point","group":2},{"id":1023,"name":"","type":"Access Point","group":2},{"id":1024,"name":"","type":"Access Point","group":2},{"id":1216,"name":"","type":"Data Switch","group":2},{"id":1418,"name":"","type":"Data Switch","group":1},{"id":1395,"name":"","type":"Data Switch","group":1},{"id":1380,"name":"","type":"Data Switch","group":1},{"id":1025,"name":"","type":"Access Point","group":2},{"id":1224,"name":"","type":"Data Switch","group":2},{"id":1246,"name":"","type":"Data Switch","group":2},{"id":1253,"name":"","type":"Data Switch","group":2},{"id":1254,"name":"","type":"Data Switch","group":2},{"id":1035,"name":"","type":"Access Point","group":2},{"id":1036,"name":"","type":"Access Point","group":2},{"id":1037,"name":"","type":"Access Point","group":2},{"id":1038,"name":"","type":"Access Point","group":2},{"id":1039,"name":"","type":"Access Point","group":2},{"id":1040,"name":"","type":"Access Point","group":2},{"id":1263,"name":"","type":"Data Switch","group":2},{"id":1041,"name":"","type":"Access Point","group":2},{"id":1204,"name":"","type":"Data Switch","group":2},{"id":1063,"name":"","type":"Access Point","group":2},{"id":1064,"name":"","type":"Access Point","group":2},{"id":1065,"name":"","type":"Access Point","group":2},{"id":1386,"name":"","type":"Data Switch","group":2},{"id":1387,"name":"","type":"Data Switch","group":2},{"id":1388,"name":"","type":"Data Switch","group":2},{"id":1251,"name":"","type":"Data Switch","group":2},{"id":1235,"name":"","type":"Data Switch","group":2},{"id":1222,"name":"","type":"Data Switch","group":2},{"id":1045,"name":"","type":"Access Point","group":2},{"id":1046,"name":"","type":"Access Point","group":2},{"id":1047,"name":"","type":"Access Point","group":2},{"id":1048,"name":"","type":"Access Point","group":2},{"id":1049,"name":"","type":"Access Point","group":2},{"id":1050,"name":"","type":"Access Point","group":2},{"id":1051,"name":"","type":"Access Point","group":2},{"id":1052,"name":"","type":"Access Point","group":2},{"id":1053,"name":"","type":"Access Point","group":2},{"id":1054,"name":"","type":"Access Point","group":2},{"id":1501,"name":"","type":"Data Switch","group":2},{"id":1260,"name":"","type":"Data Switch","group":2},{"id":1042,"name":"","type":"Access Point","group":2},{"id":1043,"name":"","type":"Access Point","group":2},{"id":1055,"name":"","type":"Access Point","group":2},{"id":1056,"name":"","type":"Access Point","group":2},{"id":1057,"name":"","type":"Access Point","group":2},{"id":1058,"name":"","type":"Access Point","group":2},{"id":1059,"name":"","type":"Access Point","group":2},{"id":1060,"name":"","type":"Access Point","group":2},{"id":1250,"name":"","type":"Data Switch","group":2},{"id":1233,"name":"","type":"Data Switch","group":2},{"id":925,"name":"","type":"Access Point","group":2},{"id":1202,"name":"","type":"Data Switch","group":2},{"id":1228,"name":"","type":"Data Switch","group":2},{"id":923,"name":"","type":"Access Point","group":2},{"id":924,"name":"","type":"Access Point","group":2},{"id":1061,"name":"","type":"Access Point","group":2},{"id":1062,"name":"","type":"Access Point","group":2},{"id":1208,"name":"","type":"Data Switch","group":2},{"id":1239,"name":"","type":"Data Switch","group":2},{"id":1240,"name":"","type":"Data Switch","group":2},{"id":1241,"name":"","type":"Data Switch","group":2},{"id":1026,"name":"","type":"Access Point","group":2},{"id":1027,"name":"","type":"Access Point","group":2},{"id":1028,"name":"","type":"Access Point","group":2},{"id":1029,"name":"","type":"Access Point","group":2},{"id":1030,"name":"","type":"Access Point","group":2},{"id":1031,"name":"","type":"Access Point","group":2},{"id":1032,"name":"","type":"Access Point","group":2},{"id":1033,"name":"","type":"Access Point","group":2},{"id":1034,"name":"","type":"Access Point","group":2},{"id":1082,"name":"","type":"Access Point","group":2},{"id":1410,"name":"","type":"Data Switch","group":2},{"id":1210,"name":"","type":"Data Switch","group":2},{"id":1066,"name":"","type":"Access Point","group":2},{"id":1067,"name":"","type":"Access Point","group":2},{"id":1068,"name":"","type":"Access Point","group":2},{"id":1069,"name":"","type":"Access Point","group":2},{"id":1070,"name":"","type":"Access Point","group":2},{"id":1071,"name":"","type":"Access Point","group":2},{"id":1072,"name":"","type":"Access Point","group":2},{"id":1073,"name":"","type":"Access Point","group":2},{"id":1074,"name":"","type":"Access Point","group":2},{"id":1075,"name":"","type":"Access Point","group":2},{"id":1076,"name":"","type":"Access Point","group":2},{"id":1077,"name":"","type":"Access Point","group":2},{"id":1078,"name":"","type":"Access Point","group":2},{"id":1079,"name":"","type":"Access Point","group":2},{"id":1080,"name":"","type":"Access Point","group":2},{"id":1081,"name":"","type":"Access Point","group":2},{"id":1227,"name":"","type":"Data Switch","group":2},{"id":1264,"name":"","type":"Data Switch","group":2},{"id":1267,"name":"","type":"Data Switch","group":2},{"id":1083,"name":"","type":"Access Point","group":2}],"links":[{"source":1197,"target":1255,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1224,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1238,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1263,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1223,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1245,"value":1,"Connection_Type":"fiber"},{"source":1197,"target":1211,"value":1,"Connection_Type":"fiber"},{"source":1223,"target":1236,"value":1,"Connection_Type":"cat5"},{"source":1245,"target":1218,"value":1,"Connection_Type":"cat5"},{"source":1218,"target":1381,"value":1,"Connection_Type":"cat5"},{"source":1218,"target":1380,"value":1,"Connection_Type":"cat5"},{"source":1380,"target":1395,"value":1,"Connection_Type":"cat5"},{"source":1197,"target":1227,"value":1,"Connection_Type":"fiber"}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment