Graph Visualization (Neo4j and D3)

by Ali Khaled

HTML

<div id="graph"></div>

CSS

#graph {
  width: 400px;
  height: 400px;
  background-color: rgb(248, 249, 251);
  border: 2px solid #eee;
  font-family: sans-serif;
}

.link-type {
  font-size: 0.7em;
}

.Pony {
  fill: rgb(255, 117, 110);
}

.Allen {
  fill: orange;
}

.Caitou {
  fill: rgb(165, 171, 182);
}

.WeChat {
  fill: rgb(109, 206, 158);
}

JavaScript

var data = {
  "nodes": [{
    "name": "Solid 1",
    "label": "Product WeChat",
    "id": 0
  }, {
    "name": "Solid 2",
    "label": "Company Tencent",
    "id": 1
  }, {
    "name": "Solid 3",
    "label": "Person Pony",
    "id": 2
  }, {
    "name": "Solid 1",
    "label": "Person Allen",
    "id": 3
  }, {
    "name": "Solid 1",
    "label": "Solid 1",
    "id": 4
  }],
  "links": [{
    "source": 1,
    "target": 0,
    "type": "Solid 5",
    "since": 2011
  }, {
    "source": 2,
    "target": 1,
    "type": "Solid 1",
    "since": 1997
  }, {
    "source": 3,
    "target": 0,
    "type": "Solid 1",
    "since": 2011
  }, {
    "source": 3,
    "target": 1,
    "type": "Solid 1"
  }, {
    "source": 4,
    "target": 1,
    "type": "Solid 1"
  }, {
    "source": 4,
    "target": 0,
    "type": "Solid 1"
  }]
};

var width = 400,
  height = 400;
// force layout setup
var force = d3.layout.force()
  .charge(-200).linkDistance(200).size([width, height]);

// setup svg div
var svg = d3.select("#graph").append("svg")
  .attr("width", "100%").attr("height", "100%")
  .attr("pointer-events", "all");

// load graph (nodes,links) json from /graph endpoint
(function(graph) {
  force.nodes(graph.nodes).links(graph.links).start();

  // render relationships as lines
  var link = svg.selectAll(".link")
    .data(graph.links).enter()
    .append("g").attr("class", "link");

  var line = link.append("line")
    .attr("stroke", "green");

  var linkText = link.append("text")
    .attr("dx", 8)
    .attr("dy", ".35em")
    .text(function(d) {
      return d.type
    })
    .attr("class", "link-type");

  // render nodes as circles, css-class from label
  var node = svg.selectAll(".node")
    .data(graph.nodes).enter()
    .append("g")
    .attr("class", function(d) {
      return "node " + d.label;
    })
    .call(force.drag);
/*
  node.append("image")
    .attr("xlink:href", "https://upload.wikimedia.org/wikipedia/en/1/18/Dolphin-browser-icon.png")
    .attr("x", -8)
   ...