Skip to content

Instantly share code, notes, and snippets.

@peachyo
Created August 10, 2014 18:11
  • 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
Save peachyo/bf0c710598dbb8d5542d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #000;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #999;
stroke-opacity: .6;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events:none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var worldcup={
"nodes":[
{"name":"Germany", "group":"Final"},
{"name":"Argentina", "group":"Final"},
{"name":"Brazil","group":"Playoff for third-place"},
{"name":"Neitherlands","group":"Playoff for third-place"},
{"name":"Costa Rica", "group":"Semifinal"},
{"name":"Belgium", "group":"Semifinal"},
{"name":"France","group": "Semifinal"},
{"name":"Colombia","group": "Quarter finals"},
{"name":"Switzerland","group":"Quarter finals"},
{"name":"USA","group":"Quarter finals"},
{"name":"Nigeria","group":"Quarter finals"},
{"name":"Algeria","group":"Quarter finals"},
{"name":"Mexico","group":"Quarter finals"},
{"name":"Greece","group":"Quarter finals"},
{"name":"Chile","group":"Quarter finals"},
{"name":"Uraguay","group":"Quarter finals"},
{"name":"Portugal","group":"Quarter finals"},
{"name":"Ghana","group":"Quarter finals"},
{"name":"Korea Republic","group":"Round of 16"},
{"name":"Russia","group":"Round of 16"},
{"name":"Nigeria","group":"Round of 16"},
{"name":"Bosnia And Herzegovina","group":"Round of 16"},
{"name":"Iran","group":"Round of 16"},
{"name":"Honduras","group":"Round of 16"},
{"name":"Ecuador","group":"Round of 16"},
{"name":"Italy","group":"Round of 16"},
{"name":"England","group":"Round of 16"},
{"name":"Japan","group":"Round of 16"},
{"name":"Cote D'Ivoire","group":"Round of 16"},
{"name":"Australia","group":"Round of 16"},
{"name":"Spain","group":"Round of 16"},
{"name":"Cameroom","group":"Round of 16"},
{"name":"Croatia","group":"Round of 16"}
],
"links":[
{"source":0,"target":1,"value":7},
{"source":1,"target":2,"value":9},
{"source":1,"target":3,"value":1},
{"source":0,"target":2,"value":13},
{"source":3,"target":4,"value":1},
{"source":2,"target":5,"value":5},
{"source":0,"target":6,"value":5},
{"source":1,"target":8,"value":4},
{"source":5,"target":9,"value":6},
{"source":6,"target":10,"value":5},
{"source":0,"target":10,"value":6},
{"source":3,"target":12,"value":6},
{"source":4,"target":13,"value":5},
{"source":2,"target":14,"value":5},
{"source":7,"target":15,"value":5},
{"source":16,"target":17,"value":6},
{"source":0,"target":9,"value":3},
{"source":5,"target":18,"value":3},
{"source":11,"target":19,"values":4},
{"source":1,"target":20,"value":7},
{"source":21,"target":22,"value":6},
{"source":8,"target":23,"value":5},
{"source":6,"target":24,"value":2},
{"source":15,"target":25,"value":3},
{"source":4,"target":26,"value":2},
{"source":7,"target":27,"value":7},
{"source":13,"target":28,"value":5},
{"source":3,"target":14,"value":5},
{"source":30,"target":29,"value":5},
{"source":2,"target":31,"value":7},
{"source":12,"target":32,"value":6},
{"source":5,"target":19,"value":3},
{"source":11,"target":18,"value":8},
{"source":9,"target":16,"value":6},
{"source":1,"target":22,"value":3},
{"source":0,"target":17,"value":6},
{"source":20,"target":21,"value":3},
{"source":4,"target":20,"value":3},
{"source":6,"target":8,"value":9},
{"source":24,"target":23,"value":5},
{"source":7,"target":28,"value":5},
{"source":15,"target":26,"value":5},
{"source":13,"target":27,"value":2},
{"source":3,"target":29,"value":6},
{"source":15,"target":30,"value":4},
{"source":32,"target":31,"value":6},
{"source":5,"target":11,"value":5},
{"source":2,"target":12,"value":2},
{"source":18,"target":19,"value":4},
{"source":0,"target":16,"value":6},
{"source":20,"target":22,"value":2},
{"source":9,"target":17,"value":5},
{"source":8,"target":24,"value":5},
{"source":6,"target":23,"value":5},
{"source":1,"target":21,"value":5},
{"source":7,"target":13,"value":5},
{"source":4,"target":15,"value":6},
{"source":25,"target":26,"value":5},
{"source":28,"target":27,"value":5},
{"source":12,"target":31,"value":3},
{"source":3,"target":30,"value":8},
{"source":14,"target":29,"value":6},
{"source":2,"target":32,"value":6}
]
};
force.nodes(worldcup.nodes)
.links(worldcup.links)
.start();
var link = svg.selectAll(".link")
.data(worldcup.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.call(force.drag);
node.attr("class", "node")
.append("circle")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
node.append("text")
.attr("x","8")
.attr("dy","0.31em")
.text(function(d) { return d.name; });
force.on("tick", function() {
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+")";} );
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment