D3 Examples - wine quality test

xxxxxxxxxx
 
<!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(500, 40)");
    
    var x1 = d3.scaleLinear()
             .range([0,400]);
    
    var x2 = d3.scaleBand()
             .range([0,200])
             .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.schemeCategory20);
    
    d3.csv("red_wine.csv", type, function(d){
      
      x1.domain(d3.extent(d, function (d){ return d.pH;}));
      y1.domain(d3.extent(d, function (d){ return d.density;}));
      quality_scale.domain(d3.extent(d, function (d){ return d.quality;}))
      
      g1.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0,400)")
      .call(d3.axisBottom(x1))
      .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");
      
      g1.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y1))
      .append("text")
      .attr("x", 5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("density");
      
      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")
          .text("pH: " + d.pH + ", " + "density: " + d.density + ", " + "quality: " + d.quality);
       })
        .on("mousemove", function(d){
              return tooltip.style("top", (event.pageY-10)+"px")
          .style("left",(event.pageX+10)+"px")
          .text("pH: " + d.pH + ", " + "density: " + d.density + ", " + "quality: " + d.quality);
      })
        .on("mouseout", function(d){
              return tooltip.style("visibility", "hidden");
        });
      
     g1.append("text")
    .attr("x", 200)
    .style("text-anchor", "middle")
    .attr("y", 15)
    .attr("font-size", 15)
    .text("sample size: " + d.length);
      
      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", 380)
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", quality_scale);
  
      legend.append("text")
      .attr("x", 370)
      .attr("y", 9)
      .attr("dy", "0.32em")
      .text(function(d) { return "quality: "+ d; });
      
      x2.domain(d3.extent(d, function (d){ return d.pH;}));
      
        
        
      });      
    
    function type(d){
      d.density = +d.density;
      d.pH = +d.pH;
      d.quality = +d.quality;
      return d;     
    };
    
               
​
  </script>
</body>
    