tutorial

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="tutorial.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    
#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>
  <p>
    <button id="tutorialbutton" title="Enabled after all circles are on the plot" type="button" class="button is-info" onclick="taskResponse.realCentroid()" disabled>
      Click for real answer!
    </button>
    <em>The open circle indicates the actual center of the category.</em>
  </p>

<div id="warning" class="notification is-danger">
    Warning: The "Click for real answer" button will only be enabled when your centroid region is on the plot.
    <br>
    The "Next" button will only be enabled after you click the "Click for real answer" button.
  </div>

<p>
    After clicking the next button you will perform this task on different datasets. Refer to the bar at the top to check your progress.
  </p>

var taskResponse;
  var curr_question;

(function() {
    // Updating progressBar number
    var file = "0.csv";

d3.csv(file, 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(750)
          .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