Perspective › Examples

Movies

4-panel dashboard of Heatmap, Y Line, Datagrid and Y Area: Heatmap chart of US Gross, grouped by bucket("Rotten Tomatoes Rating", 2.5), split by bucket("IMDB Rating", 0.25), filtered to bucket("IMDB Rating", 0.25) is not null, with 2 computed expression columns; Y Line chart of US Gross, Rotten Tomatoes Rating, Production Budget and Worldwide Gross, grouped by bucket("Release Date", 'Y'), with 1 computed expression column; Data grid of US Gross, grouped by Distributor, sorted by US Gross; Y Area chart of US Gross, grouped by bucket("Release Date", 'Y'), split by Major Genre, with 1 computed expression column.

Box office and ratings, from the Vega sample data.

Data

Box office, budget and ratings for a few thousand films, from the Vega sample datasets, explored as scatter plots, heatmaps and pivot tables.

Loaded from /data/movies.arrow as arrow into the perspective-server engine.

Configuration

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

{
    "active": "PERSPECTIVE_GENERATED_ID_2",
    "layout": {
        "type": "split-layout",
        "children": [
            {
                "type": "tab-layout",
                "tabs": [
                    "PERSPECTIVE_GENERATED_ID_2"
                ],
                "selected": 0
            },
            {
                "type": "split-layout",
                "children": [
                    {
                        "type": "split-layout",
                        "children": [
                            {
                                "type": "tab-layout",
                                "tabs": [
                                    "PERSPECTIVE_GENERATED_ID_1"
                                ],
                                "selected": 0
                            },
                            {
                                "type": "tab-layout",
                                "tabs": [
                                    "PERSPECTIVE_GENERATED_ID_3"
                                ],
                                "selected": 0
                            }
                        ],
                        "sizes": [
                            0.5,
                            0.5
                        ],
                        "orientation": "horizontal"
                    },
                    {
                        "type": "tab-layout",
                        "tabs": [
                            "PERSPECTIVE_GENERATED_ID_0"
                        ],
                        "selected": 0
                    }
                ],
                "sizes": [
                    0.5,
                    0.5
                ],
                "orientation": "vertical"
            }
        ],
        "sizes": [
            0.25,
            0.75
        ],
        "orientation": "horizontal"
    },
    "panels": {
        "PERSPECTIVE_GENERATED_ID_0": {
            "plugin": "Heatmap",
            "table": "movies",
            "group_by": [
                "bucket(\"Rotten Tomatoes Rating\", 2.5)"
            ],
            "split_by": [
                "bucket(\"IMDB Rating\", 0.25)"
            ],
            "filter": [
                [
                    "bucket(\"IMDB Rating\", 0.25)",
                    "is not null",
                    null
                ]
            ],
            "expressions": {
                "bucket(\"Rotten Tomatoes Rating\", 2.5)": "bucket(\"Rotten Tomatoes Rating\", 2.5)",
                "bucket(\"IMDB Rating\", 0.25)": "bucket(\"IMDB Rating\", 0.25)"
            },
            "columns": [
                "US Gross"
            ],
            "aggregates": {
                "bucket(\"Rotten Tomatoes Rating\", 2.5)": "avg"
            }
        },
        "PERSPECTIVE_GENERATED_ID_1": {
            "plugin": "Y Line",
            "table": "movies",
            "title": "Ratings vs Sales",
            "group_by": [
                "bucket(\"Release Date\", 'Y')"
            ],
            "expressions": {
                "bucket(\"Release Date\", 'Y')": "bucket(\"Release Date\", 'Y')"
            },
            "columns": [
                "US Gross",
                "Rotten Tomatoes Rating",
                "Production Budget",
                "Worldwide Gross",
                "US DVD Sales"
            ],
            "aggregates": {
                "Rotten Tomatoes Rating": "avg"
            }
        },
        "PERSPECTIVE_GENERATED_ID_2": {
            "plugin": "Datagrid",
            "plugin_config": {
                "scroll_lock": true,
                "edit_mode": "SELECT_ROW_TREE"
            },
            "table": "movies",
            "group_by": [
                "Distributor"
            ],
            "sort": [
                [
                    "US Gross",
                    "desc"
                ]
            ],
            "columns": [
                "US Gross"
            ]
        },
        "PERSPECTIVE_GENERATED_ID_3": {
            "plugin": "Y Area",
            "table": "movies",
            "title": "US Gross by Genre",
            "group_by": [
                "bucket(\"Release Date\", 'Y')"
            ],
            "split_by": [
                "Major Genre"
            ],
            "expressions": {
                "bucket(\"Release Date\", 'Y')": "bucket(\"Release Date\", 'Y')"
            },
            "columns": [
                "US Gross"
            ]
        }
    },
    "masters": [
        "PERSPECTIVE_GENERATED_ID_2"
    ]
}

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