index.html

---
layout: default
title: Demo
---

<div class="level">
  <div class="level-item has-text-centered">
    <label class="has-text-weight-bold">Select Dataset:</label>
    &nbsp;
    <span class="control has-icons-left">
      <span class="select">
        <select id="data-select">
          <option value="abalone">abalone (4177x10)</option>
          <option value="diamonds">diamonds (53940x11)</option>
          <option value="generated" selected>generated (800x6)</option>
          <option value="iris">iris (150x5)</option>
          <option value="wine">wine (178x15)</option>
          <option value="userstudy-task1">user study task 1 (300x6)</option>
          <option value="userstudy-task2">user study task 2 (300x6)</option>
        </select>
      </span>

      <span class="icon is-small is-left">
        <i class="fa fa-table"></i>
      </span>
    </span> <!-- /control -->
  </div>
</div>

<div class="anisplom">
  <div id="chart"></div>
</div>

<div class="content has-text-centered is-small has-text-grey" id="data-note"></div>

<script src="js/p5.min.js"></script>
<script src="js/p5.dom.min.js"></script>

<script src="js/datasets.js"></script>
<script src="js/anisplom.js"></script>

<script>
  p5.disableFriendlyErrors = true;

  var splom;

  var url = new URL(window.location.href);
  var source = url.searchParams.get('source');

  if (datasets.hasOwnProperty(source)) {
    document.getElementById('data-select').value = source;
  }

  selectData();
  document.getElementById('data-select').addEventListener('change', selectData);

  function selectData() {
    var name = document.getElementById('data-select').value;
    console.assert(datasets.hasOwnProperty(name));

    if (splom !== undefined) {
      remove();
    }

    splom = anisplom('chart', datasets[name], datasets[name].default);
    new p5();

    console.log(datasets[name].details.note);

    document.getElementById('data-note').innerHTML = "<strong>Note:</strong> " + datasets[name].details.note + "<br/><strong>Source:</strong> <a href=\"" + datasets[name].details.link + "\">" + datasets[name].details.link + "</a>";
  }

  function preload() {
    splom.preload();
  }

  function setup() {
    splom.setup();
  }

  function draw() {
    splom.draw();
  }

  function mouseClicked() {
    splom.mouseClicked();
  }

  function mouseMoved() {
    splom.mouseMoved();
  }

  function windowResized() {
    splom.windowResized();
  }

</script>