-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
354 lines (348 loc) · 18.3 KB
/
index.html
File metadata and controls
354 lines (348 loc) · 18.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Perspective</title>
<meta
name="description"
content="Interactive analytics and data visualization component for large and streaming datasets."
/>
<link rel="icon" href="https://openjsf.org/favicon.ico" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-container header-shift" id="page">
<nav class="navbar">
<div class="navbar__inner">
<a href="/" class="navbar__logo"><img alt="Perspective" src="/svg/perspective-logo-dark.svg"/></a>
<ul class="navbar__links">
<li><a href="/guide/index.html">Docs</a></li>
<li><a href="/examples.html">Examples</a></li>
<li>
<a
href="https://github.com/perspective-dev/perspective"
>GitHub</a
>
</li>
<li id="theme-toggle"></li>
</ul>
</div>
</nav>
<main>
<header class="hero-banner">
<div class="hero-banner__buttons" id="demo-container"></div>
</header>
<section class="features">
<div class="features__container">
<hr />
<br /><br /><br />
<div>
<h2>What is Perspective?</h2>
<p>
Perspective is an <i>interactive</i> analytics
and data visualization component, which is
especially well-suited for <i>large</i> and/or
<i>streaming</i> datasets. Use it to create
user-configurable reports, dashboards, notebooks
and applications, then deploy stand-alone in the
browser, or in concert with Python and/or
<a
href="https://jupyterlab.readthedocs.io/en/stable/"
>Jupyterlab</a
>.
</p>
<br />
<h3>Features</h3>
<br />
<div class="feature-item">
<svg
class="feature-item__icon"
width="53"
height="67"
viewBox="0 0 53 67"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6482 1.56063L1.6114 11.2435C1.22069 11.6204 1 12.14 1 12.6829V64C1 65.1046 1.89543 66 3 66H50C51.1046 66 52 65.1046 52 64V50.4471C52 49.6719 51.3716 49.0435 50.5963 49.0435C49.8211 49.0435 49.1927 48.415 49.1927 47.6398V39.1428C49.1927 38.3676 49.8211 37.7391 50.5963 37.7391C51.3716 37.7391 52 37.1107 52 36.3355V3C52 1.89543 51.1046 1 50 1H13.0368C12.5188 1 12.021 1.20098 11.6482 1.56063Z"
/>
<path
d="M29.2391 29H20.5652L16 43.431H24.2174L21.4783 56L37 38.7759H26.0435L29.2391 29Z"
/>
<path d="M42 8H45V19H42V8Z" />
<path d="M36 8H39V19H36V8Z" />
<path d="M31 8H34V19H31V8Z" />
<path d="M25 8H28V19H25V8Z" />
<path d="M19 8H22V19H19V8Z" />
<path d="M14 8H17V19H14V8Z" />
<path d="M8 14H11V22H8V14Z" />
</svg>
<div class="feature-item__text">
<p>
A fast, memory efficient streaming query
engine, written in C++ and compiled for
both
<a href="https://webassembly.org/"
>WebAssembly</a
>
and
<a href="https://www.python.org/"
>Python</a
>, with read/write/streaming for
<a href="https://arrow.apache.org/"
>Apache Arrow</a
>, and a high-performance columnar
expression language based on
<a
href="https://github.com/ArashPartow/exprtk"
>ExprTK</a
>.
</p>
</div>
</div>
<div class="feature-item">
<svg
class="feature-item__icon"
width="49"
height="71"
viewBox="0 0 49 71"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 23.5001L24.3345 6.16554L47.669 23.5001L24.3345 40.8346L1 23.5001Z"
/>
<path
d="M9 41.5L1 47.3345L24.3345 64.669L47.669 47.3345L39.6518 41.3787"
/>
<path
d="M9 29.5001L1 35.3345L24.3345 52.6691L47.669 35.3345L39.6518 29.3788"
/>
</svg>
<div class="feature-item__text">
<p>
A framework-agnostic User Interface
packaged as a
<a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements"
>Custom Element</a
>, powered either in-browser via
WebAssembly or virtually via WebSocket
server (Python/Node).
</p>
</div>
</div>
<div class="feature-item">
<svg
class="feature-item__icon"
width="48"
height="59"
viewBox="0 0 48 59"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="2"
y="1"
width="45"
height="57"
rx="2"
/>
<circle
cx="10"
cy="11"
r="2"
fill="#666"
/>
<circle
cx="10"
cy="30"
r="2"
fill="#666"
/>
<circle
cx="10"
cy="49"
r="2"
fill="#666"
/>
<path d="M10 11H0" />
<path d="M39 10H17" />
<path d="M39 14H17" />
<path d="M39 18H17" />
<path d="M39 22H17" />
<path d="M39 26H17" />
<path d="M39 30H17" />
<path d="M39 34H17" />
<path d="M39 38H17" />
<path d="M39 42H17" />
<path d="M39 46H17" />
<path d="M39 50H17" />
<path d="M10 30H0" />
<path d="M10 49H0" />
</svg>
<div class="feature-item__text">
<p>
A
<a href="https://jupyter.org/"
>JupyterLab</a
>
widget and Python client library, for
interactive data analysis in a notebook,
as well as <i>scalable</i> production
<a
href="https://github.com/voila-dashboards/voila"
>Voila</a
>
applications.
</p>
</div>
</div>
</div>
<hr />
<br /><br /><br />
<div>
<h2>JavaScript</h2>
<p>
Interactive dashboards built on Perspective.js
<a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements"
>Custom Elements</a
>
are easy to integrate into any web application
framework.
</p>
<p>
Using Perspective's simple query language,
elements like
<code><perspective-viewer></code> can be
<i>symmetrically</i> configured via API or User
interaction. Web Applications built with
Perspective Custom Elements can be re-hydrated
from their serialized state, driven from external
Events, or persisted to any store. Workspaces
can mix virtual, server-side Python data with
in-browser client data seamlessly, and
independent data Views can be cross-filtered,
duplicated, exported, stacked and saved.
</p>
<p>
To achieve Desktop-like performance in the
Browser, Perspective.js relies on
<a href="https://webassembly.org/"
>WebAssembly</a
>
for excellent <i>query calculation</i> time, and
<a href="https://arrow.apache.org/"
>Apache Arrow</a
>
for its conservative <i>memory footprint</i> and
efficient <i>data serialization</i>.
</p>
</div>
<hr />
<br /><br /><br />
<div>
<h2>Python</h2>
<p>
<code>perspective-python</code>, built on the
same C++ data engine used by the
<a
href="https://perspective-dev.github.io/docs/md/js.html"
>WebAssembly version</a
>, implements the Perspective API directly in
Python, either as a virtualized server for
Production, or as an embedded JupyterLab Widget
for Research.
</p>
<p>
For Application Developers, virtualized
<code><perspective-viewer></code> will only
consume the data necessary to render the current
screen, enabling <i>ludicrous size</i> datasets
with nearly instant load. Or - efficiently stream
the entire dataset to the WebAssembly runtime via
Apache Arrow, and give your server a break!
</p>
<p>
For Researchers and Data Scientists,
<code>PerspectiveWidget</code> is available as a
<a
href="https://jupyterlab.readthedocs.io/en/stable/"
>Jupyter/JupyterLab</a
>
widget, allowing interactive
<a href="https://pandas.pydata.org/">Pandas</a>
and
<a href="https://arrow.apache.org/"
>Apache Arrow</a
>
visualization within a notebook.
</p>
</div>
<br />
<hr />
</div>
</section>
<section class="gallery-section">
<div class="gallery" id="gallery"></div>
<div style="max-width: 638px; margin: 0 auto">
<hr />
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<img
class="footer__logo"
id="footer-logo"
alt="OpenJS Foundation Logo"
src="/img/openjs_foundation-logo-horizontal-white.png"
/>
<div class="footer__copyright">
<br /><br />Copyright © 2017 OpenJS Foundation and
Perspective contributors.<br /><br />
All rights reserved. The OpenJS Foundation has registered
trademarks and uses trademarks. For a list of trademarks
of the OpenJS Foundation, please see our Trademark Policy
and Trademark List. Trademarks and logos not indicated on
the list of OpenJS Foundation trademarks are
trademarks™ or registered® trademarks of their
respective holders. Use of them does not imply any
affiliation with or endorsement by them.<br /><br />
<a href="https://openjsf.org">The OpenJS Foundation</a>
|
<a href="https://terms-of-use.openjsf.org"
>Terms of Use</a
>
|
<a href="https://privacy-policy.openjsf.org"
>Privacy Policy</a
>
| <a href="https://bylaws.openjsf.org">Bylaws</a> |
<a href="https://code-of-conduct.openjsf.org"
>Code of Conduct</a
>
|
<a href="https://trademark-policy.openjsf.org"
>Trademark Policy</a
>
|
<a href="https://trademark-list.openjsf.org"
>Trademark List</a
>
|
<a href="https://www.linuxfoundation.org/cookies"
>Cookie Policy</a
>
</div>
</div>
</footer>
</div>
<script type="module" src="index.js"></script>
</body>
</html>