D3 Examples - test data

xxxxxxxxxx
 
<!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>
​
    