-
Notifications
You must be signed in to change notification settings - Fork 0
/
data.html
100 lines (84 loc) · 2.79 KB
/
data.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
<!DOCTYPE HTML>
<html>
<head>
<title>Raj Lab - [Data/Software]</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 class="major special">
<h1><i class="fas fa-database"></i></i>
</i>
Data / Software</h1>
<p>Publicly available data and software generated by our lab or affiliated with our publications</p>
</header>
<!-- Data / Software entries -->
<div class="container dataSoftware" id=dataSoftware_container></div>
<br>
</div>
</section>
<script>
d3.csv("./documents/Data_Software.csv")
.then(function (data) {
// Method 2: As Divs
var createDivs = function (data) {
var createDataDiv = function (d) {
var htmlStr =
"<div class='row dataRow'>\
<h3 class='dataTitle'>" + d.Title + "</h3>\
<h4 class='dataAuthors'> Authors: <p>" + d.Authors + "</p></h4>\
<a href='" + d.DataLink + "' target='_blank'>\
<h4><i class='fas fa-database'></i> Data: </h4> <p>" + d.DataName + "</p>\
</a>\
<a href='" + d.PaperLink + "' target='_blank'>\
<h4><i class='fas fa-scroll'></i> Paper: </h4><p>" + d.PaperJournal + "</p>\
</a>\
</div>_______________________________________<br><br>"
return htmlStr
}
data.forEach(d => {
// Prevent blank rows from being imported
if (d.Title != ""){
var htmlStr = createDataDiv(d);
$('#dataSoftware_container').append(htmlStr);
}
});
}
createDivs(data);
});
</script>
<!-- Footer -->
<section id="footer"></section>
</body>
</html>