2 graph

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css"/>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div class="main-content">
    <div class="main" id="div1"></div>
    <div class="main" id="div2"></div>
  </div>
  <script>
    function create_scatterplot(el, data_string, var_x, var_y, size) {
      const divHeight = el.node().clientHeight
      const divWidth = el.node().clientWidth
      
      const margin = {top: 20, right: 20, bottom: 30, left: 40},
    	width = divWidth - margin.left - margin.right,
    	height = divHeight - margin.top - margin.bottom;
      
      var x = d3.scaleLinear()
          .range([0, width]);

var y = d3.scaleLinear()
          .range([height, 0]);

var r = d3.scaleSqrt()
          .range([2,10]);

var xAxis = d3.axisBottom()
          .scale(x);

var yAxis = d3.axisLeft()
          .scale(y);
      
      var color = d3.scaleOrdinal(d3.schemeCategory20);
			var symbols = d3.scaleOrdinal(d3.symbols);

// creates a generator for symbols
      var symbol = d3.symbol().size(100);

var svg = el.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 tooltip = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

d3.csv(data_string, function(error, data){
        data.forEach(function(d){
          d.sepal_length = +d.sepal_length;
          d.sepal_width  = +d.sepal_width;
          d.petal_length = +d.petal_length;
          d.petal_width  = +d.petal_width;
        });

x.domain(d3.extent(data, function(d){
          return d.sepal_length;
        })).nice();

y.domain(d3.extent(data, function(d){
          return d.sepal_width;
        })).nice();

r.domain(d3.extent(data, function(d){
          return d.petal_length;
        })).nice();

svg.append('g')
          .attr('transform', 'translate(0,' + height + ')')
          .attr('class', 'x axis')
          .call(xAxis);

svg.append('g')
          .attr('transform', 'translate(0,0)')
          .attr('class', 'y axis')
          .call(yAxis);

svg.append('text')
          .attr('x', 10)
          .attr('y', 10)
          .attr('class', 'label')
          .text('Sepal Width');

svg.append('text')
          .attr('x', width)
          .attr('y', height - 10)
          .attr('text-anchor', 'end')
          .attr('class', 'label')
          .text('Sepal Length');

// we use the ordinal scale symbols to generate symbols
        // such as d3.symbolCross, etc..
        // -> symbol.type(d3.symbolCross)()
          svg.selectAll(".symbol")
          .data(data)
        .enter().append("path")
          .attr("class", "symbol")
          .attr("d", function(d, i) { return symbol.type(symbols(d.species))(); })
          .style("fill", function(d) { return color(d.species); })
          .attr("transform", function(d) { 
            return "translate(" + x(d.sepal_length) + "," + y(d.sepal_width) +")"; 
          });

var clicked = false;

var legend = svg.selectAll(".legend")
          .data(color.domain())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("path")
          .style("fill", function(d) { return color(d); })
            .attr("d", function(d, i) { return symbol.type(symbols(d))(); })
            .attr("transform", function(d, i) { 
              return "translate(" + (width -10) + "," + 10 + ")"; 
            })
            .on('click', function(event) {
          clicked = !clicked;
          svg.selectAll(".symbol").style("display", function(point) {
            if (!clicked) {
              return "block"
            } else {
              return point.species !== event ? "none" : "block"
            }

})
        })

legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { return d; });

});
      
    }
    
    
    
    create_scatterplot(d3.select("#div1"), 'iris.csv');
    create_scatterplot(d3.select("#div2"), 'iris.csv');

</script>
</body>

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