Skip to content

Instantly share code, notes, and snippets.

Last active November 26, 2016 21:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
D3 Network of the Soccer Confederations of the Americas
"name": "Soccer Confederations of the Americas",
"children": [
"name": "CONCACAF",
"children": [
"name": "North American Zone",
"children": [
{"name": "Canada"},
{"name": "USA"},
{"name": "Mexico"}
"name": "Cental American Zone",
"children": [
{"name": "Belize"},
{"name": "Costa Rica"},
{"name": "El Salvador"},
{"name": "Guatemala"},
{"name": "Honduras"},
{"name": "Nicaragua"},
{"name": "Panama"}
"name": "Carribean Zone",
"children": [
{"name": "Anguilla"},
{"name": "Antigua and Barbuda"},
{"name": "Aruba"},
{"name": "Bahamas"},
{"name": "Barbados"},
{"name": "Bermuda"},
{"name": "Bonaire"},
{"name": "British Virgin Islands"},
{"name": "Cayman Islands"},
{"name": "Cuba"},
{"name": "Curacao"},
{"name": "Dominica"},
{"name": "Dominican Republic"},
{"name": "French Guiana"},
{"name": "Grenada"},
{"name": "Guadeloupe"},
{"name": "Guyana"},
{"name": "Haiti"},
{"name": "Jamaica"},
{"name": "Martinique"},
{"name": "Montserrat"},
{"name": "Puerto Rico"},
{"name": "Saint Kitts and Nevis"},
{"name": "Saint Lucia"},
{"name": "Saint Martin"},
{"name": "Saint Vincent and the Grenadines"},
{"name": "Sint Maarten"},
{"name": "Suriname"},
{"name": "Trinidad and Tobago"},
{"name": "Turks and Caicos Islands"},
{"name": "U.S. Virgin Islands"}
"name": "CONMEBOL",
"children": [
{"name": "Brazil"},
{"name": "Paraguay"},
{"name": "Bolivia"},
{"name": "Colombia"},
{"name": "Argentina"},
{"name": "Chile"},
{"name": "Peru"},
{"name": "Uruguay"},
{"name": "Venezuela"},
{"name": "Ecuador"}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Network of Soccer Confederations of the Americas</title>
<script src="" charset="utf-8"></script>
<link rel="stylesheet" href="">
<link href="" rel="stylesheet">
body {
margin-left: 2%;
} {
fill: none;
stroke: #CCCCCC;
stroke-width: 1.5px;
.node circle {
fill: #BBDCE8;
stroke: #fff;
stroke-width: 1.5px;
.node text {
fill: #000;
pointer-events: none;
<h3>Network of the Soccer Confederations of the Americas</h3>
<p>Made with D3.js based on <a href="">Mike Bostock's Collapsible Force Layout</a>. Used data from the <a href="">CONCACAF (The Confederation of North, Central America and Caribbean Association Football)</a> and <a href=""> CONMNEBOL (The South American Football Confederation)</a> Wikipedia pages. </p>
<p>Double-click lighter nodes to collapse. Click and drag nodes to fixed locations. Double click to collapse and release.</p>
var width = 1060,
height = 1000,
var force = d3.layout.force()
.size([width, height])
.on("tick", tick);
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("americas.json", function(error, json) {
if (error) throw error;
root = json;
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
// Update links.
link =, function(d) { return; });
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node =, function(d) { return; });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on("dblclick", dblclick)
.on("click", click)
.attr("r", 12);
.attr("dx", ".95em")
.text(function(d) { return; })
.style("font-family", "Mako");"circle")
.style("fill", color);
var drag = force.drag()
.on("dragstart", dragstart);
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return; })
.attr("y2", function(d) { return; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
function color(d) {
return d._children ? "#BBDCE8" // collapsed package
: d.children ? "#BBDCE8" // expanded package
: "#8BBCE8"; // leaf node
// Toggle children on click.
function dblclick(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
update();"fixed", d.fixed = false);"text").transition()
.attr("x", 12)
.style("stroke-width", "0px")
.style("font", "15px Mako");
function click(d) {"text").transition()
.attr("x", 12)
.style("font", "20px Mako");"circle").transition()
.attr("r", 12)
function dragstart(d) {"fixed", d.fixed = true);"text").transition()
.attr("x", 10)
.style("font", "15px Mako");"circle").transition()
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (! = ++i;
return nodes;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment