D3 Playground

by FGRibreau

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

svg {
  border: 1px solid #DDD;
}

JavaScript

var data = [{
  "id": "b5f67d54745d5a1026295357cfabc1dcfe15811a",
  "host": "172.17.0.2:7001",
  "flags": ["master"],
  "master": "-",
  "pingSent": 0,
  "pingRecv": 1458586771427,
  "configEpoch": 2,
  "linkState": "connected",
  "slots": ["5461-10922"],
  "hostname": "172.17.0.2",
  "port": 7001
}, {
  "id": "81a64f17bc06933144d7c439bff55ec3f481db3a",
  "host": "172.17.0.2:7005",
  "flags": ["slave"],
  "master": "bfc3ec1715571565fd30fec4e15f8746bda56313",
  "pingSent": 0,
  "pingRecv": 1458586771427,
  "configEpoch": 6,
  "linkState": "connected",
  "slots": [],
  "hostname": "172.17.0.2",
  "port": 7005
}, {
  "id": "d5007a6584b1ed7f4bc23acbc50c3f634a53e9d7",
  "host": "172.17.0.2:7004",
  "flags": ["slave"],
  "master": "b5f67d54745d5a1026295357cfabc1dcfe15811a",
  "pingSent": 0,
  "pingRecv": 1458586771937,
  "configEpoch": 5,
  "linkState": "connected",
  "slots": [],
  "hostname": "172.17.0.2",
  "port": 7004
}, {
  "id": "d3281de0d563f624d0d68c20958f53267c893911",
  "host": "172.17.0.2:7000",
  "flags": ["myself", "master"],
  "master": "-",
  "pingSent": 0,
  "pingRecv": 0,
  "configEpoch": 1,
  "linkState": "connected",
  "slots": ["0-5460"],
  "hostname": "172.17.0.2",
  "port": 7000
}, {
  "id": "bfc3ec1715571565fd30fec4e15f8746bda56313",
  "host": "172.17.0.2:7002",
  "flags": ["master"],
  "master": "-",
  "pingSent": 0,
  "pingRecv": 1458586772452,
  "configEpoch": 3,
  "linkState": "connected",
  "slots": ["10923-16383"],
  "hostname": "172.17.0.2",
  "port": 7002
}, {
  "id": "670a13d867419a7620c355e1523ea0921c806c78",
  "host": "172.17.0.2:7003",
  "flags": ["slave"],
  "master": "d3281de0d563f624d0d68c20958f53267c893911",
  "pingSent": 0,
  "pingRecv": 1458586772953,
  "configEpoch": 4,
  "linkState": "connected",
  "slots": [],
  "hostname": "172.17.0.2",
  "port": 7003
}];

var W = 500,
  H = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
  .size([W, H])
  .theta(1)
  .on("tick", tick);

var svg =...