D3-Risk-Factor-Chart/index.html at master · Autonomousse/D3-Risk-Factor-Chart · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Demographics and Risk Factors</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/d3Style.css">
</head>

<body>
    <div class="container container-compare">
        <div class="row">
            <div class="col-lg-12">
                <header>Demographics and Risk Factors</header>
                <hr class="hr">
                <p class="text text-style">Click on X/Y axis labels to toggle the chart for different comparisons:</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="scatter">
                    <!-- We append our chart here. -->
                </div>
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-lg-12">
                <div>
                    <h2>Correlations Discovered</h2>
                    <br>
                    <p class="text para-style">Poverty seems to be ridden with issues across the board. From the chart,
                        we can see that as poverty increases,
                        so does the lack of healthcare, the number of people who smoke, and the number of people who are
                        obese. This makes sense as healthcare
                        and healthy food options tend to be rather expensive in the country. If we look at median
                        household income, we see the opposite trend.
                        Simply put, we can correlate that there is a price to pay if one wants to be healthy. It's
                        rather ironic that sugary carbonated beverages
                        cost less than a bottle of water at some places in the country. Maybe the issue isn't just
                        income or poverty, perhaps there needs to be
                        a push towards being healthy as a country rather than it being an individual choice or goal.
                    </p>

                    <p class="text para-style">Smoking is interesting because as the median household income increases,
                        the number of people who smoke decrease. Which could be due to people with higher incomes
                        spending on more expensive drugs or even alcohol.
                        A comparison with alcohol and narcotics consumption may reveal similar trends in poverty and
                        income.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
    <!-- Removed type=text/javascript -->
    <script src="assets/js/app.js"></script>

</body>

</html>