Skip to content

Instantly share code, notes, and snippets.

@bessiec

bessiec/americas.json

Last active November 26, 2016 21:38
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 bessiec/7174ab6e030b487253b26d85005a32f9 to your computer and use it in GitHub Desktop.
Save bessiec/7174ab6e030b487253b26d85005a32f9 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Network of the Soccer Confederations of the Americas
Raw
americas.json
{
"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"}
]
}
]
}
Raw
index.html
<!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