GenderGaps-FinalProject/scroll_event.html at main · CMU-Vis-2021/GenderGaps-FinalProject · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Childhood environment and gender gaps in adulthood</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
  </head>
  <body>
    <h1>Childhood Environment and Gender Gaps in Adulthood</h1>
    <h5>By Tammy Zhou, Priya Jain, Alana Mittleman, and Rob Lambeth</h5>
    <h5>Data Visualization Final Project @CMU 2021</h5>

    <div id="vis">
        <h4>US Map of regional economic inequality and gender gap</h4>
        <p>
            The <b>Theil index </b>is a statistic used to measure economic
            inequality. The Theil index measures an entropic "distance" the
            population is away from the "ideal" egalitarian state of everyone having
            the same income. The numerical result is in terms of negative entropy so
            that a higher number indicates more order that is further away from the
            "ideal" of maximum disorder. Formulating the index to represent negative
            entropy instead of entropy allows it to be a measure of inequality
            rather than equality.
          </p>
        <!-- <button id="theil" class="button">Show Economic Inqueality (Choropleth)</button>
        <button id="state_pop" class="button">Show State population (Bubble Map)</button> -->
        <div id = "chart"></div>
    </div>
    <br><br><br><br>
    <div id = "linechart"></div>
    <div id = "scatterplot2"></div>
    <div id="case_study">
      <div class="case_circles" id="circles1">
        <h4>Comparing NY vs. FL GINI index</h4>
      </div>
      <div class="case_circles" id="circles2">
        <h4>Comparing NY vs. FL high school dropout rate</h4>
      </div>
      <div class="case_circles" id="circles3">
        <h4>Comparing NY vs. FL violent crime</h4>
      </div>
      <div class="case_circles" id="circles4">
        <h4>Comparing NY vs. FL single parent family count</h4>
      </div>
    </div>

    <script src="script.js" defer></script>
  </body>
</html>