Last active
November 26, 2016 21:38
-
-
Save bessiec/7174ab6e030b487253b26d85005a32f9 to your computer and use it in GitHub Desktop.
D3 Network of the Soccer Confederations of the Americas
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
{ | |
"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"} | |
] | |
} | |
] | |
} |
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> | |
<meta charset="utf-8"> | |
<title>Network of Soccer Confederations of the Americas</title> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<link href="https://fonts.googleapis.com/css?family=Mako" rel="stylesheet"> | |
<style> | |
body { | |
margin-left: 2%; | |
} | |
line.link { | |
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; | |
} | |
</style> | |
</head> | |
<body> | |
<h3>Network of the Soccer Confederations of the Americas</h3> | |
<p>Made with D3.js based on <a href="http://bl.ocks.org/mbostock/1093130">Mike Bostock's Collapsible Force Layout</a>. Used data from the <a href="https://en.wikipedia.org/wiki/CONCACAF">CONCACAF (The Confederation of North, Central America and Caribbean Association Football)</a> and <a href="https://en.wikipedia.org/wiki/CONMEBOL"> 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> | |
<script> | |
var width = 1060, | |
height = 1000, | |
root; | |
var force = d3.layout.force() | |
.linkDistance(150) | |
.charge(-1000) | |
.gravity(.2) | |
.size([width, height]) | |
.on("tick", tick); | |
var svg = d3.select("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; | |
update(); | |
}); | |
function update() { | |
var nodes = flatten(root), | |
links = d3.layout.tree().links(nodes); | |
// Restart the force layout. | |
force | |
.nodes(nodes) | |
.links(links) | |
.start(); | |
// Update links. | |
link = link.data(links, function(d) { return d.target.id; }); | |
link.exit().remove(); | |
link.enter().insert("line", ".node") | |
.attr("class", "link"); | |
// Update nodes. | |
node = node.data(nodes, function(d) { return d.id; }); | |
node.exit().remove(); | |
var nodeEnter = node.enter().append("g") | |
.attr("class", "node") | |
.on("dblclick", dblclick) | |
.on("click", click) | |
.call(force.drag); | |
nodeEnter.append("circle") | |
.attr("r", 12); | |
nodeEnter.append("text") | |
.attr("dx", ".95em") | |
.text(function(d) { return d.name; }) | |
.style("font-family", "Mako"); | |
node.select("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 d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
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(); | |
d3.select(this).classed("fixed", d.fixed = false); | |
d3.select(this).select("text").transition() | |
.duration(750) | |
.attr("x", 12) | |
.style("stroke-width", "0px") | |
.style("font", "15px Mako"); | |
} | |
function click(d) { | |
d3.select(this).select("text").transition() | |
.duration(750) | |
.attr("x", 12) | |
.style("font", "20px Mako"); | |
d3.select(this).select("circle").transition() | |
.attr("r", 12) | |
} | |
function dragstart(d) { | |
d3.select(this).classed("fixed", d.fixed = true); | |
d3.select(this).select("text").transition() | |
.duration(750) | |
.attr("x", 10) | |
.style("font", "15px Mako"); | |
d3.select(this).select("circle").transition() | |
.duration(750); | |
} | |
// 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 (!node.id) node.id = ++i; | |
nodes.push(node); | |
} | |
recurse(root); | |
return nodes; | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment