Skip to content

Instantly share code, notes, and snippets.

@susielu
Created March 13, 2014 10:59
Show Gist options
  • Save susielu/9526340 to your computer and use it in GitHub Desktop.
Save susielu/9526340 to your computer and use it in GitHub Desktop.
Gephi + d3.js. Fixed network, dynamic labels.

This example creates a fixed network graph with dynamic labels using d3.js. The network layout and placement of the nodes and edges was calculated in Gephi and then exported as the graph.json file.

This was inspired from these gists by Mike Bostock: Force-Directed Graph, Multi-Foci Force Layout

{"edges":[
{"source":6, "target":20},
{"source":12, "target":0},
{"source":23, "target":13},
{"source":3, "target":1},
{"source":7, "target":20},
{"source":25, "target":3},
{"source":4, "target":11},
{"source":16, "target":20},
{"source":9, "target":0},
{"source":25, "target":13},
{"source":16, "target":4},
{"source":4, "target":13},
{"source":5, "target":15},
{"source":4, "target":17},
{"source":9, "target":25},
{"source":4, "target":25},
{"source":16, "target":8},
{"source":6, "target":5},
{"source":6, "target":18},
{"source":4, "target":5},
{"source":9, "target":19},
{"source":9, "target":20},
{"source":4, "target":14},
{"source":9, "target":5},
{"source":4, "target":15},
{"source":12, "target":3},
{"source":0, "target":1},
{"source":9, "target":17},
{"source":17, "target":15},
{"source":23, "target":18},
{"source":16, "target":5},
{"source":4, "target":23},
{"source":24, "target":6},
{"source":9, "target":14},
{"source":16, "target":6}
],
"nodes":[
{"y":134.324462891,"x":-113.536003113,"id":20,"label":"node1"},
{"y":51.229637146,"x":155.395904541,"id":25,"label":"node2"},
{"y":46.6591949463,"x":-207.792068481,"id":13,"label":"node3"},
{"y":27.60389328,"x":133.966064453,"id":2,"label":"node4"},
{"y":126.531860352,"x":-26.9523639679,"id":24,"label":"node5"},
{"y":163.070098877,"x":-86.976524353,"id":7,"label":"node6"},
{"y":-221.938049316,"x":-80.8975143433,"id":21,"label":"node7"},
{"y":52.953651428,"x":-95.7600021362,"id":4,"label":"node8"},
{"y":-12.805847168,"x":189.149490356,"id":12,"label":"node9"},
{"y":141.481781006,"x":-60.2801208496,"id":6,"label":"node10"},
{"y":-81.550979614,"x":112.394180298,"id":3,"label":"node11"},
{"y":23.1120529175,"x":225.898086548,"id":17,"label":"node12"},
{"y":-87.168624878,"x":-78.1010284424,"id":14,"label":"node13"},
{"y":65.189682007,"x":-212.771820068,"id":11,"label":"node14"},
{"y":-176.750244141,"x":58.5323791504,"id":1,"label":"node15"},
{"y":-52.795600891,"x":154.782455444,"id":0,"label":"node16"},
{"y":176.595153809,"x":30.1155319214,"id":8,"label":"node17"},
{"y":84.641799927,"x":185.32460022,"id":19,"label":"node18"},
{"y":-157.174133301,"x":-258.442382812,"id":10,"label":"node19"},
{"y":77.960739136,"x":53.8596191406,"id":9,"label":"node20"},
{"y":67.204818726,"x":-68.0021133423,"id":5,"label":"node21"},
{"y":50.07220459,"x":-2.34326410294,"id":18,"label":"node22"},
{"y":37.9620285034,"x":-138.772369385,"id":23,"label":"node23"},
{"y":94.446624756,"x":-48.3559761047,"id":16,"label":"node24"},
{"y":155.012207031,"x":-64.1417312622,"id":22,"label":"node25"},
{"y":21.2733154297,"x":110.682693481,"id":15,"label":"node26"}
]}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node circle {
fill: rgb(168, 200, 248);
stroke: grey;
stroke-width: 1px;
}
.link {
stroke: black;
stroke-width: 1px;
opacity: .2;
}
.label {
font-family: Arial;
font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 800,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("graph.json", function(error, json){
var nodes = json.nodes.map(function(d){
return {
'index' : d.id,
'x' : d.x,
'y' : d.y,
'fixed': true,
'label' : d.label
}
})
var links = json.edges.map(function(d){
return {
'source': parseInt(d.source),
'target': parseInt(d.target)
}
})
var foci = [],
labelNodes = [];
for(var i=0; i < nodes.length; i++){
var center = {x: nodes[i].x, y: nodes[i].y}
foci.push(center);
center["label"] = nodes[i].label;
center["index"] = nodes[i].index;
labelNodes.push(center)
};
var force = d3.layout.force()
.nodes(nodes)
.links(links)
force.start();
var force2 = d3.layout.force()
.nodes(labelNodes)
.links([])
.gravity(0)
.charge(-3)
.on("tick", tick)
force2.start();
svg.append("g")
.attr("class", "network")
.attr("transform", "translate(430, 270)");
var network = svg.selectAll("g.network")
network.append("g")
.selectAll("line.link")
.data(links).enter()
.append("line")
.attr("class", "link")
var link = svg.selectAll(".link")
network.append("g")
.attr("class", "nodes")
.selectAll("g.node")
.data(force.nodes())
.enter()
.append("svg:g")
.attr("class", "node")
var node = svg.selectAll("g.node")
node.append("svg:circle")
.attr("r", function(d) { return 5; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
network.append("g").attr("class", "labels")
.selectAll("g.label")
.data(labelNodes)
.enter()
.append("svg:text")
.attr("class", "label")
.text(function(d) {return d.label;})
var label = svg.selectAll(".labels text")
function tick(test) {
var k = .1* test.alpha;
labelNodes.forEach(function(d){
d.y += (labelNodes[d.index].y - d.y) * k;
d.x += (labelNodes[d.index].x - d.x) * k;
});
label.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
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; });
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment