d3 fmm

<!doctype html>
<html>
  <head>
    <title>Graph playground</title>
    <script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js"></script>
    <style>

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

.control {
      display: none;
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      font-size: 13px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
      .control label {
        display: block;
      }

#range {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 90%;
    }

#indicator {
      font-family: Georgia, "Times New Roman", serif;
      position: absolute;
      bottom: 50px;
      right: 20px;
      left: 20px;
      font-size: 1.5em;
      font-weight: 300;
      color: #222222;
    }

#center-view {
      display: block;
      position: absolute;
      bottom: 20px;
      right: 20px;
      cursor: pointer;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
    }
      #center-view:active {
        background: #aaa;
      }
      #center-view:hover {
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <form class="control" id="params">
      <label><input name="input1" value="0" type="number"/> input 1</label>
      <label><input name="input2" value="1" type="number"> input 2</label>
    </form>

<input type="range" id="range" min="10" max="10000" value="250" />
    <div id="indicator">250</div>
    <div id="center-view" title="center view">&bullet;</div>
    <script src="utils.js"></script>
    <script src="index.js"></script>
  </body>
</html>

https://unpkg.com/d3@5.5.0/dist/d3.min.js