wine quality test 2

forked from js418's block: wine quality test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>  
  <script>
    var tooltip = d3.select("body")
	      .append("div")
	      .style("position", "absolute")
	      .style("font-family", "sans-serif")
	      .style("font-size", "10px")
	      .style("z-index", "10")
	      .style("visibility", "hidden");
    
    var svg = d3.select('body').append('svg')
              .attr('height', '500')
              .attr('width', '1000');
    var g1 = svg.append('g')
             .attr("transform", "translate(80, 40)");
    var g2 = svg.append('g')
             .attr("transform", "translate(600, 40)");
    var g3 = svg.append('g')
             .attr("transform", "translate(600, 300)");
    
    var x1 = d3.scaleLinear()
             .range([0,400]);
    
    var x2 = d3.scaleBand()
             .range([0,300])
             .paddingInner(0.2)
             .align(0.1);
    
    var y1 = d3.scaleLinear()
             .range([400,0]);
    
    var y2 = d3.scaleLinear()
             .range([200,0]);
    
    var quality_scale = d3.scaleOrdinal(d3.schemeCategory10);   
        
    d3.csv("red_wine.csv", type, function(d){
      
      x1.domain(d3.extent(d, function (d){ return d.pH;})).nice();
      y1.domain(d3.extent(d, function (d){ return d.density;})).nice();
      quality_scale.domain(d3.extent(d, function (d){ return d.quality;}));
      
      // add scatter plot x axis
      g1.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0,400)")
      .call(d3.axisBottom(x1).ticks(10))
      .append("text")
      .attr("x", 380)
      .attr("y", -10)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("pH");
      
      // add scatter plot y axis
      g1.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y1).ticks(10))
      .append("text")
      .attr("x", 5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("density");
      
      // add scatter points in scatter plot
      g1.selectAll("circle")
      .data(d)
      .enter().append("circle")
      .attr("opacity", 0.6)
      .attr("cx", function(d) { return x1(d.pH); })
      .attr("cy", function(d) { return y1(d.density);})
      .attr("r", 4)
      .style("fill", function(d) { return quality_scale(d.quality);})
      .on("mouseover", function(d){
		      return tooltip.style("visibility", "visible")
          .html("quality: " + d.quality + "<br/> " +
                "pH: " + d.pH + "<br/> " + 
                "density: " + d.density);
       })
	    .on("mousemove", function(d){
		      return tooltip.style("top", (event.pageY-10)+"px")
          .style("left",(event.pageX+10)+"px")
          .html("quality: " + d.quality + "<br/> " +
                "pH: " + d.pH + "<br/> " + 
                "density: " + d.density);
      })
	    .on("mouseout", function(d){
		      return tooltip.style("visibility", "hidden");
	    });
      
     // add scatter plot title
     g1.append("text")
    .attr("x", 200)
    .style("text-anchor", "middle")
    .attr("y", 15)
    .attr("font-size", 15)
    .text("sample size: " + d.length);
      
      // set up legend
      var legend = g1.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
      .selectAll("g")
      .data(quality_scale.domain().sort())
      .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 15 + ")"; });

legend.append("rect")
      .attr("x", 400)
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", quality_scale);
  
      legend.append("text")
      .attr("x", 390)
      .attr("y", 9)
      .attr("dy", "0.32em")
      .text(function(d) { return "quality: "+ d; });
      
      // calculate the mean value of y axis for bar chart
      x2.domain(quality_scale.domain().sort());
      var avg = [];
      var pH_mean = d3.nest()
          .key(function(d) { return d.quality; })
          .rollup(function(v){
            var t = d3.mean(v, function(d) { return d.pH; });
            var f = d3.format(".3f");
            avg.push(f(t));
            return t; 
          })
          .entries(d);
      var barData = [];
      for(k=0; k<avg.length;++k){
        barData.push({quality:pH_mean[k].key, mean:avg[k]})
      };
      y2.domain(d3.extent(avg)).nice();
      
      // add bar chart x axis
      g2.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0,200)")
      .call(d3.axisBottom(x2))
      .append("text")
      .attr("x", 305)
      .attr("y", -10)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("quality");
      
      // add bar chart y axis
      g2.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y2).ticks(6))
      .append("text")
      .attr("x", 5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("pH");
      
      // add bar in the bar chart
      g2.selectAll("rect")
      .data(barData)
      .enter().append("rect")
      .attr("x", function(d) { return x2(d.quality); })
      .attr("y", function(d) { return 200-y2(d.mean); })
      .attr("width", x2.bandwidth())
      .attr("height", function(d) { return y2(d.mean); })
      .attr("fill", function(d) { return quality_scale(d.quality); })
      .on("mouseover", function(d){
		      return tooltip.style("visibility", "visible")
          .html("average pH: " + d.mean);
       })
	    .on("mousemove", function(d){
		      return tooltip.style("top", (event.pageY-10)+"px")
          .style("left",(event.pageX+10)+"px")
          .html("average pH: " + d.mean);
      })
	    .on("mouseout", function(d){
		      return tooltip.style("visibility", "hidden");
	    });
      
      //add title for bar chart
       g2.append("text")
       .attr("x", 150)
       .style("text-anchor", "middle")
       .attr("y", 15)
       .attr("font-size", 15)
       .text("average pH by quality");
      
      //calculate the percentage for pie chart
      var p = [];
      var nest = d3.nest()
          .key(function(d) { return d.quality; })
          .rollup(function(v) {
            p.push(v.length);
            return v.length; })
          .entries(d);
      var pieData = [];
      var pf = d3.format('.1%');
      for(k=0; k<p.length;++k){
        pieData.push({quality:nest[k].key, number:p[k]});
      };
      
      var pie = d3.pie()
            .sort(null)
            .value(function(d) { return d.number; })
            (pieData);
      
      var arc = d3.arc()
            .outerRadius(100)
            .innerRadius(20)
            .padAngle(0.03);
      
      g3.selectAll("path")
            .data(pie)            
            .enter()
            .append("path")
            .attr("transform", "translate(150,80)")
            .attr("d", arc)
            .attr("fill",function(d) { return quality_scale(d.data.quality);})
            .on("mouseover", function(d){
		            return tooltip.style("visibility", "visible")
                .html("quality: " + d.data.quality+"<br/>" +
                     "percentage: " + pf(d.value/d3.sum(p)));})
	          .on("mousemove", function(d){
		            return tooltip.style("top", (event.pageY-10)+"px")
                .style("left",(event.pageX+10)+"px")
                .html("quality: " + d.data.quality+"<br/>" +
                     "percentage: " + pf(d.value/d3.sum(p)));})
	          .on("mouseout", function(d){
		            return tooltip.style("visibility", "hidden")});
     
      
        
   });      
    
    function type(d){
      d.density = +d.density;
      d.pH = +d.pH;
      d.quality = +d.quality;
      return d;     
    };

</script>
</body>

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