Skip to content

Instantly share code, notes, and snippets.

@cpudney

cpudney/README.txt

Created August 7, 2012 00:22
Show Gist options
  • Save cpudney/3279878 to your computer and use it in GitHub Desktop.
Save cpudney/3279878 to your computer and use it in GitHub Desktop.
Download ZIP
Summer Olympics Host Nations
Raw
README.txt
Data:
http://www.sports-reference.com/olympics/summer/
https://en.wikipedia.org/wiki/Summer_Olympic_Games
Raw
chart.js
// Dimensions.
const WIDTH = 1200;
const HEIGHT = 675;
// Insets.
const INSETS = {"left": 50,
"right": 200,
"top": 10,
"bottom": 50};
// Glyph radius.
const GLYPH_RADIUS = 4;
// Hash keys.
const INDEX_KEY = 'index';
const GOLD_KEY = "gold";
const SILVER_KEY = "silver";
const BRONZE_KEY = "bronze";
const TOTAL_KEY = "total";
const RANK_KEY = "rank";
// Axes.
const AXES = {};
// Scales.
const SCALES = {};
// Paths.
const PATHS = {};
// Transition duration (ms).
const DURATION = 1000;
// Visualize when document has loaded.
window.onload = function() {
// Read the hosts data file.
d3.csv("hosts.csv", function(d1) {
var hosts = parseHosts(d1);
// Read the medals data file.
d3.csv("data.csv", function(d2) {
chart(parseResults(d2, hosts), hosts);
});
});
};
// Parse the host cities/countries data.
//
// data: array of data records.
//
function parseHosts(data) {
// Initialise hosts map.
var hosts = {};
// Process each data record..
data.forEach(function(record, index) {
var items = {};
items[INDEX_KEY] = index;
items['City'] = record['City'];
items['Country'] = record['Country'];
items['Olympiad'] = record['Olympiad'];
hosts[record['Year']] = items;
});
return hosts;
}
// Parse the data set.
//
// data: array of data records.
// hosts: array of host country data records.
//
function parseResults(data, hosts) {
var results = [];
// Process each data record..
for (var row = 0;
row < data.length;
row++) {
var record = data[row];
var history = [];
// Process each year.
for (var year in hosts) {
var host = hosts[year];
var items = {};
items[INDEX_KEY] = host[INDEX_KEY];
items[GOLD_KEY] = parseInt(record['Gold ' + year]);
items[SILVER_KEY] = parseInt(record['Silver ' + year]);
items[BRONZE_KEY] = parseInt(record['Bronze ' + year]);
items[RANK_KEY] = parseInt(record['Rank ' + year]);
items[TOTAL_KEY] = items[GOLD_KEY] + items[SILVER_KEY] + items[BRONZE_KEY];
if (items[TOTAL_KEY] > 0) {
history.push(items);
}
}
// Append results.
results.push({
'results': history,
'country': record.Country
});
}
return results;
}
// Plot the chart.
//
// data: the data set.
//
function chart(data, hosts) {
// Set up the scales.
configureScales(data);
// Line chart paths..
calculatePaths();
// Check key to use.
document.getElementById(TOTAL_KEY).checked = true;
// Chart root.
var chart = d3.select("#chart")
.append("svg:svg")
.attr("width", WIDTH)
.attr("height", HEIGHT);
// X-axis.
labelXAxisOlympiads(chart, hosts, TOTAL_KEY);
labelXAxisCity(chart, hosts, TOTAL_KEY);
labelXAxisCountry(chart, hosts, TOTAL_KEY);
axleXAxis(chart, TOTAL_KEY);
// Y-axis.
appendYAxis(chart);
// Path for each line.
appendPaths(chart, data, TOTAL_KEY);
// Glyphs for results.
addGlyphs(chart, data, TOTAL_KEY);
// Labels.
appendCountryLabels(chart, data, TOTAL_KEY);
}
// Configure the scales.
//
// data: data set.
//
function configureScales(data) {
var results = data.map(function(d) {
return d.results;
});
var gold = results.map(function(d) {
return d3.max(d, function(e) {
return e[GOLD_KEY];
});
});
var silver = results.map(function(d) {
return d3.max(d, function(e) {
return e[SILVER_KEY];
});
});
var bronze = results.map(function(d) {
return d3.max(d, function(e) {
return e[BRONZE_KEY];
});
});
var total = results.map(function(d) {
return d3.max(d, function(e) {
return e[TOTAL_KEY];
});
});
var rank = results.map(function(d) {
return d3.max(d, function(e) {
return e[RANK_KEY];
});
});
var maxIndex = results.map(function(d) {
return d3.max(d, function(e) {
return e[INDEX_KEY];
});
});
// X-axis scale.
SCALES.x = d3.scale.linear()
.domain([0, d3.max(maxIndex)])
.range([INSETS.left, WIDTH - INSETS.right]);
// Y-axis scale: gold medals..
SCALES[GOLD_KEY] = d3.scale.linear()
.domain([d3.max(gold), 0])
.range([INSETS.top, HEIGHT - INSETS.bottom])
.nice();
// Y-axis scale: silver medals..
SCALES[SILVER_KEY] = d3.scale.linear()
.domain([d3.max(silver), 0])
.range([INSETS.top, HEIGHT - INSETS.bottom])
.nice();
// Y-axis scale: bronze medals..
SCALES[BRONZE_KEY] = d3.scale.linear()
.domain([d3.max(bronze), 0])
.range([INSETS.top, HEIGHT - INSETS.bottom])
.nice();
// Y-axis scale: total medals..
SCALES[TOTAL_KEY] = d3.scale.linear()
.domain([d3.max(total), 0])
.range([INSETS.top, HEIGHT - INSETS.bottom])
.nice();
// Y-axis scale: rank.
SCALES[RANK_KEY] = d3.scale.linear()
.domain([1, d3.max(rank)])
.range([INSETS.top, HEIGHT - INSETS.bottom])
.nice();
// Configure scales.
AXES[GOLD_KEY] = d3.svg.axis().scale(SCALES[GOLD_KEY]).orient("left");
AXES[SILVER_KEY] = d3.svg.axis().scale(SCALES[SILVER_KEY]).orient("left");
AXES[BRONZE_KEY] = d3.svg.axis().scale(SCALES[BRONZE_KEY]).orient("left");
AXES[TOTAL_KEY] = d3.svg.axis().scale(SCALES[TOTAL_KEY]).orient("left");
AXES[RANK_KEY] = d3.svg.axis().scale(SCALES[RANK_KEY]).orient("left");
}
// Calculate the paths for line charts.
//
function calculatePaths() {
PATHS[GOLD_KEY] = d3.svg.line()
.x(function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.y(function(d) {
return SCALES[GOLD_KEY](d[GOLD_KEY]);
})
.interpolate("linear");
PATHS[SILVER_KEY] = d3.svg.line()
.x(function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.y(function(d) {
return SCALES[SILVER_KEY](d[SILVER_KEY]);
})
.interpolate("linear");
PATHS[BRONZE_KEY] = d3.svg.line()
.x(function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.y(function(d) {
return SCALES[BRONZE_KEY](d[BRONZE_KEY]);
})
.interpolate("linear");
PATHS[TOTAL_KEY] = d3.svg.line()
.x(function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.y(function(d) {
return SCALES[TOTAL_KEY](d[TOTAL_KEY]);
})
.interpolate("linear");
PATHS[RANK_KEY] = d3.svg.line()
.x(function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.y(function(d) {
return SCALES[RANK_KEY](d[RANK_KEY]);
})
.interpolate("linear");
}
// Highlight elements for a country.
//
// country: the country to highlight.
//
function highlightByCountry(country) {
var id = toId(country);
// Highlight x-axis
d3.selectAll("text.xaxis#" + id)
.style("fill", "red");
// Highlight path.
d3.selectAll("path#" + id)
.style("stroke", "red");
// Highlight label.
d3.selectAll("text.label#" + id)
.style("opacity", 1.0);
d3.selectAll("circle.results#" + id)
.style("opacity", 1.0);
}
// Unhighlight all elements.
//
function unhighlight() {
d3.selectAll("text.xaxis")
.style("fill", null);
d3.selectAll("path")
.style("stroke", "#cccccc");
d3.selectAll("text.label")
.style("opacity", 0.0);
d3.selectAll("circle")
.style("opacity", 0.0);
}
// Sets the y-axis using a transition.
//
// key: key to use on the y-axis.
//
function setYAxis(key) {
// Results paths.
d3.selectAll("path.results")
.transition(DURATION)
.attr("d", PATHS[key]);
// Y-axis country labels.
d3.selectAll("text.label.yaxis")
.transition(DURATION)
.attr("y", function (d) {
return SCALES[key](d3.last(d.results)[key]);
});
// Glyphs.
d3.selectAll("circle.results")
.transition(DURATION)
.attr("cy", function (d) {
return SCALES[key](d[key]);
});
// Y-axis.
d3.selectAll("g.yaxis")
.call(AXES[key]);
}
// Convert text to an ID (anchor) by replacing whitespace with underscore.
//
// text: the string to convert.
//
function toId(text) {
return text.replace(/\s+/g, "_");
}
// Add results paths.
//
// chart: parent chart element.
// data: results data.
// key: y-axis scale key.
//
function appendPaths(chart, data, key) {
chart.selectAll("path.results")
.data(data.map(function(d) {
return d.results;
}))
.enter()
.append("svg:path")
.attr("class", "results")
.attr("id", function(d, i) {
return toId(data[i].country);
})
.attr("d", PATHS[key])
.on("mouseover", function(d, i) {
highlightByCountry(data[i].country);
})
.on("mouseout", function() {
unhighlight();
});
}
// Add results glyphs..
//
// chart: parent chart element.
// data: results data.
// key: y-axis scale key.
//
function addGlyphs(chart, data, TOTAL_KEY) {
// Create flat array of results.
var results = [];
data.forEach(function(record) {
var country = record.country;
record.results.forEach(function(result) {
// Copy results.
var items = {'country': country};
for (var key in result) {
items[ key ] = result[ key ];
}
results.push(items);
});
});
// Add glyphs.
chart.selectAll("circle.results")
.data(results)
.enter()
.append("svg:circle")
.style("opacity", 0.0)
.attr("class", "results")
.attr("id", function(d) {
return toId(d.country);
})
.attr("cx", function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.attr("cy", function(d)
{
return SCALES[TOTAL_KEY](d[TOTAL_KEY]);
})
.attr("r", GLYPH_RADIUS);
}
// Add the country labels.
//
// chart: parent chart element.
// data: results data.
// key: y-axis scale key.
//
function appendCountryLabels(chart, data, key) {
chart.selectAll("text.label.yaxis")
.data(data)
.enter()
.append("svg:text")
.attr("class", "label yaxis")
.attr("id", function(d) {
return toId(d.country);
})
.attr("text-anchor", "start")
.style("opacity", 0.0)
.attr("dx", "1.0em")
.attr("dy", "0.3em")
.attr("x", SCALES.x.range()[1])
.attr("y", function (d) {
return SCALES[key](d3.last(d.results)[key]);
})
.text(function(d) {
return d.country;
});
}
// Label the x-axis with olypiad.
//
// chart: parent chart element.
// hosts: host data.
// key: y-axis scale key.
//
function labelXAxisOlympiads(chart, hosts, key) {
chart.selectAll("text.xaxis.olympiad")
.data(d3.values(hosts))
.enter()
.append("svg:text")
.attr("class", "xaxis olympiad")
.attr("id", function(d) {
return toId(d.Country);
})
.attr("x", function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.attr("y", SCALES[key].range()[1])
.attr("dy", "1.0em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.Olympiad;
})
.on("mouseover", function(d) {
highlightByCountry(d.Country);
})
.on("mouseout", function() {
unhighlight();
});
}
// Label the x-axis with host cities.
//
// chart: parent chart element.
// hosts: host data.
// key: y-axis scale key.
//
function labelXAxisCity(chart, hosts, key) {
chart.selectAll("text.label.city")
.data(d3.values(hosts))
.enter()
.append("svg:text")
.style("opacity", 0.0)
.attr("class", "label city")
.attr("id", function(d) {
return toId(d.Country);
})
.attr("x", function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.attr("y", SCALES[key].range()[1])
.attr("dy", "2.0em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.City;
});
}
// X-axis axle.
//
// chart: parent chart element.
// hosts: host data.
// key: y-axis scale key.
//
function axleXAxis(chart, key) {
chart.append('svg:line')
.attr("class", "axis")
.attr('x1', SCALES.x.range()[0])
.attr('y1', SCALES[key].range()[1])
.attr('x2', SCALES.x.range()[1])
.attr('y2', SCALES[key].range()[1]);
}
// Label the x-axis with host countries.
//
// chart: parent chart element.
// hosts: host data.
// key: y-axis scale key.
//
function labelXAxisCountry(chart, hosts, key) {
chart.selectAll("text.label.country")
.data(d3.values(hosts))
.enter()
.append("svg:text")
.style("opacity", 0.0)
.attr("class", "label country")
.attr("id", function(d) {
return toId(d.Country);
})
.attr("x", function(d) {
return SCALES.x(d[INDEX_KEY]);
})
.attr("y", SCALES[key].range()[1])
.attr("dy", "3.0em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.Country;
});
}
// Append the y-axis to the chart.
//
// chart: parent chart element.
//
function appendYAxis(chart) {
chart.append("g")
.attr("class", "yaxis")
.attr("width", INSETS.left)
.attr("height", SCALES[TOTAL_KEY].range()[1] - SCALES[TOTAL_KEY].range()[0])
.attr("transform", "translate(" + SCALES.x.range()[0] + ", 0)")
.call(AXES[TOTAL_KEY]);
}
Raw
data.csv
Country Rank 2012 Gold 2012 Silver 2012 Bronze 2012 Rank 2008 Gold 2008 Silver 2008 Bronze 2008 Rank 2004 Gold 2004 Silver 2004 Bronze 2004 Rank 2000 Gold 2000 Silver 2000 Bronze 2000 Rank 1996 Gold 1996 Silver 1996 Bronze 1996 Rank 1992 Gold 1992 Silver 1992 Bronze 1992 Rank 1988 Gold 1988 Silver 1988 Bronze 1988 Rank 1984 Gold 1984 Silver 1984 Bronze 1984 Rank 1980 Gold 1980 Silver 1980 Bronze 1980 Rank 1976 Gold 1976 Silver 1976 Bronze 1976 Rank 1972 Gold 1972 Silver 1972 Bronze 1972 Rank 1968 Gold 1968 Silver 1968 Bronze 1968 Rank 1964 Gold 1964 Silver 1964 Bronze 1964 Rank 1960 Gold 1960 Silver 1960 Bronze 1960 Rank 1956 Gold 1956 Silver 1956 Bronze 1956 Rank 1952 Gold 1952 Silver 1952 Bronze 1952 Rank 1948 Gold 1948 Silver 1948 Bronze 1948 Rank 1936 Gold 1936 Silver 1936 Bronze 1936 Rank 1932 Gold 1932 Silver 1932 Bronze 1932 Rank 1928 Gold 1928 Silver 1928 Bronze 1928 Rank 1924 Gold 1924 Silver 1924 Bronze 1924 Rank 1920 Gold 1920 Silver 1920 Bronze 1920 Rank 1912 Gold 1912 Silver 1912 Bronze 1912 Rank 1908 Gold 1908 Silver 1908 Bronze 1908 Rank 1906 Gold 1906 Silver 1906 Bronze 1906 Rank 1904 Gold 1904 Silver 1904 Bronze 1904 Rank 1900 Gold 1900 Silver 1900 Bronze 1900 Rank 1896 Gold 1896 Silver 1896 Bronze 1896
Australia 17 3 13 8 6 14 15 17 4 17 16 16 4 16 25 17 7 9 9 23 10 7 9 11 15 3 6 5 14 4 8 12 15 2 2 5 30 0 1 4 6 8 7 2 10 5 7 5 8 6 2 10 5 8 8 6 3 13 8 14 9 6 2 3 14 2 6 5 31 0 0 1 11 3 1 1 21 1 2 1 11 3 1 2 16 0 2 1 12 2 2 3 20 0 0 0 17 0 0 3 12 0 3 1 9 2 0 3 8 2 0 0
Belgium 57 0 1 2 48 1 1 0 51 1 0 2 57 0 2 3 31 2 2 2 41 0 1 2 36 0 0 2 21 1 1 2 24 1 0 0 28 0 3 3 32 0 2 0 36 0 1 1 20 2 0 1 26 0 2 2 29 0 2 0 15 2 2 0 16 2 2 3 24 0 0 3 28 0 0 1 30 0 1 2 10 3 7 3 3 16 12 14 13 2 1 3 10 1 5 2 12 2 1 3 14 0 0 0 5 6 7 4 12 0 0 0
Canada 33 1 5 10 19 3 9 6 21 3 6 3 23 3 3 8 21 3 11 8 11 7 4 7 18 3 2 5 6 10 18 16 37 0 0 0 27 0 5 6 26 0 2 3 23 1 3 1 23 1 2 1 37 0 1 0 15 2 1 2 22 1 2 0 25 0 2 2 17 1 3 5 13 2 5 9 11 4 4 7 22 0 3 1 12 3 3 3 10 3 2 3 5 3 3 10 15 1 1 0 3 4 1 1 14 1 0 1 12 0 0 0
China 2 34 24 21 1 51 21 28 2 32 17 14 3 28 16 14 4 16 22 12 4 16 22 16 11 5 11 12 4 15 8 9 37 0 0 0 42 0 0 0 49 0 0 0 45 0 0 0 42 0 0 0 0 42 0 0 38 0 0 0 44 0 0 0 39 0 0 0 33 0 0 0 29 0 0 0 35 0 0 0 32 0 0 0 23 0 0 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 22 0 0 0 12 0 0 0
Finland 65 0 1 1 44 1 1 2 63 0 2 0 32 2 1 1 40 1 2 1 30 1 2 2 26 1 1 2 15 4 2 6 12 3 1 4 11 4 2 0 15 3 1 4 24 1 2 1 13 3 0 2 17 1 1 3 12 3 1 11 7 6 3 13 5 10 8 6 5 8 6 6 7 5 8 12 3 8 8 9 3 14 13 10 4 15 10 9 4 9 8 9 12 1 1 3 13 2 1 1 14 0 0 0 22 0 0 0 12 0 0 0
France 6 10 8 10 10 7 16 18 7 11 9 13 6 13 14 11 5 15 7 15 9 8 5 16 9 6 4 6 12 5 7 16 8 6 5 3 15 2 3 4 17 2 4 7 6 7 3 5 21 1 8 6 25 0 2 3 11 4 4 6 8 6 6 6 3 11 6 15 6 7 6 6 3 11 5 4 5 7 12 6 2 14 15 12 8 9 20 13 5 7 5 3 4 5 5 9 1 15 9 16 13 0 1 0 1 27 39 37 4 5 4 2
Germany 7 7 17 12 5 16 10 15 6 13 16 20 5 13 17 26 3 20 18 27 3 33 21 28 5 11 14 15 3 17 19 23 37 0 0 0 4 10 12 17 4 13 11 16 8 5 11 4 4 10 22 18 4 12 19 11 9 4 10 6 28 0 7 17 39 0 0 0 1 38 31 32 8 5 12 7 2 11 9 19 32 0 0 0 23 0 0 0 6 6 13 7 6 3 5 5 6 4 6 5 2 4 5 6 7 4 3 2 3 6 5 2
Great Britain 3 25 12 15 4 19 13 15 10 9 9 12 10 11 10 7 36 1 8 6 13 5 3 12 12 5 10 9 11 5 11 21 9 5 7 9 13 3 5 5 11 4 5 9 11 5 5 3 10 4 12 2 12 2 6 12 6 5 7 9 17 1 2 8 12 4 16 7 12 4 7 3 9 5 7 5 10 4 11 7 4 9 14 12 5 14 16 13 3 10 15 16 1 56 51 39 4 8 11 5 10 1 1 0 3 15 8 9 5 2 3 2
Greece 66 0 0 2 59 0 2 2 15 6 6 4 17 4 6 3 17 4 4 0 26 2 0 0 52 0 0 1 33 0 1 1 22 1 0 2 42 0 0 0 31 0 2 0 44 0 0 1 42 0 0 0 23 1 0 0 35 0 0 1 44 0 0 0 39 0 0 0 33 0 0 0 29 0 0 0 35 0 0 0 21 1 0 0 21 0 1 0 15 1 0 1 16 0 3 1 3 8 13 12 11 1 0 1 22 0 0 0 2 10 18 19
Italy 10 6 8 7 9 8 9 10 8 10 11 11 7 13 8 13 6 13 10 12 12 6 5 8 10 6 4 4 5 14 6 12 5 8 3 4 14 2 7 4 10 5 3 10 13 3 4 9 5 10 10 7 3 13 10 13 5 8 6 8 5 8 9 4 6 9 12 10 4 9 13 5 2 12 12 12 7 7 6 7 5 8 3 5 6 14 6 5 7 5 1 2 9 2 2 0 5 7 6 3 14 0 0 0 8 3 2 0 12 0 0 0
Japan 8 7 10 16 8 9 6 10 5 16 9 12 15 5 8 5 24 3 6 5 17 3 8 11 14 4 3 7 7 10 8 14 37 0 0 0 5 9 6 10 5 13 8 8 3 11 7 7 3 16 5 8 9 4 7 7 10 4 10 5 18 1 6 2 39 0 0 0 8 6 4 10 5 7 7 4 17 2 2 1 27 0 0 1 17 0 2 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 22 0 0 0 12 0 0 0
Mexico 51 0 3 3 36 2 0 1 59 0 3 1 39 1 2 3 78 0 0 1 52 0 1 0 37 0 0 2 17 2 3 1 28 0 1 3 25 1 0 1 35 0 1 0 15 3 3 3 39 0 0 1 42 0 0 1 23 1 0 1 39 0 1 0 19 2 1 2 25 0 0 3 22 0 2 0 35 0 0 0 32 0 0 0 23 0 0 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 22 0 0 0 12 0 0 0
Netherlands 14 5 2 5 12 7 5 4 18 4 9 9 8 12 9 4 15 4 5 10 20 2 6 7 21 2 2 5 13 5 2 6 29 0 1 2 29 0 2 3 16 3 1 1 17 3 3 1 15 2 4 4 28 0 1 2 38 0 0 0 30 0 5 0 11 5 2 9 9 6 4 7 14 2 5 1 4 8 10 5 9 4 1 6 9 4 2 5 19 0 0 3 17 0 0 2 16 0 1 2 14 0 0 0 11 1 2 3 12 0 0 0
South Korea 5 11 6 5 7 13 10 8 9 9 12 9 12 8 10 10 10 7 15 5 7 12 5 12 4 12 10 11 10 6 6 7 37 0 0 0 19 1 1 4 39 0 1 0 37 0 1 1 27 0 2 1 0 42 0 0 30 0 1 1 36 0 0 2 29 0 0 2 33 0 0 0 29 0 0 0 35 0 0 0 32 0 0 0 23 0 0 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 22 0 0 0 12 0 0 0
Russia 4 17 21 27 3 23 21 29 3 27 27 38 2 32 28 29 2 26 21 16 1 45 38 29 1 55 31 46 48 0 0 0 1 80 69 46 1 49 41 35 1 50 27 22 2 29 32 30 2 30 31 35 1 43 29 31 1 37 29 32 2 22 30 19 39 0 0 0 33 0 0 0 29 0 0 0 35 0 0 0 32 0 0 0 23 0 0 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 22 0 0 0 12 0 0 0
Spain 23 2 8 2 15 5 10 3 20 3 11 5 24 3 3 5 13 5 6 6 6 13 7 2 25 1 1 2 20 1 2 2 20 1 3 2 31 0 2 0 43 0 0 1 45 0 0 0 42 0 0 0 44 0 0 1 38 0 0 0 38 0 1 0 32 0 1 0 33 0 0 0 26 0 0 1 26 1 0 0 32 0 0 0 18 0 2 0 20 0 0 0 20 0 0 0 20 0 0 0 14 0 0 0 16 1 0 0 12 0 0 0
Sweden 34 1 3 3 56 0 4 1 19 4 2 1 18 4 5 3 29 2 4 2 27 1 7 4 32 0 4 7 16 2 11 6 11 3 3 6 12 4 1 0 12 4 6 6 20 2 1 1 16 2 2 4 16 1 2 3 7 5 5 6 4 12 13 10 2 17 11 18 7 6 5 10 4 10 5 9 6 7 6 12 8 4 13 12 2 19 20 24 2 24 24 17 3 8 6 11 10 2 5 7 14 0 0 0 21 0 0 1 12 0 0 0
United States 1 35 23 27 2 36 38 36 1 36 39 27 1 37 24 33 1 44 32 25 2 37 34 37 3 36 31 27 1 83 61 30 37 0 0 0 3 34 35 25 2 33 31 30 1 45 28 34 1 36 26 28 2 34 21 16 2 32 25 17 1 40 19 17 1 38 27 19 2 24 21 12 1 44 36 30 1 22 18 16 1 45 27 27 1 41 27 26 1 26 19 19 2 23 12 12 2 12 6 6 1 76 78 77 2 19 14 14 1 11 7 2
Raw
hosts.csv
Year City Country Olympiad
1896 Athens Greece I
1900 Paris France II
1904 St. Louis United States III
1906 Athens Greece IIIa
1908 London Great Britain IV
1912 Stockholm Sweden V
1920 Antwerp Belgium VII
1924 Paris France VIII
1928 Amsterdam Netherlands IX
1932 Los Angeles United States X
1936 Berlin Germany XI
1948 London Great Britain XIV
1952 Helsinki Finland XV
1956 Melbourne Australia XVI
1960 Roma Italy XVII
1964 Tokyo Japan XVIII
1968 Mexico City Mexico XIX
1972 Munich Germany XX
1976 Montreal Canada XXI
1980 Moscow Russia XXII
1984 Los Angeles United States XXIII
1988 Seoul South Korea XXIV
1992 Barcelona Spain XXV
1996 Atlanta United States XXVI
2000 Sydney Australia XXVII
2004 Athens Greece XXVIII
2008 Beijing China XXIX
2012 London Great Britain XXX
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Summer Olympics Home Ground Advantage</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
</head>
<body>
<h2>Summer Olympics: Home Ground Advantage</h2>
<h3>
By <a href="http://vislives.com/" target="_blank">Chris Pudney</a>
<a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank"><img align="top"
alt="Creative Commons License"
src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png"/></a>
</h3>
<p class="legend">Sources:
<a href="http://www.sports-reference.com/olympics/summer/" target="_blank">Sports Reference</a>;
<a href="https://en.wikipedia.org/wiki/Summer_Olympic_Games" target="_blank">Wikipedia</a>
</p>
<span style="float: left">
<label title="Ranking based on gold, silver then bronze medal counts">
<input type="radio" name="yAxis" id="rank" onclick="setYAxis('rank');"/>
Rank
</label><br/>
<label title="Gold medals count">
<input type="radio" name="yAxis" id="gold" onclick="setYAxis('gold');"/>
Gold Medals
</label><br/>
<label title="Silver medals count">
<input type="radio" name="yAxis" id="silver" onclick="setYAxis('silver');"/>
Silver Medals
</label><br/>
<label title="Bronze medals count">
<input type="radio" name="yAxis" id="bronze" onclick="setYAxis('bronze');"/>
Bronze Medals
</label><br/>
<label title="Total medals count">
<input type="radio" name="yAxis" id="total" onclick="setYAxis('total');"/>
Total Medals
</label><br/>
</span>
<span id="chart"></span>
<div class="legend">Mouse over a line or olympiad to highlight a host nation's history.</div>
<script src="chart.js" type="text/javascript"></script>
</body>
</html>
Raw
style.css
body {
margin: 0;
padding: 10px;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
color: #666666;
overflow: hidden;
}
a:link {
color: #ccccff;
}
a:visited {
color: #cccccc;
}
a:active {
color: #ffccff;
}
a.hover {
color: #ffcccc;
}
text.label {
fill: red;
}
line.axis {
stroke: #cccccc;
}
path {
stroke: #cccccc;
fill: none;
}
circle {
fill: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment