Perspective › Examples

Market — Order Book (Stack All Status)

X Bar chart of price, grouped by bucket("price", 0.5), split by if("status"=='closed'){'closed'}else{"side"}, filtered to status != expired, sorted by bucket("price", 0.5) and status, with 7 computed expression columns.

Simulated real-time order flow: a stateful matching engine on a private worker, view-mirrored to the UI.

Market — Order Book (Stack All Status): X Bar chart of price, grouped by bucket("price", 0.5), split by if("status"=='closed'){'closed'}else{"side"}, filtered to status != expired, sorted by bucket("price", 0.5) and status, with 7 computed expression columns.

Data

A simulated order book streaming into a Perspective table in real time: orders are created, filled, cancelled and expired continuously, and every data grid, pivot and chart updates incrementally as they arrive.

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": "",
            "theme": null,
            "plugin": "X Bar",
            "plugin_config": {},
            "title": "Order Book (Stack All Status)",
            "group_by": [
                "bucket(\"price\", 0.5)"
            ],
            "split_by": [
                "if(\"status\"=='closed'){'closed'}else{\"side\"}"
            ],
            "columns": [
                "price"
            ],
            "filter": [
                [
                    "status",
                    "!=",
                    "expired"
                ]
            ],
            "sort": [
                [
                    "bucket(\"price\", 0.5)",
                    "desc"
                ],
                [
                    "status",
                    "col asc"
                ]
            ],
            "expressions": {
                "if(\"status\"=='open' and \"side\"=='buy'){1}else{float(null)}": "if(\"status\"=='open' and \"side\"=='buy'){1}else{float(null)}",
                "bucket(\"timestamp\", 's')": "bucket(\"timestamp\", 's')",
                "bucket(\"price\", 0.5)": "bucket(\"price\", 0.5)",
                "if(\"status\"=='open'){\"price\"}else{float(null)}": "if(\"status\"=='open'){\"price\"}else{float(null)}",
                "if(\"status\"=='closed'){1}else{0}": "if(\"status\"=='closed'){1}else{0}",
                "if(\"status\"=='open' and \"side\"=='sell'){1}else{float(null)}": "if(\"status\"=='open' and \"side\"=='sell'){1}else{float(null)}",
                "if(\"status\"=='closed'){'closed'}else{\"side\"}": "if(\"status\"=='closed'){'closed'}else{\"side\"}"
            },
            "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