Week2

README.md

Built with blockbuilder.org

R code to accompany the week2 d3 portion

countries <- c(12, 31, 15, 21, 22, 29, 29, 45, 46, 47, 49, 59, 
               69, 67, 83, 93, 112, 121, 92, 80, 140, 159, 169, 197, 200, 201, 204, 205)
years <- c(1896, 1900, 1904, 1906, 1908, 1912, 1920, 1924, 1928, 1932, 1936, 
           1948, 1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012)

barX <- barplot(countries,xlab = "Years", beside=TRUE)
text(barX, 0, round(years,1),cex=0.8, pos=3,srt=90)

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
    }
]

index.html

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <script src="http://d3js.org/d3.v3.min.js"></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 x = d3.scale.ordinal()
       .rangeRoundBands([0, width], 0.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");
      
       d3.select('body').append("svg")
       .attr("class", "chart")
       
      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');
      
      
      d3.json('data.json', function (error, data) {
        if(error){
        console.log("not working")
           return;
         }



         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) {
              console.log(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", 0.9);
             })
             .on("mouseout", function (d) {
                 div.transition()
                     .duration(500)
                     .style("opacity", 0);
           });
      });
       console.log("done",d3.selectAll("rect"));
   </script>
</body>