Built with blockbuilder.org
Created
January 24, 2016 23:33
-
-
Save N0taN3rd/f3fce57929ea5d40c038 to your computer and use it in GitHub Desktop.
Week2
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
[ | |
{ | |
"Year": 2012, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 205, | |
"Participants": 10519, | |
"Men": 5864, | |
"Women": 4655, | |
"Sports": 32, | |
"Events": 302 | |
}, | |
{ | |
"Year": 2008, | |
"City": "Beijing", | |
"Country": "China", | |
"Countries": 204, | |
"Participants": 10901, | |
"Men": 6290, | |
"Women": 4611, | |
"Sports": 34, | |
"Events": 303 | |
}, | |
{ | |
"Year": 2004, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 201, | |
"Participants": 10561, | |
"Men": 6257, | |
"Women": 4304, | |
"Sports": 34, | |
"Events": 301 | |
}, | |
{ | |
"Year": 2000, | |
"City": "Sydney", | |
"Country": "Australia", | |
"Countries": 200, | |
"Participants": 10648, | |
"Men": 6579, | |
"Women": 4068, | |
"Sports": 34, | |
"Events": 300 | |
}, | |
{ | |
"Year": 1996, | |
"City": "Atlanta", | |
"Country": "United States", | |
"Countries": 197, | |
"Participants": 10342, | |
"Men": 6819, | |
"Women": 3520, | |
"Sports": 31, | |
"Events": 271 | |
}, | |
{ | |
"Year": 1992, | |
"City": "Barcelona", | |
"Country": "Spain", | |
"Countries": 169, | |
"Participants": 9386, | |
"Men": 6659, | |
"Women": 2721, | |
"Sports": 29, | |
"Events": 257 | |
}, | |
{ | |
"Year": 1988, | |
"City": "Seoul", | |
"Country": "South Korea", | |
"Countries": 159, | |
"Participants": 8453, | |
"Men": 6249, | |
"Women": 2202, | |
"Sports": 27, | |
"Events": 237 | |
}, | |
{ | |
"Year": 1984, | |
"City": "Los Angeles", | |
"Country": "United States", | |
"Countries": 140, | |
"Participants": 6799, | |
"Men": 5224, | |
"Women": 1567, | |
"Sports": 26, | |
"Events": 221 | |
}, | |
{ | |
"Year": 1980, | |
"City": "Moskva", | |
"Country": "Soviet Union", | |
"Countries": 80, | |
"Participants": 5259, | |
"Men": 4135, | |
"Women": 1123, | |
"Sports": 23, | |
"Events": 203 | |
}, | |
{ | |
"Year": 1976, | |
"City": "Montréal", | |
"Country": "Canada", | |
"Countries": 92, | |
"Participants": 6073, | |
"Men": 4812, | |
"Women": 1260, | |
"Sports": 23, | |
"Events": 198 | |
}, | |
{ | |
"Year": 1972, | |
"City": "München", | |
"Country": "West Germany", | |
"Countries": 121, | |
"Participants": 7113, | |
"Men": 6052, | |
"Women": 1060, | |
"Sports": 23, | |
"Events": 195 | |
}, | |
{ | |
"Year": 1968, | |
"City": "Ciudad de México", | |
"Country": "Mexico", | |
"Countries": 112, | |
"Participants": 5558, | |
"Men": 4775, | |
"Women": 783, | |
"Sports": 20, | |
"Events": 172 | |
}, | |
{ | |
"Year": 1964, | |
"City": "Tokyo", | |
"Country": "Japan", | |
"Countries": 93, | |
"Participants": 5137, | |
"Men": 4457, | |
"Women": 680, | |
"Sports": 21, | |
"Events": 163 | |
}, | |
{ | |
"Year": 1960, | |
"City": "Roma", | |
"Country": "Italy", | |
"Countries": 83, | |
"Participants": 5351, | |
"Men": 4738, | |
"Women": 613, | |
"Sports": 19, | |
"Events": 150 | |
}, | |
{ | |
"Year": 1956, | |
"City": "Melbourne", | |
"Country": "Australia", | |
"Countries": 67, | |
"Participants": 3189, | |
"Men": 2818, | |
"Women": 371, | |
"Sports": 18, | |
"Events": 145 | |
}, | |
{ | |
"Year": 1952, | |
"City": "Helsinki", | |
"Country": "Finland", | |
"Countries": 69, | |
"Participants": 4932, | |
"Men": 4411, | |
"Women": 521, | |
"Sports": 19, | |
"Events": 149 | |
}, | |
{ | |
"Year": 1948, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 59, | |
"Participants": 4397, | |
"Men": 3951, | |
"Women": 445, | |
"Sports": 21, | |
"Events": 149 | |
}, | |
{ | |
"Year": 1936, | |
"City": "Berlin", | |
"Country": "Germany", | |
"Countries": 49, | |
"Participants": 4484, | |
"Men": 4124, | |
"Women": 360, | |
"Sports": 24, | |
"Events": 143 | |
}, | |
{ | |
"Year": 1932, | |
"City": "Los Angeles", | |
"Country": "United States", | |
"Countries": 47, | |
"Participants": 1921, | |
"Men": 1719, | |
"Women": 202, | |
"Sports": 18, | |
"Events": 126 | |
}, | |
{ | |
"Year": 1928, | |
"City": "Amsterdam", | |
"Country": "Netherlands", | |
"Countries": 46, | |
"Participants": 3248, | |
"Men": 2936, | |
"Women": 312, | |
"Sports": 17, | |
"Events": 120 | |
}, | |
{ | |
"Year": 1924, | |
"City": "Paris", | |
"Country": "France", | |
"Countries": 45, | |
"Participants": 3256, | |
"Men": 3100, | |
"Women": 156, | |
"Sports": 20, | |
"Events": 130 | |
}, | |
{ | |
"Year": 1920, | |
"City": "Antwerpen", | |
"Country": "Belgium", | |
"Countries": 29, | |
"Participants": 2677, | |
"Men": 2599, | |
"Women": 78, | |
"Sports": 25, | |
"Events": 160 | |
}, | |
{ | |
"Year": 1912, | |
"City": "Stockholm", | |
"Country": "Sweden", | |
"Countries": 29, | |
"Participants": 2424, | |
"Men": 2356, | |
"Women": 53, | |
"Sports": 17, | |
"Events": 107 | |
}, | |
{ | |
"Year": 1908, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 22, | |
"Participants": 2024, | |
"Men": 1980, | |
"Women": 44, | |
"Sports": 24, | |
"Events": 109 | |
}, | |
{ | |
"Year": 1906, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 21, | |
"Participants": 841, | |
"Men": 835, | |
"Women": 6, | |
"Sports": 13, | |
"Events": 74 | |
}, | |
{ | |
"Year": 1904, | |
"City": "St. Louis", | |
"Country": "United States", | |
"Countries": 15, | |
"Participants": 650, | |
"Men": 644, | |
"Women": 6, | |
"Sports": 18, | |
"Events": 95 | |
}, | |
{ | |
"Year": 1900, | |
"City": "Paris", | |
"Country": "France", | |
"Countries": 31, | |
"Participants": 1224, | |
"Men": 1201, | |
"Women": 23, | |
"Sports": 20, | |
"Events": 95 | |
}, | |
{ | |
"Year": 1896, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 12, | |
"Participants": 176, | |
"Men": 176, | |
"Women": 0, | |
"Sports": 9, | |
"Events": 43 | |
} | |
] |
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> | |
<head> | |
<meta charset="utf-8"> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
.bar { | |
fill: #c07f2b; | |
} | |
.bar text { | |
fill: white; | |
font: 10px sans-serif; | |
text-anchor: end; | |
} | |
.bar:hover { | |
fill: brown; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.tooltip { | |
background: #eee; | |
box-shadow: 0 0 5px #999999; | |
color: #333; | |
display: none; | |
font-size: 12px; | |
left: 130px; | |
padding: 10px; | |
position: absolute; | |
text-align: center; | |
top: 95px; | |
width: 80px; | |
z-index: 10; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var data = [ | |
{ | |
"Year": 2012, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 205, | |
"Participants": 10519, | |
"Men": 5864, | |
"Women": 4655, | |
"Sports": 32, | |
"Events": 302 | |
}, | |
{ | |
"Year": 2008, | |
"City": "Beijing", | |
"Country": "China", | |
"Countries": 204, | |
"Participants": 10901, | |
"Men": 6290, | |
"Women": 4611, | |
"Sports": 34, | |
"Events": 303 | |
}, | |
{ | |
"Year": 2004, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 201, | |
"Participants": 10561, | |
"Men": 6257, | |
"Women": 4304, | |
"Sports": 34, | |
"Events": 301 | |
}, | |
{ | |
"Year": 2000, | |
"City": "Sydney", | |
"Country": "Australia", | |
"Countries": 200, | |
"Participants": 10648, | |
"Men": 6579, | |
"Women": 4068, | |
"Sports": 34, | |
"Events": 300 | |
}, | |
{ | |
"Year": 1996, | |
"City": "Atlanta", | |
"Country": "United States", | |
"Countries": 197, | |
"Participants": 10342, | |
"Men": 6819, | |
"Women": 3520, | |
"Sports": 31, | |
"Events": 271 | |
}, | |
{ | |
"Year": 1992, | |
"City": "Barcelona", | |
"Country": "Spain", | |
"Countries": 169, | |
"Participants": 9386, | |
"Men": 6659, | |
"Women": 2721, | |
"Sports": 29, | |
"Events": 257 | |
}, | |
{ | |
"Year": 1988, | |
"City": "Seoul", | |
"Country": "South Korea", | |
"Countries": 159, | |
"Participants": 8453, | |
"Men": 6249, | |
"Women": 2202, | |
"Sports": 27, | |
"Events": 237 | |
}, | |
{ | |
"Year": 1984, | |
"City": "Los Angeles", | |
"Country": "United States", | |
"Countries": 140, | |
"Participants": 6799, | |
"Men": 5224, | |
"Women": 1567, | |
"Sports": 26, | |
"Events": 221 | |
}, | |
{ | |
"Year": 1980, | |
"City": "Moskva", | |
"Country": "Soviet Union", | |
"Countries": 80, | |
"Participants": 5259, | |
"Men": 4135, | |
"Women": 1123, | |
"Sports": 23, | |
"Events": 203 | |
}, | |
{ | |
"Year": 1976, | |
"City": "Montréal", | |
"Country": "Canada", | |
"Countries": 92, | |
"Participants": 6073, | |
"Men": 4812, | |
"Women": 1260, | |
"Sports": 23, | |
"Events": 198 | |
}, | |
{ | |
"Year": 1972, | |
"City": "München", | |
"Country": "West Germany", | |
"Countries": 121, | |
"Participants": 7113, | |
"Men": 6052, | |
"Women": 1060, | |
"Sports": 23, | |
"Events": 195 | |
}, | |
{ | |
"Year": 1968, | |
"City": "Ciudad de México", | |
"Country": "Mexico", | |
"Countries": 112, | |
"Participants": 5558, | |
"Men": 4775, | |
"Women": 783, | |
"Sports": 20, | |
"Events": 172 | |
}, | |
{ | |
"Year": 1964, | |
"City": "Tokyo", | |
"Country": "Japan", | |
"Countries": 93, | |
"Participants": 5137, | |
"Men": 4457, | |
"Women": 680, | |
"Sports": 21, | |
"Events": 163 | |
}, | |
{ | |
"Year": 1960, | |
"City": "Roma", | |
"Country": "Italy", | |
"Countries": 83, | |
"Participants": 5351, | |
"Men": 4738, | |
"Women": 613, | |
"Sports": 19, | |
"Events": 150 | |
}, | |
{ | |
"Year": 1956, | |
"City": "Melbourne", | |
"Country": "Australia", | |
"Countries": 67, | |
"Participants": 3189, | |
"Men": 2818, | |
"Women": 371, | |
"Sports": 18, | |
"Events": 145 | |
}, | |
{ | |
"Year": 1952, | |
"City": "Helsinki", | |
"Country": "Finland", | |
"Countries": 69, | |
"Participants": 4932, | |
"Men": 4411, | |
"Women": 521, | |
"Sports": 19, | |
"Events": 149 | |
}, | |
{ | |
"Year": 1948, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 59, | |
"Participants": 4397, | |
"Men": 3951, | |
"Women": 445, | |
"Sports": 21, | |
"Events": 149 | |
}, | |
{ | |
"Year": 1936, | |
"City": "Berlin", | |
"Country": "Germany", | |
"Countries": 49, | |
"Participants": 4484, | |
"Men": 4124, | |
"Women": 360, | |
"Sports": 24, | |
"Events": 143 | |
}, | |
{ | |
"Year": 1932, | |
"City": "Los Angeles", | |
"Country": "United States", | |
"Countries": 47, | |
"Participants": 1921, | |
"Men": 1719, | |
"Women": 202, | |
"Sports": 18, | |
"Events": 126 | |
}, | |
{ | |
"Year": 1928, | |
"City": "Amsterdam", | |
"Country": "Netherlands", | |
"Countries": 46, | |
"Participants": 3248, | |
"Men": 2936, | |
"Women": 312, | |
"Sports": 17, | |
"Events": 120 | |
}, | |
{ | |
"Year": 1924, | |
"City": "Paris", | |
"Country": "France", | |
"Countries": 45, | |
"Participants": 3256, | |
"Men": 3100, | |
"Women": 156, | |
"Sports": 20, | |
"Events": 130 | |
}, | |
{ | |
"Year": 1920, | |
"City": "Antwerpen", | |
"Country": "Belgium", | |
"Countries": 29, | |
"Participants": 2677, | |
"Men": 2599, | |
"Women": 78, | |
"Sports": 25, | |
"Events": 160 | |
}, | |
{ | |
"Year": 1912, | |
"City": "Stockholm", | |
"Country": "Sweden", | |
"Countries": 29, | |
"Participants": 2424, | |
"Men": 2356, | |
"Women": 53, | |
"Sports": 17, | |
"Events": 107 | |
}, | |
{ | |
"Year": 1908, | |
"City": "London", | |
"Country": "Great Britain", | |
"Countries": 22, | |
"Participants": 2024, | |
"Men": 1980, | |
"Women": 44, | |
"Sports": 24, | |
"Events": 109 | |
}, | |
{ | |
"Year": 1906, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 21, | |
"Participants": 841, | |
"Men": 835, | |
"Women": 6, | |
"Sports": 13, | |
"Events": 74 | |
}, | |
{ | |
"Year": 1904, | |
"City": "St. Louis", | |
"Country": "United States", | |
"Countries": 15, | |
"Participants": 650, | |
"Men": 644, | |
"Women": 6, | |
"Sports": 18, | |
"Events": 95 | |
}, | |
{ | |
"Year": 1900, | |
"City": "Paris", | |
"Country": "France", | |
"Countries": 31, | |
"Participants": 1224, | |
"Men": 1201, | |
"Women": 23, | |
"Sports": 20, | |
"Events": 95 | |
}, | |
{ | |
"Year": 1896, | |
"City": "Athina", | |
"Country": "Greece", | |
"Countries": 12, | |
"Participants": 176, | |
"Men": 176, | |
"Women": 0, | |
"Sports": 9, | |
"Events": 43 | |
} | |
]; | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .1); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var barChart = d3.select('.chart').attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var div = d3.select("body").append("div") | |
.classed("tooltip", true) | |
.style("opacity", 0); | |
div.append('div') | |
.attr('class', 'label'); | |
var rev = data.reverse(); | |
y.domain([0, d3.max(rev, function (d) { | |
return d.Countries; | |
})]); | |
x.domain(rev.map(function (d) { | |
return d.Year; | |
})); | |
barChart.append('g').classed('x axis', true) | |
.attr('transform', "translate(0," + height + ")").call(xAxis); | |
barChart.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Countries"); | |
barChart.selectAll(".bar") | |
.data(rev) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function (d) { | |
return x(d.Year); | |
}) | |
.attr("width", x.rangeBand()) | |
.attr("y", function (d) { | |
return y(d.Countries); | |
}) | |
.attr("height", function (d) { | |
return height - y(d.Countries); | |
}).on("mouseover", function (d) { | |
div.select('.label').html("Host: " + d.Country + " hosting: " + d.Countries+" contries"); | |
div.style('display', 'inline-block'); | |
div.transition() | |
.duration(200) | |
.style("opacity", .9); | |
}) | |
.on("mouseout", function (d) { | |
div.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
</script> | |
<svg class="chart"></svg> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment