fvp.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <script src="https://kit.fontawesome.com/58cf1bb60d.js" crossorigin="anonymous"></script>

  <link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v4.js"></script>
</head>

<body>
  <!-- Pattern fill for the multilayer circles -->
  <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <pattern id="diagonal-stripe-1" width="3" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="1" height="3" transform="translate(0,0)" fill="var(--c4)"></rect>
        <rect width="2" height="3" transform="translate(1,0)" fill="var(--c3)"></rect>
      </pattern>

      <pattern id="diagonal-stripe-2" width="3" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="1" height="3" transform="translate(0,0)" fill="var(--c1)"></rect>
        <rect width="2" height="3" transform="translate(1,0)" fill="var(--c2)"></rect>
      </pattern>
    </defs>
  </svg>

  <div>
    <h4 style="margin-block-start: 0.4em; margin-block-end: 0.4em;">Legend & controls</h4>

    <div id="my-legend"></div>

    <div class="row" style="padding-top:10px;">
      <div class="column" style="width:20%;padding-top:0px;margin-right:10px;">
        <p class="p-control-column">
          <span class="control-label">PARTICLE DIAMETER</span>
          <span style="font-size:10pt;font-weight:300;display:inline-block">&nbsp;<output id="da">2.76</output> μm</span><br>
          <input type="range" name="mySlider" id="mySlider" class="slider" min="1" max="13" value="9" onchange="displayDiam(this.value);"> <br>
          
        </p>
      </div>

      <div class="column" style="width:70%;padding-top:0px;">
        <p class="p-control-column">
          <span class="control-label">MATERIAL STRUCTURE</span><br>
          <div class="control">
            <div class="cb-wrapper" style="border:none;padding-left:0px">
              <label for="cbW">
                <input id="cbW" type="checkbox" class="cb-material" value="W" checked>
                <span>Woven</span>
              </label>
              <label for="cbK">
                <input id="cbK" type="checkbox" class="cb-material" value="K" checked>
                <span>Knit</span>
              </label>
              <label for="cbCP">
                <input id="cbCP" type="checkbox" class="cb-material" value="CP" checked>
                <span>Cut pile</span>
              </label>
              <label for="cbnW">
                <input id="cbnW" type="checkbox" class="cb-material" value="nW" checked>
                <span>Non-woven</span>
              </label>
              <label for="cbnWH">
                <input id="cbnWH" type="checkbox" class="cb-material" value="nWH" checked>
                <span>Non-woven, Halyard</span>
              </label>
              <label for="cbML">
                <input id="cbML" type="checkbox" class="cb-material" value="ML" checked>
                <span>Multilayer</span>
              </label>
            </div>
          </div>
        </p>
      </div>
    </div>

    <!-- Create a div where the graph will take place -->
    <div id="my-dataviz"></div>

    <script src="scripts/fvp.js"></script>

  </div>
</body>

</html>