2 blob

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="chart.js"></script>
  <style>
    #chart-canvas {
  position: absolute;
  z-index: 1;
}

#events-canvas {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 2;
}
.hidden {
  display: none;
}

#plot {
  position: relative;
}
  </style>
</head>

<body>
  <button type="button"
			onclick="taskResponse.realCentroid()">Click for real answer!</button>
  <div id="plot"></div>
  <div id="warning" style="color:red">Warning: The "Next" button will only be enabled when your centroid region is on the plot.</div>
  <script>
    var taskResponse;
    d3.csv("make-dataset.csv", function (d) {
	      d.xDom = +d.xDom;
	      d.yDom = +d.yDom;
	      return d;
	    }, function (err, data) {
	      if (err) {console.log(err)}
	      taskResponse = chart()
	          .width(500)
	          .height(500)
	          .pointType("solid")
	          .xDomain("xDom")
	          .yDomain("yDom")
	          .zDomain("class")
	          .autoPlay(true)
	          .animationSpeed(85)
	          .tutorial(true)

d3.select("#plot")
	        .datum(data)
	        .call(taskResponse)
	    });

</script>
</body>

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