D3 Examples - Week2

Week2

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)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <script src="https://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>
    