Created
April 12, 2017 15:20
-
-
Save jadiehm/52e1abdb457b2fb520e9530b6bea31ea to your computer and use it in GitHub Desktop.
Draggable force network diagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"nodes": [ | |
{"id": "Peter Thiel", "group": 1, "connections": 32}, | |
{"id": "Keith Rabois", "group": 1, "connections": 10}, | |
{"id": "David O. Sacks", "group": 1, "connections": 10}, | |
{"id": "Elon Musk", "group": 1, "connections": 5}, | |
{"id": "Jim O'Neill", "group": 1, "connections": 3}, | |
{"id": "Mark Woolway", "group": 1, "connections": 5}, | |
{"id": "Kevin Harrington", "group": 1, "connections": 4}, | |
{"id": "Trae Stephens", "group": 1, "connections": 3}, | |
{"id": "Blake Masters", "group": 1, "connections": 4}, | |
{"id": "Joe Lonsdale", "group": 1, "connections": 6}, | |
{"id": "Jack Abraham", "group": 1, "connections": 2}, | |
{"id": "Scott Banister", "group": 1, "connections": 3}, | |
{"id": "Ken Howery", "group": 1, "connections": 11}, | |
{"id": "Stephen Cohen", "group": 1, "connections": 3}, | |
{"id": "Eric Jackson", "group": 1, "connections": 2}, | |
{"id": "Rob Morrow", "group": 1, "connections": 2}, | |
{"id": "Trump Transition", "group": 2, "connections": 9}, | |
{"id": "Stanford Review", "group": 2, "connections": 7}, | |
{"id": "PayPal", "group": 2, "connections": 9}, | |
{"id": "Founders Fund", "group": 2, "connections": 4}, | |
{"id": "Clarium Capital", "group": 2, "connections": 7}, | |
{"id": "Mithril", "group": 2, "connections": 2}, | |
{"id": "Thiel Capital", "group": 2, "connections": 5}, | |
{"id": "Palantir", "group": 2, "connections": 7}, | |
{"id": "Reddit", "group": 2, "connections": 2}, | |
{"id": "Lyft", "group": 2, "connections": 2}, | |
{"id": "Khosla Ventures", "group": 2, "connections": 1}, | |
{"id": "Square", "group": 2, "connections": 1}, | |
{"id": "AirBnB", "group": 2, "connections": 4}, | |
{"id": "Yammer", "group": 2, "connections": 5}, | |
{"id": "Opendoor", "group": 2, "connections": 2}, | |
{"id": "Zenefits", "group": 2, "connections": 4}, | |
{"id": "Uber", "group": 2, "connections": 2}, | |
{"id": "Hyperloop One", "group": 2, "connections": 2}, | |
{"id": "Tesla", "group": 2, "connections": 1}, | |
{"id": "SpaceX", "group": 2, "connections": 5}, | |
{"id": "SolarCity", "group": 2, "connections": 2}, | |
{"id": "Thiel Macro LLC", "group": 2, "connections": 2}, | |
{"id": "Thiel Foundation", "group": 2, "connections": 2}, | |
{"id": "Thiel Fellowship", "group": 2, "connections": 3} | |
], | |
"links": [ | |
{"source": "Peter Thiel", "target": "Trump Transition", "value": 2}, | |
{"source": "Peter Thiel", "target": "Stanford Review", "value": 2}, | |
{"source": "Peter Thiel", "target": "PayPal", "value": 2}, | |
{"source": "Peter Thiel", "target": "Founders Fund", "value": 2}, | |
{"source": "Peter Thiel", "target": "Clarium Capital", "value": 2}, | |
{"source": "Peter Thiel", "target": "Mithril", "value": 2}, | |
{"source": "Peter Thiel", "target": "Thiel Capital", "value": 2}, | |
{"source": "Peter Thiel", "target": "Palantir", "value": 2}, | |
{"source": "Peter Thiel", "target": "Reddit", "value": 2}, | |
{"source": "Peter Thiel", "target": "Lyft", "value": 2}, | |
{"source": "Peter Thiel", "target": "AirBnB", "value": 2}, | |
{"source": "Peter Thiel", "target": "Yammer", "value": 2}, | |
{"source": "Peter Thiel", "target": "Zenefits", "value": 2}, | |
{"source": "Peter Thiel", "target": "SpaceX", "value": 2}, | |
{"source": "Peter Thiel", "target": "Thiel Macro LLC", "value": 2}, | |
{"source": "Peter Thiel", "target": "Thiel Foundation", "value": 2}, | |
{"source": "Peter Thiel", "target": "Thiel Fellowship", "value": 2}, | |
{"source": "Peter Thiel", "target": "Thiel Fellowship", "value": 2}, | |
{"source": "Keith Rabois", "target": "Stanford Review", "value": 1}, | |
{"source": "Keith Rabois", "target": "PayPal", "value": 1}, | |
{"source": "Keith Rabois", "target": "Palantir", "value": 1}, | |
{"source": "Keith Rabois", "target": "Reddit", "value": 1}, | |
{"source": "Keith Rabois", "target": "Lyft", "value": 1}, | |
{"source": "Keith Rabois", "target": "Khosla Ventures", "value": 1}, | |
{"source": "Keith Rabois", "target": "Square", "value": 1}, | |
{"source": "Keith Rabois", "target": "AirBnB", "value": 1}, | |
{"source": "Keith Rabois", "target": "Yammer", "value": 1}, | |
{"source": "Keith Rabois", "target": "Opendoor", "value": 1}, | |
{"source": "Keith Rabois", "target": "Peter Thiel", "value": 2}, | |
{"source": "David O. Sacks", "target": "Stanford Review", "value": 1}, | |
{"source": "David O. Sacks", "target": "PayPal", "value": 1}, | |
{"source": "David O. Sacks", "target": "Palantir", "value": 1}, | |
{"source": "David O. Sacks", "target": "AirBnB", "value": 1}, | |
{"source": "David O. Sacks", "target": "Yammer", "value": 1}, | |
{"source": "David O. Sacks", "target": "Opendoor", "value": 1}, | |
{"source": "David O. Sacks", "target": "Zenefits", "value": 1}, | |
{"source": "David O. Sacks", "target": "Uber", "value": 1}, | |
{"source": "David O. Sacks", "target": "Hyperloop One", "value": 1}, | |
{"source": "David O. Sacks", "target": "SpaceX", "value": 1}, | |
{"source": "David O. Sacks", "target": "Peter Thiel", "value": 2}, | |
{"source": "Elon Musk", "target": "Tesla", "value": 1}, | |
{"source": "Elon Musk", "target": "SpaceX", "value": 1}, | |
{"source": "Elon Musk", "target": "SolarCity", "value": 1}, | |
{"source": "Elon Musk", "target": "Peter Thiel", "value": 2}, | |
{"source": "Jim O'Neill", "target": "Trump Transition", "value": 1}, | |
{"source": "Jim O'Neill", "target": "Mithril", "value": 1}, | |
{"source": "Jim O'Neill", "target": "Thiel Fellowship", "value": 1}, | |
{"source": "Jim O'Neill", "target": "Peter Thiel", "value": 2}, | |
{"source": "Mark Woolway", "target": "Trump Transition", "value": 1}, | |
{"source": "Mark Woolway", "target": "PayPal", "value": 1}, | |
{"source": "Mark Woolway", "target": "Yammer", "value": 1}, | |
{"source": "Mark Woolway", "target": "Zenefits", "value": 1}, | |
{"source": "Mark Woolway", "target": "Peter Thiel", "value": 2}, | |
{"source": "Kevin Harrington", "target": "Trump Transition", "value": 1}, | |
{"source": "Kevin Harrington", "target": "Clarium Capital", "value": 1}, | |
{"source": "Kevin Harrington", "target": "Thiel Capital", "value": 1}, | |
{"source": "Kevin Harrington", "target": "Thiel Macro LLC", "value": 1}, | |
{"source": "Kevin Harrington", "target": "Peter Thiel", "value": 2}, | |
{"source": "Trae Stephens", "target": "Trump Transition", "value": 1}, | |
{"source": "Trae Stephens", "target": "Founders Fund", "value": 1}, | |
{"source": "Trae Stephens", "target": "Palantir", "value": 1}, | |
{"source": "Trae Stephens", "target": "Peter Thiel", "value": 2}, | |
{"source": "Blake Masters", "target": "Trump Transition", "value": 1}, | |
{"source": "Blake Masters", "target": "Founders Fund", "value": 1}, | |
{"source": "Blake Masters", "target": "Thiel Capital", "value": 1}, | |
{"source": "Blake Masters", "target": "Thiel Foundation", "value": 1}, | |
{"source": "Blake Masters", "target": "Peter Thiel", "value": 2}, | |
{"source": "Joe Lonsdale", "target": "Trump Transition", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "Stanford Review", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "PayPal", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "Clarium Capital", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "Palantir", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "Hyperloop One", "value": 1}, | |
{"source": "Joe Lonsdale", "target": "Peter Thiel", "value": 2}, | |
{"source": "Jack Abraham", "target": "Trump Transition", "value": 1}, | |
{"source": "Jack Abraham", "target": "Thiel Fellowship", "value": 1}, | |
{"source": "Jack Abraham", "target": "Peter Thiel", "value": 2}, | |
{"source": "Scott Banister", "target": "PayPal", "value": 1}, | |
{"source": "Scott Banister", "target": "Uber", "value": 1}, | |
{"source": "Scott Banister", "target": "SpaceX", "value": 1}, | |
{"source": "Scott Banister", "target": "Peter Thiel", "value": 2}, | |
{"source": "Ken Howery", "target": "Stanford Review", "value": 1}, | |
{"source": "Ken Howery", "target": "PayPal", "value": 1}, | |
{"source": "Ken Howery", "target": "Founders Fund", "value": 1}, | |
{"source": "Ken Howery", "target": "Clarium Capital", "value": 1}, | |
{"source": "Ken Howery", "target": "Thiel Capital", "value": 1}, | |
{"source": "Ken Howery", "target": "Palantir", "value": 1}, | |
{"source": "Ken Howery", "target": "AirBnB", "value": 1}, | |
{"source": "Ken Howery", "target": "Yammer", "value": 1}, | |
{"source": "Ken Howery", "target": "Zenefits", "value": 1}, | |
{"source": "Ken Howery", "target": "SpaceX", "value": 1}, | |
{"source": "Ken Howery", "target": "SolarCity", "value": 1}, | |
{"source": "Ken Howery", "target": "Peter Thiel", "value": 2}, | |
{"source": "Stephen Cohen", "target": "Stanford Review", "value": 1}, | |
{"source": "Stephen Cohen", "target": "Clarium Capital", "value": 1}, | |
{"source": "Stephen Cohen", "target": "Palantir", "value": 1}, | |
{"source": "Stephen Cohen", "target": "Peter Thiel", "value": 2}, | |
{"source": "Eric Jackson", "target": "Stanford Review", "value": 1}, | |
{"source": "Eric Jackson", "target": "PayPal", "value": 1}, | |
{"source": "Eric Jackson", "target": "Peter Thiel", "value": 2}, | |
{"source": "Rob Morrow", "target": "Clarium Capital", "value": 1}, | |
{"source": "Rob Morrow", "target": "Thiel Capital", "value": 1}, | |
{"source": "Rob Morrow", "target": "Peter Thiel", "value": 2} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment