Skip to content

Instantly share code, notes, and snippets.

@Ognami

Ognami/data.json

Created September 27, 2019 15:32
Show Gist options
  • Save Ognami/9dd4111eb793eec1645e9cdc7d4ba5b0 to your computer and use it in GitHub Desktop.
Save Ognami/9dd4111eb793eec1645e9cdc7d4ba5b0 to your computer and use it in GitHub Desktop.
Download ZIP
Network Graph with Overlapping Nodes (v4)
Raw
data.json
{
"nodes": [
{"id": "1"},
{"id": "2"},
{"id": "3"},
{"id": "4"},
{"id": "5"},
{"id": "6"},
{"id": "7"},
{"id": "8"},
{"id": "9"},
{"id": "10"},
{"id": "11"},
{"id": "12"},
{"id": "13"},
{"id": "14"},
{"id": "15"},
{"id": "16"},
{"id": "17"},
{"id": "18"},
{"id": "19"},
{"id": "20"}
],
"links": [
{"source": "1", "target": "2"},
{"source": "1", "target": "3"},
{"source": "1", "target": "4"},
{"source": "1", "target": "5"},
{"source": "1", "target": "6"},
{"source": "1", "target": "7"},
{"source": "1", "target": "8"},
{"source": "1", "target": "9"},
{"source": "1", "target": "10"},
{"source": "1", "target": "11"},
{"source": "1", "target": "12"},
{"source": "1", "target": "13"},
{"source": "1", "target": "14"},
{"source": "1", "target": "15"},
{"source": "1", "target": "16"},
{"source": "1", "target": "17"},
{"source": "1", "target": "18"},
{"source": "1", "target": "19"},
{"source": "1", "target": "20"}
]
}
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>Network Overlap Nodes</title>
</head>
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.node circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<body>
<div id="network"></div>
<!--<svg id="chart" width="860" height="600"></svg>-->
<!--<div id="information"></div>-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
/***** Definitions *****/
const width = 860;
const height = 600;
const radius = "30",
maxradius = "34";
const color = d3.scaleOrdinal()
.range(["#111f33", "#5e88a2", "#d7e3ea"]);
const svg = d3.select("#network").append("svg")
.attr("width", width)
.attr("height", height)
.style("margin-left", 100);
let link = svg.append("g")
.attr("class", "links")
.selectAll("line");
let node = svg.append("g")
.attr("class", "nodes")
.selectAll("g.node");
let simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody().distanceMax(height/2))
.force("center", d3.forceCenter(width/2, height/2));
/***** Charting *****/
d3.json("data.json", function(error, data) {
if (error) throw error;
link = link.data(data.links);
link.exit().remove();
link = link.enter().append("line")
.attr("stroke-width", function(d) { return 2; })
.merge(link);
node = node.data(data.nodes);
node.exit().remove();
node = node.enter().append("g")
.attr("class", "node")
.merge(node)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("circle")
.attr("r", radius)
.attr("fill", function(d) { return 1; });
simulation
.nodes(data.nodes)
.on("tick", ticked);;
simulation.force("link")
.links(data.links);
simulation.alpha(1).restart();
});
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("transform", function(d) {
var boundx = Math.max(maxradius, Math.min(width - maxradius, d.x));
var boundy = Math.max(maxradius, Math.min(height - maxradius, d.y));
return "translate(" + boundx + "," + boundy + ")";
});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.6).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = Math.max(maxradius, Math.min(width - maxradius, d3.event.x));
d.fy = Math.max(maxradius, Math.min(height - maxradius, d3.event.y));
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment