Interactions

Warning

Interactions are only supported by the widget format. When using another output format, only static plots can be produced.

Tooltips

The tip mark, introduced in Observable 0.6.7, allows to easily add tooltips to a plot.

import polars as pl
from pyobsplot import Plot, d3, js

stocks = pl.read_csv("data/stocks.csv", try_parse_dates=True)

Plot.plot(
    {
        "y": {"grid": True},
        "color": {"legend": True},
        "marks": [
            Plot.lineY(
                stocks, {"x": "Date", "y": "Close", "stroke": "Symbol", "tip": True}
            )
        ],
    }
)

Crosshair mark

The crosshair mark alows to display the coordinates of the nearest point.

penguins = pl.read_csv("data/penguins.csv")

Plot.plot(
    {
        "marks": [
            Plot.dot(
                penguins,
                {"x": "culmen_length_mm", "y": "culmen_depth_mm", "stroke": "island"},
            ),
            Plot.crosshair(
                penguins,
                {"x": "culmen_length_mm", "y": "culmen_depth_mm", "color": "island"},
            ),
        ]
    }
)

Pointer interaction

More generally, the pointer interaction allows to filter out the closest data point and apply some custom marks to it.

aapl = stocks.filter(pl.col("Symbol") == "AAPL")

Plot.plot(
    {
        "height": 160,
        "inset": 20,
        "y": {"axis": "right", "grid": True, "nice": True},
        "marks": [
            Plot.lineY(aapl, {"x": "Date", "y": "Close"}),
            Plot.ruleX(
                aapl, Plot.pointerX({"x": "Date", "py": "Close", "stroke": "red"})
            ),
            Plot.dot(aapl, Plot.pointerX({"x": "Date", "y": "Close", "stroke": "red"})),
            Plot.text(
                aapl,
                Plot.pointerX(
                    {
                        "x": "Date",
                        "dy": -15,
                        "frameAnchor": "top",
                        "fill": "red",
                        "text": js("(d) => Plot.formatIsoDate(d.Date)"),
                    }
                ),
            ),
        ],
    }
)