finalproject.html

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>W209 - Final Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- css customize start - Li-->
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!-- css customize end - Li-->

  </head>


<style>


.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.area {
    fill: steelblue;
}

</style>

<body>

  <div class="container">
    <div class='col-12'>
      <p>
     <h1>Game of Thrones: Character Relationship Explorer</h1>

    <div id="characterCountPlot"></div>


    <div id="network"></div>
    <div id="houselegend"></div>
    <div id="timeline"></div>
      <!-- Content here -->
  </div>

  <!-- footer start Li-->
  <div class='footer' style='margin-right: 50; text-align: center;'>
    <div class='col-12'>
      <div id='source'>Created by
Boris Garber, Li Chen, and Matt Adereth</div>
      <div id='source'>Data Sources: <a href="https://github.com/jeffreylancaster/game-of-thrones/tree/master/data">github.com/jeffreylancaster/game-of-thrones</a>
      </div>
    </div>
    <!-- footer end Li-->

</body>
<script src="d3.v4.min.js"></script>
<script src="finalproject.js"></script>