Skip to content

Instantly share code, notes, and snippets.

@gtb104

gtb104/README.markdown

Last active October 8, 2015 09:58
Show Gist options
  • Save gtb104/3315179 to your computer and use it in GitHub Desktop.
Save gtb104/3315179 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.markdown

2012 Olympic Medal Count

A force directed graph with 3 foci for the nodes to cluster around.

Try it on bl.ocks.org

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Olympic Medal Count</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style type="text/css">
.gold {
fill: gold;
stroke: #aaa;
stroke-width: 1px;
}
.silver {
fill: silver;
stroke: #aaa;
stroke-width: 1px;
}
.bronze {
fill: darkgoldenrod;
stroke: #aaa;
stroke-width: 1px;
}
text {
font: 0.7em sans-serif;
}
</style>
</head>
<body>
<h1>2012 Olympic Medal Count</h1>
<script type="text/javascript">
var w = 960,
h = 500,
nodes = [],
foci = [{x: 250, y: 180}, {x: 465, y: 180}, {x: 700, y: 180}];
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.11)
.friction(0.85)
.charge(-60)
.size([w, h]);
var scale = d3.scale.linear()
.domain([0,40])
.range([10, 50]);
force.on("tick", function(e) {
// Push nodes toward their designated focus.
var k = .1 * e.alpha;
force.nodes().forEach(function(o, i) {
o.y += (foci[o.id].y - o.y) * k;
o.x += (foci[o.id].x - o.x) * k;
});
vis.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
vis.selectAll("text")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
var medals = d3.json("medals.json", function (data) {
// prep data
for (var i=0; i<data.length; i++) {
var d = data[i];
nodes.push({id:0, name:d.Country, type:"g", value:d.Gold});
nodes.push({id:1, name:d.Country, type:"s", value:d.Silver});
nodes.push({id:2, name:d.Country, type:"b", value:d.Bronze});
}
force.start();
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(force.drag);
node.append("circle")
.attr("class", function(d) {
return (d.type == "g") ? "gold" : (d.type == "s") ? "silver" : "bronze";
})
.attr("r", function(d) { return scale(d.value); });
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) {
var name = d.name.substring(0, Math.max(+d.value / 2, 2));
return name;
});
});
</script>
</body>
</html>
Raw
medals.json
[
{
"Rank by Gold": "1",
"Country": "United States of America",
"Gold": "39",
"Silver": "25",
"Bronze": "26",
"Total": "90"
},
{
"Rank by Gold": "2",
"Country": "People's Republic of China",
"Gold": "37",
"Silver": "25",
"Bronze": "19",
"Total": "81"
},
{
"Rank by Gold": "3",
"Country": "Great Britain",
"Gold": "25",
"Silver": "15",
"Bronze": "15",
"Total": "55"
},
{
"Rank by Gold": "4",
"Country": "Russian Federation",
"Gold": "13",
"Silver": "21",
"Bronze": "24",
"Total": "58"
},
{
"Rank by Gold": "5",
"Country": "Republic of Korea",
"Gold": "12",
"Silver": "7",
"Bronze": "6",
"Total": "25"
},
{
"Rank by Gold": "6",
"Country": "Germany",
"Gold": "10",
"Silver": "17",
"Bronze": "11",
"Total": "38"
},
{
"Rank by Gold": "7",
"Country": "France",
"Gold": "8",
"Silver": "9",
"Bronze": "12",
"Total": "29"
},
{
"Rank by Gold": "8",
"Country": "Hungary",
"Gold": "8",
"Silver": "4",
"Bronze": "3",
"Total": "15"
},
{
"Rank by Gold": "9",
"Country": "Australia",
"Gold": "7",
"Silver": "13",
"Bronze": "10",
"Total": "30"
},
{
"Rank by Gold": "10",
"Country": "Italy",
"Gold": "7",
"Silver": "6",
"Bronze": "7",
"Total": "20"
},
{
"Rank by Gold": "11",
"Country": "Kazakhstan",
"Gold": "6",
"Silver": "0",
"Bronze": "3",
"Total": "9"
},
{
"Rank by Gold": "12",
"Country": "Japan",
"Gold": "5",
"Silver": "14",
"Bronze": "15",
"Total": "34"
},
{
"Rank by Gold": "13",
"Country": "Netherlands",
"Gold": "5",
"Silver": "5",
"Bronze": "7",
"Total": "17"
},
{
"Rank by Gold": "14",
"Country": "Islamic Republic of Iran",
"Gold": "4",
"Silver": "4",
"Bronze": "1",
"Total": "9"
},
{
"Rank by Gold": "15",
"Country": "New Zealand",
"Gold": "4",
"Silver": "2",
"Bronze": "5",
"Total": "11"
},
{
"Rank by Gold": "16",
"Country": "Democratic People's Republic of Korea",
"Gold": "4",
"Silver": "0",
"Bronze": "1",
"Total": "5"
},
{
"Rank by Gold": "17",
"Country": "Belarus",
"Gold": "3",
"Silver": "3",
"Bronze": "4",
"Total": "10"
},
{
"Rank by Gold": "18",
"Country": "Cuba",
"Gold": "3",
"Silver": "3",
"Bronze": "3",
"Total": "9"
},
{
"Rank by Gold": "18",
"Country": "Jamaica",
"Gold": "3",
"Silver": "3",
"Bronze": "3",
"Total": "9"
},
{
"Rank by Gold": "20",
"Country": "Ukraine",
"Gold": "3",
"Silver": "1",
"Bronze": "6",
"Total": "10"
},
{
"Rank by Gold": "21",
"Country": "South Africa",
"Gold": "3",
"Silver": "1",
"Bronze": "1",
"Total": "5"
},
{
"Rank by Gold": "22",
"Country": "Spain",
"Gold": "2",
"Silver": "7",
"Bronze": "3",
"Total": "12"
},
{
"Rank by Gold": "23",
"Country": "Romania",
"Gold": "2",
"Silver": "5",
"Bronze": "2",
"Total": "9"
},
{
"Rank by Gold": "24",
"Country": "Denmark",
"Gold": "2",
"Silver": "4",
"Bronze": "3",
"Total": "9"
},
{
"Rank by Gold": "25",
"Country": "Czech Republic",
"Gold": "2",
"Silver": "3",
"Bronze": "3",
"Total": "8"
},
{
"Rank by Gold": "26",
"Country": "Brazil",
"Gold": "2",
"Silver": "2",
"Bronze": "7",
"Total": "11"
},
{
"Rank by Gold": "27",
"Country": "Kenya",
"Gold": "2",
"Silver": "2",
"Bronze": "3",
"Total": "7"
},
{
"Rank by Gold": "28",
"Country": "Poland",
"Gold": "2",
"Silver": "1",
"Bronze": "6",
"Total": "9"
},
{
"Rank by Gold": "29",
"Country": "Croatia",
"Gold": "2",
"Silver": "1",
"Bronze": "1",
"Total": "4"
},
{
"Rank by Gold": "30",
"Country": "Switzerland",
"Gold": "2",
"Silver": "1",
"Bronze": "0",
"Total": "3"
},
{
"Rank by Gold": "31",
"Country": "Ethiopia",
"Gold": "2",
"Silver": "0",
"Bronze": "2",
"Total": "4"
},
{
"Rank by Gold": "32",
"Country": "Canada",
"Gold": "1",
"Silver": "5",
"Bronze": "11",
"Total": "17"
},
{
"Rank by Gold": "33",
"Country": "Sweden",
"Gold": "1",
"Silver": "3",
"Bronze": "3",
"Total": "7"
},
{
"Rank by Gold": "34",
"Country": "Slovenia",
"Gold": "1",
"Silver": "1",
"Bronze": "2",
"Total": "4"
},
{
"Rank by Gold": "35",
"Country": "Georgia",
"Gold": "1",
"Silver": "1",
"Bronze": "1",
"Total": "3"
},
{
"Rank by Gold": "35",
"Country": "Norway",
"Gold": "1",
"Silver": "1",
"Bronze": "1",
"Total": "3"
},
{
"Rank by Gold": "35",
"Country": "Tunisia",
"Gold": "1",
"Silver": "1",
"Bronze": "1",
"Total": "3"
},
{
"Rank by Gold": "38",
"Country": "Dominican Republic",
"Gold": "1",
"Silver": "1",
"Bronze": "0",
"Total": "2"
},
{
"Rank by Gold": "39",
"Country": "Ireland",
"Gold": "1",
"Silver": "0",
"Bronze": "2",
"Total": "3"
},
{
"Rank by Gold": "40",
"Country": "Lithuania",
"Gold": "1",
"Silver": "0",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "40",
"Country": "Turkey",
"Gold": "1",
"Silver": "0",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "42",
"Country": "Algeria",
"Gold": "1",
"Silver": "0",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "42",
"Country": "Grenada",
"Gold": "1",
"Silver": "0",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "42",
"Country": "Venezuela",
"Gold": "1",
"Silver": "0",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "45",
"Country": "Colombia",
"Gold": "0",
"Silver": "3",
"Bronze": "3",
"Total": "6"
},
{
"Rank by Gold": "46",
"Country": "Mexico",
"Gold": "0",
"Silver": "3",
"Bronze": "2",
"Total": "5"
},
{
"Rank by Gold": "47",
"Country": "Azerbaijan",
"Gold": "0",
"Silver": "2",
"Bronze": "4",
"Total": "6"
},
{
"Rank by Gold": "48",
"Country": "Egypt",
"Gold": "0",
"Silver": "2",
"Bronze": "0",
"Total": "2"
},
{
"Rank by Gold": "49",
"Country": "India",
"Gold": "0",
"Silver": "1",
"Bronze": "3",
"Total": "4"
},
{
"Rank by Gold": "49",
"Country": "Mongolia",
"Gold": "0",
"Silver": "1",
"Bronze": "3",
"Total": "4"
},
{
"Rank by Gold": "49",
"Country": "Slovakia",
"Gold": "0",
"Silver": "1",
"Bronze": "3",
"Total": "4"
},
{
"Rank by Gold": "52",
"Country": "Armenia",
"Gold": "0",
"Silver": "1",
"Bronze": "2",
"Total": "3"
},
{
"Rank by Gold": "52",
"Country": "Belgium",
"Gold": "0",
"Silver": "1",
"Bronze": "2",
"Total": "3"
},
{
"Rank by Gold": "54",
"Country": "Bulgaria",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Estonia",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Indonesia",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Malaysia",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Serbia",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Thailand",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "54",
"Country": "Taipei (Chinese Taipei)",
"Gold": "0",
"Silver": "1",
"Bronze": "1",
"Total": "2"
},
{
"Rank by Gold": "61",
"Country": "Botswana",
"Gold": "0",
"Silver": "1",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "61",
"Country": "Cyprus",
"Gold": "0",
"Silver": "1",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "61",
"Country": "Finland",
"Gold": "0",
"Silver": "1",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "61",
"Country": "Guatemala",
"Gold": "0",
"Silver": "1",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "61",
"Country": "Portugal",
"Gold": "0",
"Silver": "1",
"Bronze": "0",
"Total": "1"
},
{
"Rank by Gold": "66",
"Country": "Argentina",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "66",
"Country": "Greece",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "66",
"Country": "Republic of Moldova",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "66",
"Country": "Qatar",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "66",
"Country": "Singapore",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "66",
"Country": "Uzbekistan",
"Gold": "0",
"Silver": "0",
"Bronze": "2",
"Total": "2"
},
{
"Rank by Gold": "72",
"Country": "Afghanistan",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Hong Kong, China",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Saudi Arabia",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Kuwait",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Latvia",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Morocco",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Puerto Rico",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Tajikistan",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
},
{
"Rank by Gold": "72",
"Country": "Trinidad and Tobago",
"Gold": "0",
"Silver": "0",
"Bronze": "1",
"Total": "1"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment