Plotly scatter graph comparison

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<html>
<head>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div id="plotly"></div>
      </div>
      <div class="col-md-6">
        <div id="myDiv"></div>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript

var datad = [{"backgroundColor": "#f86a14", "label": "A", "borderColor": "rgba(66,165,246,1)", "data": [{"y": 5, "r": 15, "x": 5, "name": "desc1"}, {"y": 7, "r": 15, "x": 7, "name": "desc2"}, {"y": 0, "r": 15, "x": 7, "name": "desc3"}]}, {"backgroundColor": "#5C6BC0", "label": "B", "borderColor": "rgba(66,165,246,1)", "data": [{"y": 5, "r": 15, "x": 5, "name": "desc4"}, {"y": 5, "r": 15, "x": 5, "name": "desc5"}]}, {"backgroundColor": "#00AF9E", "label": "C", "borderColor": "rgba(66,165,246,1)", "data": [{"y": 8, "r": 15, "x": 5, "name": "desc6"}, {"y": 10, "r": 15, "x": 6, "name": "desc7"}]}]
	
    var data = [];
    //Data needed
    var xs = [];
    var ys = [];
    var texts = [];
    var sizes = [];
    var groups = [];
    var styles = [];

    for(var i = 0; i < datad.length; i++){
        for(var j = 0; j < datad[i].data.length; j++){
            var p = datad[i].data[j];
            xs.push(p.x);
            ys.push(p.y);
            texts.push(p.name);
            sizes.push(p.r);
            groups.push(datad[i].label);
        }
		var style = {target: datad[i].label, value:{marker:{color:datad[i].backgroundColor}}}
		styles.push(style);
    }
    var traces = [{
        x: xs,
        y: ys,
        text: texts,
        mode: 'markers',
        type: 'scatter',
        hoverinfo: "text",
		opacity:0.7,
        marker:{
            size: sizes,
			sizemode: "area",
			sizeref:0.025
        },
        transforms:[{
            type:"groupby",
            groups: groups,
            styles: styles
        }]
    }];
	console.log(traces);
    var layout = {
	hovermode: "closest",
        xaxis:{
            tickmode:"linear",
            tick0: 0,
            dtick: 1,
            title:"A",
            range:[-0.75,10.75]
        },
        yaxis:{
            tickmode:"linear",
            tick0: 0,
            dtick: 1,
            title:"B",
            range:[-0.75,10.75]
        }
    }
    var myPlot = $("#plotly");

    Plotly.newPlot('plotly',...