-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (94 loc) · 4.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>US Health and Race</title>
<!-- Bootstrap documentation: http://getbootstrap.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
<script src="https://use.typekit.net/lkf2nvl.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header section">
<div class="container">
<h1>Race and Health Outcomes - United States</h1>
</div>
<h5>Choose a Health Outcome:</h5>
<div class='row'>
<div class="btn-group" role="group" aria-label="Filter">
<button type="button" class="btn btn-default" id="yvar-MaleLifeEx">Male Life Expectancy</button>
<button type="button" class="btn btn-default" id="yvar-obesity">Obesity</button>
<button type="button" class="btn btn-default" id="yvar-uninsured">Uninsured</button>
<button type="button" class="btn btn-default" id="yvar-DaysPoorHealth">Days of Poor Health</button>
<button type="button" class="btn btn-default" id="yvar-YPLS">Years of Potential Life Lost</button>
</div>
</div>
<div class='container'>
<div class="row">
<div class='col-lg-3' id='leftNumberTop' style='min-height:20px'></div>
<div class='col-lg-3' id='rightNumberTop'></div>
</div>
</div>
<div class='container'>
<div class="row">
<div class='col-lg-3'>
<div id='leftNumber' style='min-width:262.5px'></div>
<div id='leftNumberBottom'></div>
</div>
<div class='col-lg-2' id='lessThan'><img width="130px" height="100px" src = 'LessThan.svg'></div>
<div class='col-lg-2'>
<div id='slidernumber'>0%</div>
<div id='slidertext'>white</div>
<div id='slider'></div>
<h5>Select a demographic criteria, then drag the slider to shift counties between maps:</h5></div>
<div class='col-lg-2' id='greaterThan'><img width="130px" height="100px" src = 'GreaterThan.svg'></div>
<div class='col-lg-3'>
<div id='rightNumber' style='min-width:262.5px'></div>
<div id='rightNumberBottom'></div>
</div>
</div>
</div>
<div class="main section">
<div class="container">
<div class="row">
<div class="col-lg-5" id='chart'></div>
<div class="col-lg-2" id='sliderbuttons' height='300'>
<div class="btn-group-vertical" role="group" aria-label="Filter">
<button type="button" class="btn btn-default vert" id="slider-white">White</button>
<button type="button" class="btn btn-default vert" id="slider-black">Black</button>
<button type="button" class="btn btn-default vert" id="slider-hispanic">Hispanic</button>
<button type="button" class="btn btn-default vert" id="slider-asian">Asian</button>
</div>
<div class='row'><p></p></div>
<div class='row'>
<div id='legendStart'>Legend</div>
<div id='legend'></div>
<div id='legendEnd'>Obesity Rate (%)</div>
</div></div>
<div class="col-lg-5" id='chart2'></div>
</div>
<div class='row'>
<div id='sources' style='text-align:center;'><p>2014 Health Data from <a href='http://www.countyhealthrankings.org/rankings/data'>County Health Rankings</a></p>
<p>2014 Insurance Data from <a href='http://www.census.gov/did/www/sahie/'>US Census Small Area Health Insurance Estimates</a></p>
<p>2010 Population and Race Data from <a href='http://www.ers.usda.gov/data-products/food-environment-atlas/data-access-and-documentation-downloads.aspx'>USDA Economic Research Service</a></p>
<p>State arrangement created by <a href='https://github.com/githamm/us-state-squares'>Kevin Hamm</a></p>
<p>Acknowledgements to <a href='https://github.com/cmgiven'>Chris Given</a>, <a href='https://github.com/alexcengler'>Alex Engler</a>, and <a href='https://github.com/vivhou'>Vivian Hou</a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
<div class="container">