Latent Value Learning with Extras

This is an extended version of the simpler Latent Value Learning example, adding uncertainty bands, histograms and a control panel. See the readme of the simpler example for algorithm and simulation details.

<!DOCTYPE html>
<meta charset="utf-8">

<style>

#animation {
  position: relative;
  display: inline-block;
  width: 660px;
}

#controls {
  position: fixed;
  display: inline-block;
  width: 300px;
  padding-top: 120px;
}

.A-color {
  fill: #4B90A6;
}

.B-color {
  fill: #F3A54A;
}

</style>

<body>

<div id="animation">
  <svg width="660" height="500" viewBox="120 50 580 450">
    <line style="stroke:#000; stroke-width: 0.75; fill: none;" y2="250" y1="250" x2="520" x1="180"></line>
    <text class="A-color" text-anchor="middle" font-size="12px" y="200" x="350">A elements</text>
    <text class="B-color" text-anchor="middle" font-size="12px" y="310" x="350">B elements</text>
  </svg>
</div>
<div id="controls">
  <input id="n_As_visible" size=4 value="10" /><small> A elements visible</small><br>
  <input id="n_Bs_visible" size=4 value="10" /><small> B elements visible</small><br>
  <input id="n_As" size=4 value="10" /><small> A elements simulated</small><br>
  <input id="n_Bs" size=4 value="10" /><small> B elements simulated</small><br>
  <input id="n_pairs" size=4 value="8" /><small> pairs per iteration</small><br>
  <br>
  <input id="show_uncertainty" type="checkbox" /><small> show uncertainty bands</small><br>
  <input id="show_histogram" type="checkbox" /><small> show histograms</small><br>
  <br>
  <input id="sim_speed" type="range" min="0" max="100" value="25"><small> simulation speed</small><br>
  <br>
  <button id="animated_learning_restart">restart animation</button>
</div>

animated_learning()

</script>

https://d3js.org/d3.v4.min.js