wine quality

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

<body>
  wine category
  <select onchange="loadData()" id="dataset">
    <option>red_wine</option>
    <option>white_wine</option>
  </select>
  
  y axis
  <select onchange="loadData()" id="y_axis">
    <option>fixed_acidity</option>
    <option>volatile_acidity</option>
    <option>citric_acid</option>
    <option>residual_sugar</option>
    <option>chlorides</option>
    <option>free_sulfur_dioxide</option>
    <option>total_sulfur_dioxide</option>
    <option>density</option>
    <option>pH</option>
    <option>sulphates</option>
    <option>alcohol</option>
  </select>
  
  <script>
    var svg = d3.select('body').append('svg')
              .attr('height', '1100')
              .attr('width', '600');
    var g1 = svg.append('g')
             .attr("transform", "translate(20, 40)");
    var g2 = svg.append('g')
             .attr("transform", "translate(550, 40)");
    
    var x1 = d3.scaleLinear()
             .range([0,480]);
    
    var x2 = d3.scaleBand()
             .range([0,480])
             .paddingInner(0.2)
             .align(0.1);
    
    var y = d3.scaleLinear()
             .range([0,480]);
    
    var loadData = function() {
      var f = document.getElementById("dataset").selectedOptions[0].text;
      var dataFile = f + ".csv";
      d3.csv(dataFile, type, function(d){
        
      });      
    }
    
    function type(d){
      d.fixed_acidity = +d.fixed_acidity;
      d.volatile_acidity = +d.volatile_acidity;
      d.citric_acid = +d.citric_acid;
      d.residual_sugar = +d.residual_sugar;
      d.chlorides = +d.chlorides;
      d.free_sulfur_dioxide = +d.free_sulfur_dioxide;
      d.total_sulfur_dioxide = +d.total_sulfur_dioxide;
      d.density = +d.density;
      d.pH = +d.pH;
      d.sulphates = +d.sulphates;
      d.alcohol = +d.alcohol;
      d.quality = +d.quality;
      return d;     
    };

</script>
</body>

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