How Perspective Delivers Real‑Time Financial Visualizations with WASM and Apache Arrow

Overview

Perspective is an open‑source interactive analysis and visualization component library contributed by J.P. Morgan under the FinOS foundation. It targets large or streaming datasets and can be embedded in browsers, Python notebooks, or JupyterLab to build configurable reports, dashboards, and data‑driven applications.

Architecture

JavaScript side – three layers :

Data engine: core written in C++, compiled with Emscripten to WebAssembly (WASM) and exposed via a WASM interface.

Wrapper layer: developer‑friendly APIs such as worker and websocket that re‑expose the engine.

UI components: viewers (e.g., d3fc , datagrid , openlayers ) implemented mainly in Rust and packaged as Web Components.

Python side – mirrors the JavaScript UI and adds Jupyter integration :

Data engine: bound to Python via pybind11 for native FFI.

Wrapper layer: converts between Arrow‑backed tables and the Python data‑science stack (Pandas, NumPy).

UI layer: uses the Lumino framework to wrap the Web Components for JupyterLab.

Apache Arrow provides a columnar, language‑agnostic memory format that enables zero‑copy sharing, RPC‑based data movement, and efficient I/O for CSV, ORC, and Parquet files.

Compute Offload to C++/WASM

All heavy data operations—filtering, aggregations, and expression evaluation—are delegated to the C++ layer compiled into a ~40 MB WASM bundle. The primary data container is the Table object, which holds immutable, typed columns. Expressions are parsed and evaluated by the ExprTk engine inside the WASM module, minimizing JavaScript overhead.

Data Interchange with Apache Arrow

Perspective serializes tables using Arrow’s IPC protocol, which is defined with FlatBuffers. This approach avoids extra parsing, enables zero‑copy memory access across language boundaries, and supports fast read/write of columnar file formats such as CSV, ORC, and Parquet.

Front‑End Components

The library is framework‑free and distributed as pure Web Components, allowing easy integration with any front‑end stack. It employs virtual rendering via the regular-table component, which renders only the visible viewport to keep DOM node counts low.

<ol>
  <li><code><perspective-workspace></code></li>
  <li><code><perspective-viewer></code></li>
  <li><code><perspective-viewer-datagrid></code></li>
  <li><code><regular-table /></code></li>
  <li><code><perspective-viewer-datagrid-toolbar /></code></li>
  <li><code><perspective-viewer ... /></code></li>
  <li><code></perspective-workspace></code></li>
</ol>

When underlying data changes, the viewer invokes update_and_render to refresh the UI.

Key References

Apache Arrow documentation: https://arrow.apache.org/

Perspective.js official website (URL omitted for brevity)