-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (143 loc) · 7.65 KB
/
index.html
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3Times</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/d3Style.css">
</head>
<body>
<nav class="navbar-fluid" id="navbar">
<div class="navbar-header">
<a class="navbar-brand">
<h1>Data Driven Journalism</h1>
</a>
<div>
<p><strong>Interactive plot that brings you the current trends shaping people's lives!</strong></p>
<p>Using <strong><i>2014 ACS data</i></strong> of <a href="https://data.census.gov/cedsci/"><strong><i>U.S. Census Bureau</i></strong></a> to visualize the <i><strong>health risks facing particular demographics</strong></i></p>
</div>
</div>
</nav>
<div class="container-fluid my-0">
<div class="row my-0">
<div class="jumbotron col-12 my-0">
<div class="alert alert-secondary col-xs-12 col-md-6 mx-auto my-0 centre" role="alert">
<h4 class="alert-heading">Explore the interactive chart</h4>
<p>By choosing the axes of your choice!</p>
<hr>
<p>Hover over to get granular details!</p>
</div>
</div class="my-0">
<div id="scatter" class="col-12 rounded iframeContainer my-0">
<!-- We append our chart here. -->
</div>
</div>
</div>
</div>
<div class="col-12 jumbotron mx-0 mt-0">
<h3>Discovered Correlations</h3>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="poverty_healthcare" class="card text-white bg-secondary h-100">
<div class="card-header">Poverty Vs Lack of healthcare</div>
<div class="card-body">
<h5 class="card-title">Positive correlation: 0.52</h5>
<p class="card-text">There is a gap to fill, in providing healthcare where there is a higher poverty rate.<strong>We need more Health Care facilities to be accessible to the Poor.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="poverty_smokes" class="card text-white bg-secondary h-100">
<div class="card-header">Poverty% Vs Smokes%</div>
<div class="card-body">
<h5 class="card-title">Positive correlation: 0.52</h5>
<p class="card-text">Smoking is more among people living in poverty; financial stress could be a factor.<strong>
Awareness and Better rehabilitation facilities to be available to the poor.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="poverty_obesity" class="card text-white bg-secondary h-100">
<div class="card-header">Poverty% Vs Obesity%</div>
<div class="card-body">
<h5 class="card-title">Positive correlation: 0.46</h5>
<p class="card-text">Unhealthy food is cheaper compared to healthy ones.<strong>
Better nutrition is to be provided to the poor with moderate prices.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="age_obesity" class="card text-white bg-secondary h-100">
<div class="card-header">Age Vs Obesity%</div>
<div class="card-body">
<h5 class="card-title">Uncorrelated: -0.007</h5>
<p class="card-text">Obesity is a problem for all ages.<strong>
Everyone should be made aware of the health issues related to obesity.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="age_smokes" class="card text-white bg-secondary h-100">
<div class="card-header">Age Vs Smokes%</div>
<div class="card-body">
<h5 class="card-title">Slight Positive correlation: 0.248</h5>
<p class="card-text">People of middle age or more tend to smoke at a larger scale.<strong>
Health issues related to smoking need to be made aware at a younger age itself.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="age_healthcare" class="card text-white bg-secondary h-100">
<div class="card-header">Age Vs Lack of healthcare</div>
<div class="card-body">
<h5 class="card-title">Negative correlation: -0.385</h5>
<p class="card-text">Older population seems like getting the rightly deserving healthcare.<strong>
People of higher age should continue getting more healthcare from the Government.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="income_obesity" class="card text-white bg-secondary h-100">
<div class="card-header">Income Vs Obesity%</div>
<div class="card-body">
<h5 class="card-title">Negative correlation: -0.65</h5>
<p class="card-text">High income helps buying healthy food and have access to exercise facilities.<strong>
Government should help low income households with basic nutrients and free public exercise facilities.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="income_smokes" class="card text-white bg-secondary h-100">
<div class="card-header">Income Vs Smokes%</div>
<div class="card-body">
<h5 class="card-title">Negative correlation: -0.66</h5>
<p class="card-text">Smoking is more among people with lower income; financial stress could be a factor.<strong>
Awareness and Better rehabilitation facilities to be available to the poor.</strong></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 mx-auto my-1">
<div id="income_healthcare" class="card text-white bg-secondary h-100">
<div class="card-header">Income and Lack of healthcare</div>
<div class="card-body">
<h5 class="card-title">Negative correlation: -0.43</h5>
<p class="card-text">Lower income households are getting the deserving healthcare.<strong> This help should be continued by the Government over the coming years.</strong></p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer-->
<div id="footer">
<p>©bnarath@github.io</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></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>
<script type="text/javascript" src="assets/js/app.js"></script>
</body>
</html>