index.html

<!DOCTYPE html>
<html lang="en">
  
  <head>
      <title>Greek Gods Family Tree</title>
    
      <!--  D3 code snippet  -->
      <script src="https://d3js.org/d3.v6.min.js"></script>

      <!--  Modal Stylesheet  -->
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <!--  My Stylesheet  -->
      <link rel="stylesheet" type="text/css" href="style.css">

      <meta charset="utf-8" />
  </head>
  
  <body>
      <div id="container" class="svg-container">
          <button type="button" id="controls" onclick="openControls();">Controls</button>
          <button type="button" id="redraw" onclick="redraw();">Reset</button>
          <button type="button" id="legends" onclick="openLegend();">Legend</button>
          <div id="familyTree"></div>
      </div>
      <div id="modalContainer"></div>
    
    <!-- God class -->
    <script src="god.js"></script>
    
    <!-- Javascript -->
    <script src="sketch.js"></script>
    <script>
        openControls();
    </script>
  </body>
</html> 