D3 Examples - HW23

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div.tooltip {
      position: absolute;
      text-align: center;
      width: 60px;
      height: 28px;
      padding: 2px;
      font: 12px sans-serif;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
}
  </style>
</head>
​
​
<body>
  <script>
    var margin = {top: 80, right: 80, bottom: 80, left: 80},
        width = 880 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var x_bar = d3.scaleBand().range([0, width]).padding(0.1),
        y_bar = d3.scaleLinear().range([height, 0]);
    
    
    
    var bar = d3.select("body").append("svg")
                .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").attr("class", "tooltip")
                .style("opacity", 0);
    
    d3.csv("Facebook.csv", drawData);
    
    function drawData(data){
      
      //Bar chart
      var transdata = d3.nest().key(function(d){ return d.Type; })
                        .rollup(function(d){ 
                         return d3.mean(d, function(g){ return g.Post_Consumers;
                         });
                         })
                        .entries(data);
      
       var barcolor = d3.scaleOrdinal(d3.schemeCategory10);
​
      x_bar.domain(transdata.map(function(d) { return d.key; }));
      y_bar.domain([0, d3.max(transdata, function(d) { return d.value; })]);
      
      bar.selectAll(".bar")
         .data(transdata)
         .enter()
         .append("rect")
         .attr("class", "bar")
         .attr("x", function(d) { return x_bar(d.key); })
         .attr("width", x_bar.bandwidth())
         .attr("y", function(d) { return y_bar(+d.value); })
         .attr("height", function(d) { return height - y_bar(+d.value); })
         .attr("fill", function(d,i){ return barcolor(i)})
         .attr("id", function(d, i) { return i; })
         .on("mouseover", function(d){ 
              d3.select(this).attr("fill", "#ffff00");
              div.transition().duration(200).style("opacity", .9);
              div.html("Averaged Lifetime Post Consumers:" + "<br/>" + d3.format(".2f")(d.value))
                 .style("left", (d3.event.pageX) + "px")
                 .style("top", (d3.event.pageY) + "px");           
              })
         .on("mouseout", function(d){
              d3.select(this)
                .attr("fill", function(d){ return barcolor(this.id);});
              div.transition().duration(200).style("opacity", 0);
              })
      
      bar.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(x_bar))
         .selectAll("text")
         .attr("transform", "rotate(45)")
         .style("text-anchor", "start");
​
        bar.append("g")
         .attr("class", "y axis")
         .call(d3.axisLeft(y_bar));
      
      bar.append("text")
         .attr("dy", "1em")
         .style("text-anchor", "end")
         .text("Lifetime Post Consumers")
         .style("font-size", "8px");
      
      
      //Brush selection
      var brush = d3.brush().extent([[0, 0], [width, height]])
                    .on("brush", brushed);
      
      
      function brushed(){
        var chosen = d3.brushSelection(this);
        
        var newdata = data.filter(function(d){ 
                                  return chosen[0][0] <= x_sca(+d[xselection]) && 
                                         x_sca(+d[xselection]) <= chosen[1][0] &&
                                         chosen[0][1] <= y_sca(+d[yselection]) && 
                                         y_sca(+d[yselection]) <= chosen[1][1];
                                 })
        
        if (newdata.length != 0){
                    transdata = d3.nest().key(function(d){ return d.Type; })
                        .rollup(function(d){ 
                         return d3.mean(d, function(g){ return g.Post_Consumers;
                         });
                         })
                        .entries(newdata);
          
          y_bar.domain([0, d3.max(transdata, function(d) { return d.value; })]);
          
          bar.select("g.y.axis")
             .transition()
             .call(d3.axisLeft(y_bar));
        
          bar.selectAll("rect")
             .data(transdata)
             .transition()
             .attr("y", function(d) { return y_bar(+d.value); })
             .attr("height", function(d) { return height - y_bar(+d.value); })
        }
      }
    }
  </script>
</body>
    