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> Dataset Select:
  <select id="dataset">
  <option value="test1.csv">1</option>
  <option value="test2.csv">2</option>
  <option value="test3.csv">3</option>
  <option value="test4.csv">4</option>
  <option value="test5.csv">5</option>
  <option value="test6.csv">6</option>
  <option value="test7.csv">7</option>
  <option value="test8.csv">8</option>
  <option value="easy.csv">easy</option>
  <option value="train1.csv">t1</option>
  <option value="train2.csv">t2</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 drawChart = function () {
      var dataset = this.value
      if (!dataset) {
        dataset = "test1.csv"
      } else {
        taskResponse.stop();
        var plotElem = document.getElementById("plot");
        plotElem.innerHTML = ""
      }
     
      d3.csv(dataset, 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)
        });
    }
    var selector = document.getElementById("dataset");
        selector.addEventListener("change", drawChart)
        drawChart()
  </script>
</body>
​
    