test data

<!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>
  <select id="dataset">
  <option value="test1">1</option>
  <option value="test2">2</option>
  <option value="test3">3</option>
  <option value="test4">4</option>
  <option value="test5">5</option>
</select>
  <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;
    var d = document.getElementById("dataset");
		d.addEventListener("change", function () {
      d3.csv(this.value, function (d) {
	      d.xDom = +d.xDom;
	      d.yDom = +d.yDom;
	      return d;
	    }, function (err, data) {
	      if (err) {console.log(err)}
	      taskResponse = chart()
	          .width(600)
	          .height(600)
	          .pointType("solid")
	          .xDomain("xDom")
	          .yDomain("yDom")
	          .zDomain("class")
	          .autoPlay(true)
	          .animationSpeed(85)
	          .tutorial(true)
						.colorScheme(2)
	      d3.select("#plot")
	        .datum(data)
	        .call(taskResponse)
	    });
    })

</script>
</body>

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