-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
163 lines (131 loc) · 6.72 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
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
<title>Final Project: Force Expiratory Volume for children with smoking parents</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcShvWGXpizxz2hxe4T2966LkJYe0eC-jaypwL794vxXyVtSh40n" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
#header {
font-family: "Helvetica";
background-color:rgb(25,25,112);
color:white;
text-align:center;
padding:5px;
height: 150px;
width: 100%
position: absolute;
}
div.container {
font-family: "Helvetica";
text-align: justify;
}
.line1, .line2 {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/*#myDiv {*/
/*margin-left:50px;*/
/*}*/
/*#visualization {*/
/*margin-left:30px;*/
/*}*/
/*#myDiv, #visualization {*/
/*float: left;*/
/*}*/
.boxed{
border: 1px solid green;
}
</style>
</head>
<body>
<div id="header">
<h1>Do You Mind If I Smoke?</h1>
<h3>Jose Juan Almagro Armenteros, Joseph Blair & Juan Salamanca Viloria</h3>
</div>
<div class="container">
<h1>
The Implications of Parental Smoking
</h1>
<p>
Nowadays we have a clear understanding of how smoking affects your health, and it is the most common preventable cause of death in the world, with over 2.4 million deaths annually in the USA. There have been many campaigns to address this issue, from shocking images on cigarette packets to the drastic increase in prices. Although people have been made very aware of the immediate health implications smoking can have, people seem to be less conscious of the effects of secondary smoke.
</p>
<p>
To address this matter, a study was conducted to investigate the effect of second hand smoke on the pulmonary function of children <sup><a href="#fn1" id="ref1">1</a></sup>. The force expiratory volume (FEV), the volume of air that can be expelled after taking a deep breath, was measured in a control set of children with non-smoking parents and a second group whose parents smoked. This was evaluated in 654 children of a range between 3 and 19, in which age, sex and height were taken in to consideration. The results of this study can be seen in the graphic below.
</p>
<p>
Click on each of the points on the scatter plot and use the dropdown menu to explore the data at different ages and heights.
</p>
<div class="row">
<div id="visualization" class="col-md-6">
<p id="menu">
Select:
<select id="categories">
<option value = "d.Age">Age</option>
<option value = "d.Ht">Height</option>
</select>
</div>
<div id = "myDiv" class="col-md-4"></div>
<div id = "people" ></div>
</div>
<p>
This investigation shows that parents who smoke, negatively impact their children’s respiratory health. There seems to be a measurable effect on the pulmonary function of the children, with a decrease in forced expiratory volume at almost all ages. The distribution of these values can also be seen in the box and whisker plot, which in some cases shows a clear discrepancy between children with smoking and non-smoking parents. It is hard however to say that this study is conclusive, and a much larger data set is needed to confirm these findings.
</p>
<br>
<h1>
What Does This Mean For Your Children?
</h1>
<p>
Use the below visualisation to calculate the effect smoking has on your child’s pulmonary function. With smaller lungs, the effect on younger children is greater, with the forced expiratory volume reduced the most.
These values were calculated from the experiment above, using a linear model to predict the change in FEV from age, height and gender <sup><a href="#fn2" id="ref2">2</a></sup>. </p>
<p>The circles to the right of the lungs show the estimated percentage difference in FEV between a child with smoking parents and a child with non-smoking parents (black), the estimated FEV of a child with non-smoking parents (blue), and the estimated FEV of a child with smoking parents (red).</p>
<div id="lung" align="center" >
<p>
Age (Years) <input id="age" style="width: 30px;"/>
Height (Inches) <input id="height" style="width: 30px;" />
<select id= "help" >
<option value="" disabled="disabled" selected="selected">Please select a Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input type="button" value="Submit" id="button1"><br>
</p>
</div>
<p>
We hope this makes you think twice before smoking in front of your kids!</p>
<br>
<br>
<sup id="fn1">1.Tager, I. B., Weiss, S. T., Rosner, B., & SPEIZER, F. E. (1979). Effect of parental cigarette smoking on the pulmonary function of children. American Journal of Epidemiology, 110(1), 15-26.<a href="#ref1" title="Jump back to footnote 2 in the text.">↩</a></sup><br>
<sup id="fn2">2. R Primer. Copyright, Christopher G. Green (cggreen AT uw.edu), 2005, 2006., page 84, model3 <a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a></sup>
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="lung.js"></script>
<p>
</p>
</body>
</html>