Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Created April 12, 2017 15:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jadiehm/52e1abdb457b2fb520e9530b6bea31ea to your computer and use it in GitHub Desktop.
Save jadiehm/52e1abdb457b2fb520e9530b6bea31ea to your computer and use it in GitHub Desktop.
Download ZIP
Draggable force network diagram
Raw
index.html
<!doctype html>
<html lang='en-GB'>
<head></head>
<style>
p {
font-family: sans-serif;
font-size: 14px;
}
/*template styles*/
.gia-chart-wrapper {
max-width: 620px;
margin: 0 auto;
}
/*network styles*/
.links {
stroke: #4bc6df;
stroke-opacity: 0.2;
}
.imp-links {
stroke: #005689;
stroke-opacity: 0.5;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.thiel-label {
font-family: sans-serif;
fill: #ffffff;
font-weight: 700;
font-size: 16px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.big-label {
font-family: sans-serif;
fill: #333333;
font-weight: 700;
font-size: 14px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.small-label {
font-family: sans-serif;
fill: #333333;
font-size: 12px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
</style>
<body>
<main>
<div class='gia-chart-wrapper'>
<div class='gia-chart'></div>
</div>
</main>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//Margin conventions
var margin = {top: 0, right: 0, bottom: 0, left: 0};
var widther = d3.select(".gia-chart").node().clientWidth;
var width = widther - margin.left - margin.right,
height = 620 - margin.top - margin.bottom;
//Appends the svg to the chart-container div
var svg = d3.select(".gia-chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Sets color scale
var color = d3.scaleOrdinal(["#005689", "#4bc6df", "#dcdcdc"]);
//Sets force between bubbles
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))
.force("charge", d3.forceManyBody().strength(-360))
.force("collide", d3.forceCollide().radius(function(d) { return (d.connections*2) + 30; }).iterations(2))
.force("center", d3.forceCenter(width / 2, height / 2));
//Loads the data
d3.json("links.json", function(error, graph) {
if (error) throw error;
//Establishes link
var link = svg.append("g")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); })
.attr("class", function(d) {
if(d.value === 1) {
return "links";
}
else {
return "imp-links";
}
});
//Establishes bubble
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", function(d) { return d.connections * 2; })
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var node_text = svg.selectAll(".nodetext")
.data(graph.nodes)
.enter().append("text")
.attr("class", function(d) {
if(d.group === 1 & d.id === "Peter Thiel") {
return "thiel-label"
}
else if(d.group === 1) {
return "big-label"
}
else {
return "small-label"
}
})
.attr("text-anchor", "middle")
.attr("dx", -20)
.attr("dy", function(d) {
if(d.group === 1 & d.id === "Peter Thiel") {
return 35;
}
else if (d.group === 1) {
return 45
}
else {
return 45;
}
})
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
//Places and sizes elements
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 = Math.max(d.connections, Math.min((width - 20) - d.connections, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(d.connections, Math.min((height - 20) - d.connections, d.y)); });
node_text
.attr("x", function(d) { return d.x + 20; })
.attr("y", function(d) { return d.y - 30; });
}
});
//Drag events
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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment