D3 Examples - 3 blob (60-20-20) + distraction + spacing

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>
  <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-data-60-20-20e.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)
                        .colorScheme(2)
          d3.select("#plot")
            .datum(data)
            .call(taskResponse)
        });
​
  </script>
</body>
​
    