Force-directed layout of UKfaculty graph (from R package "igraphdata") in D3.js v4
based on Mike Bostock's code here: https://bl.ocks.org/mbostock/4062045
xxxxxxxxxx
<meta charset="utf-8">
<style>
/* colors based on R: brewer.pal(4, "Set1")
"#E41A1C"
"#377EB8"
"#4DAF4A"
"#984EA3" */
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
body {
font-family: sans-serif;
}
</style>
<body>
<svg width="960" height="500"></svg>
<h2 id="node"></h2>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var filename = 'UKfaculty.json';
var vSize = 7; // vertex size
// decide on a color scheme
var color = d3.scaleOrdinal(d3.schemeCategory10);
// list of colors based on colorbrewer instead
var weight = d3.scaleLinear()
.domain([0, 30])
.range([0, 3]);
// set up the simulation
// a force simulation with links, charge, and a force that keeps the graph centered
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody().strength(-120))
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json(filename, function(error, graph) {
if (error) throw error;
// fix json naming
graph.nodes = graph.vertices;
delete graph.vertices;
graph.links = graph.edges;
delete graph.edges;
console.log(graph);
console.log(graph.links);
console.log(graph.nodes);
graph.nodes.forEach(function(d, i) {
d.id = (i + 1).toString();
// 1 indexed source R
})
// fix source and to fields
graph.links.forEach(function(d, i) {
d.source = d.from.toString();
d.target = d.to.toString();
})
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter()
.append("line")
.attr("stroke-width", function(d) {
return weight(d.weight);
});
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", vSize)
.attr("fill", function(d) {
return color(d.Group);
})
.on('mouseover', function(d) {
vertex = d.id; // counter, index
group = d.Group;
theColor = color(d.Group);
//console.log( d.Group);
d3.select("#node")
.text("v: " + vertex + ", group: " + group)
.style("color", theColor)
})
.on('mouseout', function(d) {
d3.select("#vertex")
.text("")
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
// set up simulation
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation
.force("link")
.links(graph.links);
function ticked() {
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;
});
}
});
// make it dynamic
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
https://d3js.org/d3.v4.min.js