-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (89 loc) · 4.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Data Journalism and D3</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: iPortfolio - v3.0.1
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
<link rel="stylesheet" href="assets/css/d3Style.css">
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile" style="margin: 20px;">
<h1 class="text-light"><a href="index.html">Data Journalism</a></h1>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="#scatter" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>Data Journalism and D3</h2>
<p>The data set included with the assignment is based on 2014 ACS 1-year estimates from the US Census Bureau, but you are free to investigate a different data set. The current data set includes data on rates of income, obesity, poverty, etc. by state. MOE stands for "margin of error."</p>
</div>
<div class="row">
<div class="col-lg-12">
</div>
<h3>D3 Dabbler</h3>
<p>
Scatter plot created to show relationship between pairs of the data variables (X-Axis variables: In poverty (%), Lacks Healthcare (%), Median Income ($) Y-Axis variables: Smokes (%), Obesity (%), Median Age).
</p>
<div id="scatter">
<!-- We append our chart here. -->
</div>
<h3>Observations</h3>
<p>
<ul>
<li>West Virginia and Kentucky have high smoking % and high poverty % </li>
<li>Colorado lowest obesity. Hawaii and Washington DC lowest obesity and highest median income.</li>
<li>Mississipi, West Virginia, Arkansas highest obesity, lowest median income.</li>
<li>Maryland highest median income</li>
<li>New Hamshire lowest % in poverty</li>
<li>Texas highest % lacking healthcare</li>
</ul>
</p>
</div>
</div>
</section><!-- End About Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<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>