-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
154 lines (131 loc) · 5.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css" />
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
<title>USA Obesity Story</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital@0;1&display=swap"
rel="stylesheet"
/>
<style>
p {
font-family: monospace;
}
body {
height: 2000px;
/* font-family: monospace; */
}
.chart > p {
color: white;
font-style: italic;
}
h1 {
text-align: center;
text-transform: uppercase;
background-color: rgb(180, 200, 223);
margin: 0;
padding: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 800;
}
h2 {
margin-top: 64px;
text-align: center;
text-transform: capitalize;
font-family: "Montserrat", sans-serif;
font-weight: 800;
}
footer {
text-align: center;
color: slategray;
padding: 15px;
}
.hr {
border-top: 1px solid rgb(180, 200, 223);
}
form {
font-size: 14px;
}
p {
font-size: larger;
}
</style>
<link rel="stylesheet" href="styles/line-chart.css" />
<link rel="stylesheet" href="styles/cartogram.css" />
</head>
<body>
<h1 class="chartTitle">USA Obesity Story</h1>
<div id="cartogram-container">
<!-- Slider https://bl.ocks.org/officeofjane/47d2b0bfeecfcb41d2212d06d095c763 -->
<div id="cartogram_controls_container" style="height: 100px">
<div id="year_scrubber">
<input id="cartogram_year" value="1995" type="range" min="1995" max="2016" step="1" list="tickmarks" />
<datalist id="tickmarks">
<option>1995</option>
<option>2000</option>
<option>2005</option>
<option>2010</option>
<option>2016</option>
</datalist>
</div>
<div id="cartogram_controls">
<button id="play-button">Play</button>
</div>
</div>
<!-- Description of the chart -->
<div style="height: 100px" id="chart-info">
<h2 id="chart-title">Obesity Cartogram</h2>
<p id="chart-description" style="text-align: center; max-width: 50%; margin: auto">
Obesity trend across the States in the US is rising
</p>
</div>
<!-- cartogram chart -->
<svg id="cartogram-svg"></svg>
<img style="position: absolute; width: 60px; /* right: 170px; */ top: 500px" src="vertical_legend.jpg" />
<div id="correlation_selection">
<text class="scatter-x-axis" href="#" id="smokes">Smoking (%)</text>
<text class="scatter-x-axis" href="#" id="poverty">Poverty (%)</text>
<text class="scatter-x-axis" href="#" id="healthcare">Lack of Health Care (%)</text>
<text class="scatter-x-axis" href="#" id="age">Median Age</text>
<text class="scatter-x-axis" href="#" id="income">Median Household Income</text>
<text class="scatter-x-axis" style="line-height: 3em; font-weight: bolder" href="#" id="backToMap"
>Return to Cartogram</text
>
</div>
<div>
<h2 style="text-align: center" id="line-heading" style="display: none"></h2>
<!-- <svg width=600 hight=400 id="d3-cartogram"></svg> -->
<form
name="radios"
id="lineChart-radioInputs"
style="text-align: center; padding-top: 5px; padding-bottom: 40px; display: none"
>
<input type="radio" name="btn" id="Age Group" value="Age Group" checked />
<label for="Age Group" style="padding-right: 15px">Age Group</label>
<input type="radio" name="btn" id="Race/Ethnicity" value="Race/Ethnicity" />
<label for="Race/Ethnicity" style="padding-right: 15px">Race/Ethnicity</label>
<input type="radio" name="btn" id="Education Attained" value="Education Attained" />
<label for="Education Attained" style="padding-right: 15px">Education Attained</label>
<input type="radio" name="btn" id="Gender" value="Gender" />
<label for="Gender" style="padding-right: 15px">Gender</label>
<input type="radio" name="btn" id="Household Income" value="Household Income" />
<label for="Household Income">Household Income</label>
</form>
</div>
</div>
</body>
<!-- <p is="word-count"></p> -->
</html>
<!-- Loading D3 v5 here -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.js"></script>
<!-- Line chart loading -->
<script type="module" src="./d3-playground/modules/line-chart/line-chart.js"></script>
<!-- Cartogram specific -->
<script src="./d3-playground/resources/topojson-client.min.js"></script>
<script type="module" src="./d3-playground/modules/cartogram-chart/cartogram.js"></script>
<!-- Web Components -->
<script type="module" src="./d3-playground/modules/word-count.js"></script>