Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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