HW34_Scatterplot

forked from jwang1616's block: HW34_Scatterplot

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

<div id="drop1" align=left>
   <b>Select the predictor variable x:</b>
</div>

<div id="drop2" align=left>
   <b>Select the response variable y:</b>
</div>

<body>
  <script>
    var margin = {top: 100, right: 80, bottom: 100, left: 80},
        width = 480 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var x_sca = d3.scaleLinear().range([0, width]),
        y_sca = d3.scaleLinear().range([height, 0]),
        x_bar = d3.scaleBand().range([0, width]).padding(0.1),
        y_bar = d3.scaleLinear().range([height, 0]);
    
    var sca = 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 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){
      //Scatterplot
      var features = d3.keys(data[0])
                       .filter(function(d){
                               return ((d != "Type") & (d != "Category")); });
      var xselection = features[0],
          yselection = features[0];
        
      x_sca.domain(d3.extent(data, function(d) { return +d[xselection]; }));
      y_sca.domain(d3.extent(data, function(d) { return +d[yselection]; }));
      
      var scakey = function(d) { return d.Type;},
          scacolor = d3.scaleOrdinal(d3.schemeCategory10);
      
      sca.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(x_sca))
         .selectAll("text")  
         .style("text-anchor", "start")
         .attr("dy", "1em")
         .attr("transform", "rotate(45)" );
        
      sca.append("text")
         .attr("x", width)
         .attr("y", height-5)
         .style("text-anchor", "start")
         .text("Units")
         .style("font-size", "12px");

sca.append("g")
         .attr("class", "y axis")
         .call(d3.axisLeft(y_sca));
      
      sca.append("text")
         .attr("dy", "-1em")
         .style("text-anchor", "end")
         .text("Units")
         .style("font-size", "12px");
      
      sca.selectAll("dot")
         .data(data)
         .enter()
         .append("circle")
         .attr("r", 3.5)
         .attr("cx", function(d) { return x_sca(+d[xselection]); })
         .attr("cy", function(d) { return y_sca(+d[yselection]); })
         .style("fill", function(d) { return scacolor(scakey(d)); });
      
      var legend = sca.selectAll(".legend")
                      .data(scacolor.domain().sort())
                      .enter().append("g")
                      .attr("class", "legend");

legend.append("rect")
            .attr("x", function(d, i){ return 80 + i * 100; })
            .attr("y", -70)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", scacolor);

legend.append("text")
      			.attr("x", function(d, i){ return 70 + i * 100; })
      			.attr("y", -60)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { return "Type: " + d;})
            .style("font-size", "12px");
      
      //Bar chart
      var transdata = d3.nest().key(function(d){ return d.PostWeekday; })
                        .rollup(function(d){ 
                         return d3.mean(d, function(g){ return g.TotalInteractions;
                         });
                         })
                        .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("Average Interactions:" + "<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("Units")
         .style("font-size", "12px");
      
      //Two dropdown menus
      var xselector = d3.select("#drop1")
    	                  .append("select")
    	                  .attr("id", "dropdown")
    	                  .on("change", function(){
        	                 xselection = this.value;
                         
        	                 x_sca.domain(d3.extent(data, function(d) { 
                                                        return +d[xselection]; }));
                         
                           sca.select("g.x.axis")
                              .transition()
                              .call(d3.axisBottom(x_sca))
                              .selectAll("text")  
         											.style("text-anchor", "start")
         											.attr("dy", "1em")
         											.attr("transform", "rotate(45)" );

sca.selectAll("circle")
         											.data(data)
           		                .transition()
				                      .attr("cx", function(d) { 
                                          return x_sca(+d[xselection]); })
                          });

xselector.selectAll("option")
               .data(features)
               .enter()
               .append("option")
               .attr("value", function(d){ return d; })
               .text(function(d){ return d; });
      
      var yselector = d3.select("#drop2")
    	                  .append("select")
    	                  .attr("id", "dropdown")
    	                  .on("change", function(){
        	                 yselection = this.value;
                         
        	                 y_sca.domain(d3.extent(data, function(d) { 
                                                        return +d[yselection]; }));
                         
                           sca.select("g.y.axis")
                              .transition()
                              .call(d3.axisLeft(y_sca));

sca.selectAll("circle")
         											.data(data)
           		                .transition()
				                      .attr("cy", function(d) { 
                                          return y_sca(+d[yselection]); })
                          });

yselector.selectAll("option")
               .data(features)
               .enter()
               .append("option")
               .attr("value", function(d){ return d; })
               .text(function(d){ return d; });
      
      //Brush selection
      var brush = d3.brush().extent([[0, 0], [width, height]])
                    .on("brush", brushed);
      
      sca.append("g")
         .attr("class", "brush")
         .call(brush);
                         
      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.PostWeekday; })
                        .rollup(function(d){ 
                         return d3.mean(d, function(g){ return g.TotalInteractions;
                         });
                         })
                        .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>

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