Skip to content

Instantly share code, notes, and snippets.

@N0taN3rd

N0taN3rd/README.md

Created January 24, 2016 23:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save N0taN3rd/f3fce57929ea5d40c038 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save N0taN3rd/f3fce57929ea5d40c038 to your computer and use it in GitHub Desktop.
Download ZIP
Week2
Raw
README.md
Raw
data.json
[
{
"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
}
]
Raw
index.html
<!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