-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (78 loc) · 3.21 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://s3.amazonaws.com/water-dataviz.com/node_modules/three/build/three.js"></script>
<script src="https://s3.amazonaws.com/water-dataviz.com/node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="grid.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="title">
<h1>
Water pressure, temperature, and salinity in the Pacific Ocean between San Diego, California and Manzanillo, Mexico from 2016-12-21 to 2017-01-13. <br>(NCEI Accession 0164968)
</h1>
<p> <a href="https://data.nodc.noaa.gov/cgi-bin/iso?id=gov.noaa.nodc:0164968">Data source</a> | Zoom and drag to interact with the graphic</p>
<button id="modal">Project Info</button>
</div>
<div id="info">
<p>For my final project, I wanted to explore and understand how the graphics pipeline works. By working with GLSL (OpenGL Shading Language) and Three.js, I made a data visualization of water pressure, temperature, and salinity in the Pacific Ocean between San Diego, California and Manzanillo, Mexico.
</p>
<p>
As each row of dataset is parsed, values from the rows (pressure, temperature, salinity, oxygen) are passed into the constructor function which generates new geometries. After the creation of the shape, fragment and vertex shaders are dynamically written in GLSL, with values from the data, and assigned as materials to the corresponding shape.
</p>
<p>
The result is a colorful, wave-like visualization, in which the user can zoom, pan, and explore the geometries.
</p>
</div>
<style>
h1 {
color: #000;
font-family: Monospace;
background-color: #fff;
margin: 0px;
overflow: hidden;
font-size: 14px;
}
p, a {
font-family: monospace;
font-size: 10px;
text-decoration: none;
}
a {
text-decoration: underline;
}
#title {
margin-left: 5%;
margin-bottom: 1%;
}
#info {
display: none;
}
#info p {
font-size: 10px;
}
.ui-dialog {
background: white;
padding: 10px;
}
button {
background: none;
border: 1px solid black;
color: black;
font-family: monospace;
font-size: 8px;
}
</style>
<script src="https://s3.amazonaws.com/water-dataviz.com/csv-parser.js"></script>
<script src="https://s3.amazonaws.com/water-dataviz.com/main.js"></script>
</div>
</div>
</div>
</body>
</html>