force network

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
  <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'></script>
  <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css' />
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>

<div class="container">
      <div class="columns">
        <div class="column col-2" id="controls-stage">
          <div id="home-view-controls">
            <div>
              <label for="community-count-value" class="heading">Community count</label>
              <input type="text" id="community-count-value" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
            </div>

<div>
              <label for="date-range-value" class="heading">Date range</label>
              <input type="text" id="date-range-value" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
            </div>
            <div id="date-range-slider"></div>
          </div>
          <button id="reset">Reset</button>
        </div>
        <div class="column col-8" id="graph-stage">

</div>
          </div>

</div>
        <div class="column col-2" id="info-panel-stage">
          <div id="info-panel"></div>
        </div>
      </div>
    </div>

</div>
  
  <script src='index.js'></script>
</body>

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

https://code.jquery.com/jquery-3.3.1.min.js

https://code.jquery.com/ui/1.12.1/jquery-ui.min.js