benchmark-results.html

<!DOCTYPE html>
<html>
  <head>
    <title>Benchmarking time!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<script>

(function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './benchmark-results.json', false);
  xhr.send();

  var data = JSON.parse(xhr.response);
  var benchmarks = Object.keys(data);

  var frameworks = {};

  benchmarks.forEach(function (benchmark, i) {
    var results = data[benchmark];

    Object.keys(results).forEach(function (framework) {
      var datapoints = frameworks[framework];
      if (!datapoints) {
        datapoints = frameworks[framework] = [];
      }
      datapoints[i] = results[framework].hz.toFixed(3);
    });
  });

  var colors = ['#E880A2', '#3BBBB2'];

  var datasets = Object.keys(frameworks).map(function (framework, i) {
    return {
      label: framework,
      backgroundColor: colors[i],
      data: frameworks[framework],
    };
  });


  window.addEventListener('load', () => {
    var myBarChart = new Chart(document.getElementById('chart'), {
        type: 'bar',
        data: {
          labels: benchmarks,
          datasets: datasets
        },
    });
  });
})();

</script>
  </head>
  <body>
    <h1>Functional Reactive State Benchmarks</h1>
    <p>numbers are ops/s (higher is better),
      data is taken from <a href="./benchmark-results.json">benchmark-results.json</a>
      which is generated by running the benchmarks in <a href="https://github.com/ds300/derivablejs/tree/master/benchmarks">/benchmarks</a></p>
    <canvas id="chart" width=800 height=400></canvas>
  </body>
</html>