TGIS506_lab-4/templates/part1&2/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lab 5 Exercises</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js'></script>
  </head>
  <body>
    <div class="wrapper">
      <h1>World population over time</h1>
      <h2>Number of people (in millions) living on earth, the last 500 years</h2>
      <canvas id="myChart" width="1600" height="900"></canvas>
      <h1>Number of Pokemon in each of the primary Pokemon types</h1>
      <!-- <h2>Number of people (in millions) living on earth, the last 500 years</h2> -->
      <canvas id="pokemon" width="1600" height="900"></canvas>
      <p>Pokemon type is a property or as it was introduced during the first generation, an element, which defines the kinds of moves a character may have. Pokemon originally only had one type. However, this changed as the new generations were released for further expansion away from the classic "Fire", "Water", "Ice". Now, Pokemon can have one or two types.  Notice there are no "Wind" or "Earth" as the prototypical elements referenced in fantasy are usually something like you would see in the 90s cartoon Captain Planet, i.e. Earth, Fire, Wind, Water, and Heart.
      </p>
    </div>
    <div class="wrapperTwo">
      <h1>Reported Fatality Rate of COVID-19 by Country</h1>
      <h2>This data is approximate and from March 2, 2020</h2>
      <canvas id="myChartTwo" width="1600" height="900"></canvas>
      <p id="covid">The data presented here is likely skewed by the actual number of reported cases and the on-hand availability of said data to/from outside countries. Additionally, sanitation standards and reporting requirements are different for every country. CDC and other medical boards around the US require certain information be made avialable to the public for safety and this is not always a requirement for other countries.
      </p>
    </div>

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


  </body>
  <!-- Thanks to Tobias Ahlin, whose chart.js tutorial forms the basis of the line graph portion of this exercise -->
</html>