forked from cinemascience/cinemascience.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexamples.html
More file actions
executable file
·181 lines (161 loc) · 8.58 KB
/
examples.html
File metadata and controls
executable file
·181 lines (161 loc) · 8.58 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE HTML>
<!--
Ion by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Cinema Examples </title>
<link rel="shortcut icon" type="image/png" href="images/cinemascience_mark.png" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
</head>
<body id="top">
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1><a href="https://github.com/cinemascience"><img src="images/cinemascience_mark_fullword.png" atl="CinemaScience" /></a></h1>
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="tutorials.html">Tutorials</a><li>
<li><a href="publications.html">Publications</a></li>
<li><a href="https://cinemasciencewebsite.readthedocs.io">Documentation</a></li>
<li><a href="gethelp.html" class="button special">Get Help</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<section id="main" class="wrapper style1">
<header class="major">
<h2>Cinema Examples</h2>
<p>These examples explore the different modes of Cinema. CinemaCompare allows the user to interactively view pre-rendered images -- similar to the way a user may view the data in a visualization application (e.g. ParaView or VisIt). It can be used in an interactive mode with a single database or by bringing in two or more databases that can be manipulated in tandem to interactively compare multiple data sets. CinemaExplorer is a parallel coordinates approach to interactive data exploration. The user can select data and, through different Cinema components, highlight images, scatterplots, or specialized views of the data. CinemaScope is a Qt-based crossplatform viewer that allows the user to interactively interact with the images. Similar to CinemaCompare, it allows the user to interactively explore data artifacts but includes intuitive mouse controls. CinemaScope also allows the user to choose between available image sets. </p>
</header>
<div id="examples" class="container">
<section> <!-- first row -->
<!-- <p>This page contains videos showing instances of exploring each of the Cinema database Specs. </p> -->
</section>
<hr class="major" />
<div class="row">
<div class="4u"> <!-- first -->
<section class="special">
<h3>CinemaCompare - Single </h3>
<p>CinemaCompare can be used with a single database, here an MPAS-Ocean simulation of ocean eddies. The Cinema database includes a series of pre-rendered images. UI sliders allow the viewer to rotate the globe in phi and theta and see the eddies flow over time.</p>
<video class="image fit" controls>
<source src="videos/CinemaInteractiveMPAS.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</section>
</div> <!-- Close div class=4u first one -->
<div class="4u"> <!-- second -->
<section class="special">
<h3>CinemaCompare</h3>
<p>CinemaCompare can also be used to view multiple databases. In this plasma accelerator simulation (left) regularly spaced isosurfaces are compared to (right) a topological approach to identify important isosurfaces. The two Cinema databases can be explored and compared in tandem. </p>
<video class="image fit" controls>
<source src="videos/CinemaComparisonWarp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</section>
</div> <!-- Close div class=4u second one -->
<div class="4u"> <!-- third -->
<section class="special">
<h3>CinemaExplorer</h3>
<p>
CinemaExplorer is used to view a dark matter halo simulation database. The parallel coordinates view can be used to select images with similar properties. The scatterplot can be used to explore correlations between variables. This viewer allows a range of analysis approaches.
</p>
<video class="image fit" controls>
<source src="videos/NyxExplorerDemo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</section>
</div> <!-- Close div class=4u third one -->
</div> <!-- Close div first row of three objects -->
<hr class="major" />
<div class="row">
<div class="4u"> <!-- fourth -->
<section class="special">
<h3>CinemaScope </h3>
<p>
Cross-platform viewer CinemaScope allows interactive exploration with sliders or via intuitive mouse controls and the ability to switch between sets of data artifacts or images.
</p>
<video class="image fit" controls>
<source src="videos/CinemaScopeMPAS.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</section>
</div> <!-- Close div class=4u fourth one -->
<div class="4u"> <!-- fourth -->
<section class="special">
<h3>CVLIB </h3>
<p>
CVLIB is a library which provides a JavaScript API to Spec A Cinema databases for visualization in the browser. An example can be found at the <a href="http://portal.nersc.gov/project/visit/larsen/cinema/rad_kh/cinema.html">NERSC Science portal </a>.
<img src="images/cvlibRoverExample.png" atl="Browser based Cinema Viewer" class="image fit"/>
</p>
</section>
</div> <!-- Close div class=4u fourth one -->
<div class="4u"> <!-- fifth -->
<section class="special">
<h3>Browser-based Viewer </h3>
<p>This browser-based Cinema viewer can be used to explore a set of online science-based Cinema examples. The browser-based viewer is currently based on Spec A databases. </p>
<img src="images/viewerBrowser.png" atl="Browser based Cinema Viewer" class="image fit"/>
<ul class="actions">
<li><a href="http://cinemaviewer.org/" class="button alt">Cinema Browser Viewer</a></li>
</ul>
</section>
</div> <!-- Close div class=4u fifth one -->
</div> <!-- Close div class=row -->
</div> <!-- Close div examples -->
</section> <!-- Close section main -->
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="row double">
<div class="6u">
<div class="row collapse-at-2">
<div class="6u">
<h3>Useful Links</h3>
<ul class="alt">
<li><a href="http://dsscale.org/">Data Science at Scale</a></li>
<li><a href="http://www.lanl.gov/">Los Alamos National Laboratory</a></li>
<li><a href="https://www.exascaleproject.org/">Exascale Computing Project</a></li>
<li></li>
</ul>
</div>
<div class="6u">
<h3>Our Partners and Sponsors</h3>
<ul class="alt">
<li><a href="https://www.paraview.org/">ParaView</a></li>
<li><a href="https://visit.llnl.gov/">VisIt</a></li>
<li><a href="https://science.energy.gov/">Dept. of Energy Office of Science</a></li>
<li><a href="https://nnsa.energy.gov/">National Nuclear Security Administration</a></li>
</ul>
</div>
</div>
</div>
<div class="6u">
<h2>Cinema Science </h2>
<p>Cinema is developed by the Data Science at Scale team at Los Alamos National Laboratory. We welcome contributions from users in the Cinema community, just head over to the <a href="https://github.com/cinemascience">Cinema Science Github. </a> </p>
</div>
</div>
<ul class="copyright">
<li><a href="https://github.com/cinemascience">Cinema Science Github </a></li>
<li>Based on the Ion template from: <a href="http://templated.co">TEMPLATED</a></li>
</ul>
</div>
</footer>
</body>
</html>