mccanns3.github.io/index.html at master · mccanns3/mccanns3.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Data-vis</title>
  </head>
  <body>
    <div class="page-container">
      <div class="description-container">
        <h1>Nightingale Rose Chart</h1>
        <h1>Samuel McCann</h1>
        <div class="example-container"></div>
        <div style="font-size: small;">
          <p>
            The Areas of the blue, red, & black wedges are each measured from
            the centre as the common vertex
          </p>
          <p>
            The blue wedges measured from the centre of the circle represent
            area for area the deaths from Preventible or Mitigable Zymotic
            Diseases, the red wedges measured from the center the deaths from
            wounds, & the black wedges measured from the center the deaths from
            all other causes
          </p>
          <p>
            In October 1844, & April 1855, the black area coincides with the
            red, in January & February 1856, the blue coincides with the black
          </p>
          <p>
            The entire areas may be compared by following the blue, the red &
            the black lines enclosing them.
          </p>
        </div>
      </div>
      <div class="chart-container">
        <div class="controls-container">
          <p class="description">
            Hover on the legends to highlight them on the chart. Large outliers
            make the smaller segments hard to see, so I added a zoom slider.
          </p>
          <div class="controls"></div>
        </div>
        <div class="graph-container"></div>
      </div>
    </div>

    <div class="minard-container">
      <h1 class="minard-title">Minards Map</h1>
      <p class="minard-text">
        Line width represents army size. Orange line indicates the army's path
        advancing. The grey line is the army's path on retreat. Cities are
        represented with purple text and ellipses. The temperature gradient
        along the bottom represents the temperature value at that longitude on
        the map on the army's return.
      </p>
    </div>
    <script src="main.js"></script>
  </body>
</html>