Week2

forked from N0taN3rd's block: Week2

<!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>

https://d3js.org/d3.v3.min.js