-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfunding.html
122 lines (102 loc) · 3.74 KB
/
funding.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
<!DOCTYPE HTML>
<!-- This website was created by Madison Parks and Brian M. Schilder -->
<!-- IMPORTANT!: All csv's must be saved as "CSV UTF-8 (Comma delimited) (.csv)" or else some characters will be turned into question mark diamonds. -->
<html>
<head>
<title>Raj Lab - [Funding]</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!-- D3 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<!-- Local Scripts -->
<script src="./assets/js/jquery.min.js"></script>
<!-- Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
crossorigin="anonymous">
<!--CSS-->
<link href="./assets/css/arrow_bounce.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/main.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap-->
<script src="./assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
</head>
<body>
<!-- Insert html files -->
<script>
$(function(){
$("#background_video").load("./background_video.html");
$("#footer").load("./footer.html");
$("#navbar").load("./navbar.html");
});
</script>
<!-- Video -->
<section id="background_video"></section>
<!-- Navbar -->
<section id="navbar"></section>
<!-- Main -->
<section id="main">
<div class="inner">
<header>
<h1><i class="fa fa-university" aria-hidden="true"></i>
Funding</h1>
<p>Our research is made possible by the generous funding provided by the following sources.
<br>Both <a href="#activeGrants">Active</a> and <a href="#completedGrants">Completed</a> grants are provided.
Download all here: <a href="./documents/Grants.csv" download="Raj_Grants.csv">
<i class='fas fa-file-csv' style='font-size: 35px;vertical-align: middle; padding-bottom: 7px;'></i>
</a>
</p>
</header>
<!-- Text -->
<div class="container" id="funding">
<!-- Active Funding -->
<a class="collapseButton" data-toggle="collapse" href="#activeGrants" role="button" aria-expanded="true"
aria-controls="activeGrants">
<h2>Active Funding</h2>
</a>
<div id="activeGrants" class="collapse show"></div>
<!-- Completed Funding -->
<a class="collapseButton" data-toggle="collapse" href="#completedGrants" role="button" aria-expanded="true"
aria-controls="completedGrants">
<h2>Completed Funding</h2>
</a>
<div id="completedGrants" class="collapse show"></div>
<script>
var createHTML = function (d) {
var htmlStr = "<div class='grant'>\
<h3 class='Title'>"+ d.Title + "</h3>\
<div class='grantDetails'>\
<div class='row'>\
<div class='col-md-4'>\
<h5 class='GrantID'>Grant ID: <br><p>"+ d.GrantID + "</p></h5>\
<h5 class='Dates'> Dates: <br><p>"+ d.Dates + "</p></h5>\
<h5 class='PI'> PI: <br><p>"+ d.PI + "</p></h5>\
</div>\
<div class='col-md-8'>\
<p class='Summary'>"+ d.Summary + "</p>\
</div>\
</div></div>"
return htmlStr
}
d3.csv("./documents/Grants.csv")
.then(function (data) {
data.forEach(d => {
if (d.Status == "Active") {
var htmlStr = createHTML(d);
$('#activeGrants').append(htmlStr);
}
if (d.Status == "Completed") {
var htmlStr = createHTML(d);
$('#completedGrants').append(htmlStr);
}
});
})
</script>
</div>
</section>
<!-- Footer -->
<section id="footer"></section>
</body>
</html>