<!DOCTYPE html>
<html>
  <head>
    <title>Parallel Coordinate Plot Test</title>
    <meta charset="utf-8" />

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div> Click and drag over either scatter plot to make lines appear on the parallel coordinate plot. </div>
    <div id="selection-boxes">
      <div id="selection-options-left"> <div>Left X: <select name="Left X" id="lx"></select> </div> <div>Left Y: <select name="Left Y" id="ly"></select> </div> </div>
      <div id="selection-options-right"> <div>Right X: <select name="Right X" id="rx"></select></div> <div>Right Y: <select name="RightY" id="ry"></select></div> </div>
    </div>
    <!-- Container for the visualization -->
    <div id="profiles"></div>
    <div id="pcp"></div>
    <div id="profile-names-box">Highlighed Profile(s): <span id="highlighted-profiles"></span></div>
  </body>
</html>