Perspective › Examples

Webcam — Small Spreadsheet Cam

Data grid of color, grouped by bucket(y, 5), split by bucket(x, 5), filtered to bucket(x, 5) < 0, with 3 computed expression columns.

Live webcam luminance sampled into a Perspective table at 20fps (falls back to a placeholder image without a camera).

Webcam — Small Spreadsheet Cam: Data grid of color, grouped by bucket(y, 5), split by bucket(x, 5), filtered to bucket(x, 5) < 0, with 3 computed expression columns.

Data

Live webcam frames streamed into a Perspective table one pixel per row, and rendered back as real-time heatmaps, scatter plots and histograms.

Generated continuously in the browser by a JavaScript simulation streaming into a Perspective Table.

Configuration

This example is a saved <perspective-viewer> workspace. Pass this JSON to viewer.restoreWorkspace() to reproduce it over the same table:

{
    "layout": {
        "type": "tab-layout",
        "tabs": [
            "p0"
        ],
        "selected": 0
    },
    "panels": {
        "p0": {
            "table": "",
            "plugin": "Datagrid",
            "columns_config": {
                "color": {
                    "bg_gradient": 2463.68,
                    "neg_bg_color": "#ffa38f",
                    "bg_mode": "gradient",
                    "fg_mode": "disabled",
                    "pos_bg_color": "#307bb0"
                }
            },
            "group_rollup_mode": "flat",
            "plugin_config": {
                "editable": false,
                "scroll_lock": false
            },
            "title": "Small Spreadsheet Cam",
            "group_by": [
                "bucket(y, 5)"
            ],
            "split_by": [
                "bucket(x, 5)"
            ],
            "columns": [
                "color"
            ],
            "filter": [
                [
                    "bucket(x, 5)",
                    "<",
                    0
                ]
            ],
            "sort": [],
            "expressions": {
                "bucket(y, 5)": "bucket(floor(\"index\" / 80), 2)",
                "New Column 1": "bucket(\"color\", 5)",
                "bucket(x, 5)": "bucket(-\"index\" % 80, 5)"
            },
            "aggregates": {}
        }
    },
    "active": "p0"
}

About Perspective

Perspective is an open-source, WebAssembly-powered data grid, pivot table and charting component for large, real-time and streaming datasets — in the browser, Python, Jupyter, Node.js and Rust.

Documentation