-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
429 lines (376 loc) · 24.3 KB
/
index.html
File metadata and controls
429 lines (376 loc) · 24.3 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Trelliscope</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="assets/img/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="assets/img/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="assets/img/favicon/apple-touch-icon-60x60.png">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Jost: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/aos/aos.css" rel="stylesheet">
<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/remixicon/remixicon.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">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center" style="position: relative;">
<h1 class="logo me-auto"><a href="index.html">Trelliscope</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<a href="index.html" class="me-auto">
<img src="assets/img/trlogo.svg" alt="" class="img-fluid logo-img">
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#goals">Goals</a></li>
<li><a class="nav-link scrollto" href="#examples">Examples</a></li>
<li class="dropdown"><a href="#"><span>Get Started</span> <i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="https://trelliscope.org/trelliscope/index.html">R</a></li>
<li><a href="#">Python (coming soon)</a></li>
<li><a href="#">JavaScript (coming soon)</a></li>
</ul>
</li>
<!-- <li><a class="nav-link scrollto" href="#contact">Contact</a></li> -->
<li><a class="nav-large-icon" href="https://github.com/trelliscope/"><i class="bi bi-github"></i></a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header>
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="200">
<h1>Create and Explore<br />Data Frames of Visualizations</h1>
<h2>Trelliscope is an open source project that provides tools for data scientists to build and share interactive collections of visualizations for detailed data exploration and more.</h2>
<div class="d-flex justify-content-center justify-content-lg-start">
<a href="#about" class="btn-get-started scrollto">Get Started</a>
<!-- <a href="https://www.youtube.com/watch?v=" class="glightbox btn-watch-video"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-in" data-aos-delay="300">
<img src="assets/img/trelliscope/main.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
<!-- End Hero -->
<main id="main">
<!-- ======= Clients Section ======= -->
<!-- <section id="clients" class="clients section-bg">
<div class="container">
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section> -->
<!-- End Cliens Section -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>About</h2>
</div>
<div class="row content" style="font-size: 20px;">
<div class="col-lg-6">
<h3>
What is Trelliscope?
</h3>
<p>
Trelliscope is an R package (Python and JavaScript versions coming soon) that provides tools to interactively and flexibly visualize data in detail by producing many plots of subsets of your data — stored in a "data frame of visualizations" — and providing an interactive web application to explore them.
</p>
<p>
This is an effective visualization technique for getting into the details of your data, particularly when working with large datasets. The complexity and messiness of datasets require this rigor, as nuances are often missed because of neglecting to look at the data in detail, often leading to unreliable results.
</p>
<!-- <a href="#" class="btn-learn-more">Learn More</a> -->
</div>
<div class="col-lg-6 pt-4 pt-lg-0">
<h3>
Trelliscope is useful in these types of scenarios:
</h3>
<ul>
<li><i class="ri-check-double-line"></i> You want to visualize different parts of your data in detail and make comparisons across the parts (e.g. what does network activity look like each day for every computer in my organization?)</li>
<li><i class="ri-check-double-line"></i> You have a large collection of images that you need to strategically scan through and possibly label</li>
<li><i class="ri-check-double-line"></i> You have a very large and complex dataset that you do not understand and need to meticulously dive into it</li>
<li><i class="ri-check-double-line"></i> You need to share these types of visualizations with collaborators to gain insights and drive the next steps of analysis</li>
</ul>
</div>
</div>
</div>
</section>
<!-- End About Section -->
<!-- ======= About-How Section ======= -->
<section id="about-how" class="about-how section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>How does it work?</h2>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<h3>Start with a data frame</h3>
<p>
You can start with data in any form, but to use Trelliscope, you need to transform it into a data frame with one row per visualization and with columns representing metadata about each visualization. Trelliscope provides utilities for getting data into this form.
</p>
<p>
In the example below, we have a data frame that is already one row per image, and already has a column that points to the images. This contains images taken by the Mars rover Curiosity. We convert it into a "Trelliscope data frame". Note that the image column can also be a plot object.
</p>
</div>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="200">
<img src="assets/img/trelliscope/ex_dataframe.png" class="img-fluid" alt="">
<!-- <div class="col-lg-12 align-items-stretch order-1 order-lg-2 img" style='background-image: url("assets/img/trelliscope/ex_dataframe.png");' data-aos="zoom-in" data-aos-delay="150"> </div> -->
</div>
<div class="row text-center" data-aos="fade-up" data-aos-delay="300">
<i class="bx bx-down-arrow-alt how-icon"></i>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<h3>Build a Trelliscope display</h3>
<p>
You can build a Trelliscope display with a few lines of code. There are several more options available to fine-tune the user experience: specifying pre-defined views (filters, sorting, labels, grid layout), user inputs, password protection, etc. See the documentation for more details.
</p>
</div>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="200">
<img src="assets/img/trelliscope/ex_code.png" class="img-fluid" alt="">
<!-- <div class="col-lg-12 align-items-stretch order-1 order-lg-2 img" style='background-image: url("assets/img/trelliscope/ex_dataframe.png");' data-aos="zoom-in" data-aos-delay="150"> </div> -->
</div>
<div class="row text-center" data-aos="fade-up" data-aos-delay="300">
<i class="bx bx-down-arrow-alt how-icon"></i>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<h3>View the output</h3>
<p>
Trelliscope produces a web-based interactive app that displays the visualizations in a grid that you can page through and investigate. The visualizations are filterable and sortable by the metadata provided in the Trelliscope data frame.
</p>
<p>
These visualizations can be easily and freely shared through services like GitHub pages or simply sending the app directory to a colleague.
</p>
</div>
</div>
<div class="row" data-aos="fade-up" data-aos-delay="600">
<img src="assets/img/trelliscope/ex_display.png" style="margin-top: 0px;" class="img-fluid" alt="">
<!-- <div class="col-lg-12 align-items-stretch order-1 order-lg-2 img" style='background-image: url("assets/img/trelliscope/ex_dataframe.png");' data-aos="zoom-in" data-aos-delay="150"> </div> -->
</div>
</div>
</section>
<!-- End About-How Section -->
<!-- ======= Examples Section ======= -->
<section id="examples" class="examples">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Examples</h2>
<p>Here are some examples of Trelliscope displays that you can explore. The associated code to create them is also provided.</p>
</div>
<!-- <ul id="examples-flters" class="d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
<li data-filter="*" class="filter-active">all</li>
<li data-filter=".filter-ggplot">ggplot</li>
<li data-filter=".filter-image">images</li>
<li data-filter=".filter-html">htmlwidgets</li>
</ul> -->
<div class="row examples-container" data-aos="fade-up" data-aos-delay="200">
<!-- magic, bikeshare -->
<div class="col-xl-4 col-lg-6 examples-item filter-ggplot">
<div class="examples-img"><img src="assets/img/examples/housing.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Zillow Housing Data</h4>
<p>Explore home prices and other relevant data over time for U.S. metro areas and counties</p>
<a href="https://apps.trelliscope.org/housing/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/housing" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub data"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-image">
<div class="examples-img"><img src="assets/img/examples/lego.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>LEGO Sets and Minifigs</h4>
<p>Explore every LEGO set and minifig cataloged by rebrickable.com</p>
<a href="https://apps.trelliscope.org/bricks/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/lego" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-ggplot">
<div class="examples-img"><img src="assets/img/examples/babynames.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Baby Names</h4>
<p>Explore the popularity and other attributes of baby names over time since 1880</p>
<a href="https://apps.trelliscope.org/babynames/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/babynames" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-html">
<div class="examples-img"><img src="assets/img/examples/mars.jpg" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Mars Rover Images</h4>
<p>Explore over 1.1M images from the Mars rovers Curiosity, Opportunity, Perseverance, and Spirit</p>
<a href="https://apps.trelliscope.org/mars/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/mars" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-html">
<div class="examples-img"><img src="assets/img/examples/gapminder.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Life Expectancy</h4>
<p>Explore the history of life expectancy over time for 142 countries</p>
<a href="https://apps.trelliscope.org/gapminder/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/gapminder" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-ggplot">
<div class="examples-img"><img src="assets/img/examples/mri.jpg" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>MRI Images</h4>
<p>Explore MRI images from oasis-brains.org of patients with and without dementia</p>
<a href="https://apps.trelliscope.org/mri/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/mri" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-image">
<div class="examples-img"><img src="assets/img/examples/stocks.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Stock Prices</h4>
<p>Explore price history and other information for about 3,000 US stocks</p>
<a href="https://apps.trelliscope.org/stocks/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/stocks" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-image">
<div class="examples-img"><img src="assets/img/examples/pokemon.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>Pokemon</h4>
<p>Explore Pokemon by many of their characteristics as captured from Pokedex</p>
<a href="https://apps.trelliscope.org/pokemon/" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/pokemon" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
<div class="col-xl-4 col-lg-6 examples-item filter-html">
<div class="examples-img"><img src="assets/img/examples/taxi.png" class="img-fluid" alt=""></div>
<div class="examples-info">
<h4>NYC Taxi Data</h4>
<p>Example of linking Trelliscope to a very large dataset of NYC taxi ride records</p>
<a href="https://trelliscope.org/trelliscope/articles/bigdata.html" class="details-link" target="_blank" rel="noreferrer" title="Open example"><i class="bx bx-link-external"></i></a>
<a href="https://github.com/trelliscope/examples/tree/main/nyc-taxi" class="preview-link" target="_blank" rel="noreferrer" title="Open code in GitHub"><i class="bx bxl-github"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- End examples Section -->
<!-- ======= Cta Section ======= -->
<section id="cta" class="cta">
<div class="container" data-aos="fade-in">
<div class="row">
<div class="col-lg-9 text-center text-lg-start">
<h3>Get Started!</h3>
<p>High-level interfaces for generating Trelliscope displays are being developed for R, Python, and JavaScript. Currently the R interface is the only one ready for use. Click the button to learn how to start using the R package to visualize your data.</p>
</div>
<div class="col-lg-3 cta-btn-container text-center">
<a class="cta-btn align-middle" href="https://trelliscope.org/trelliscope/index.html">Get Started with R</a>
</div>
</div>
</div>
</section>
<!-- End Cta Section -->
<!-- ======= Services Section ======= -->
<section id="goals" class="goals">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Goals</h2>
<p>The ideals below guide the development of this project.</p>
</div>
<div class="row">
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box">
<div class="icon"><i class="bx bx-happy-beaming"></i></div>
<h4><a>Simple</a></h4>
<p>We have designed Trelliscope to fit seamlessly into workflows familiar to data scientists, such as ggplot2 in R and other Tidyverse paradigms. You can get to a simple Trelliscope display quickly with minimal code.</p>
</div>
</div>
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box">
<div class="icon"><i class="bx bx-slider"></i></div>
<h4><a>Customizable</a></h4>
<p>While it is easy to produce results very quickly with Trellisope, it provides many utilities for customizing the output for the best user experience, including the default view, specifying other predefined views, fine-tuning how the metadata is displayed, and even allowing for user inputs.</p>
</div>
</div>
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box">
<div class="icon"><i class="bx bx-expand"></i></div>
<h4><a>Scalable</a></h4>
<p>Visualizing summary data is essential in exploratory analysis, but often important details can get lost in the summaries. The goal of Trelliscope is to make it fast and easy to explore data in detail, regardless of the size.</p>
</div>
</div>
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="400">
<div class="icon-box">
<div class="icon"><i class="bx bx-share"></i></div>
<h4><a>Shareable</a></h4>
<p>The engine behind the Trelliscope viewer is written in JavaScript so there is no need for a special back-end setup to share Trelliscope displays. You can post on any web server or you can simply send the containing directory to your colleagues. We have also made it easy to embed Trelliscope displays in RMarkdown documents and Shiny apps.</p>
</div>
</div>
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="500">
<div class="icon-box">
<div class="icon"><i class="bx bx-group"></i></div>
<h4><a>Collaborative</a></h4>
<p>The interactive displays you create with Trelliscope empower domain experts to explore data in detail, enabling them to answer questions in real time without writing code. In our experience it has served as an engaging and powerful communication and translation medium between data scientists and domain experts.</p>
</div>
</div>
<div class="col-xl-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="600">
<div class="icon-box">
<div class="icon"><i class="bx bx-code-alt"></i></div>
<h4><a>Open Source</a></h4>
<p>Trelliscope is open source under the MIT license. Our code is your code.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Services Section -->
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container footer-bottom clearfix">
<div class="copyright">
</div>
<div class="credits">
</div>
</div>
</footer>
<!-- End Footer -->
<div id="preloader"></div>
<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="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>