<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="/css/taw.min.css">
  </head>
  <body>
    <main>
      <h1>Visualizing TAW</h1>
    </main>

    <!-- Scripts -->
    <script src="/js/taw.min.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="/css/taw.min.css">
  </head>
  <body>
    <main>
      <h1>Visualizing TAW</h1>
      <section id="maps">
        <h2>Seeing Movement</h2>
        <div class="viz"></div>
        <div class="map-control">
          <a href="#"><span class="arrow prev"></span></a>
          <h1></h1>
          <a href="#"><span class="arrow next"></span></a>
        </div>
        <div class="total">
          <button class="btn">Show Totals</button>
        </div>
      </section>
      <section id="charts">
        <h2>Seeing Workers</h2>
        <div class="chart-container">
          <div>
            <div class="head-text">
              <p>It's also possible to visualize several dimensions of the personal data about individual workers.</p>
            </div>
            <div class="worker-info-container"></div>
          </div>
          <div class="viz"></div>
          <div class="total">
            <button class="btn">Show All</button>
          </div>
        </div>
      </section>
    </main>

    <!-- Scripts -->
    <script src="/js/taw.min.js"></script>
  </body>
</html>

Restructure markup to organize page
Restructure markup to organize page

* Makes it easier to place viz among other elements
