Mark interactions

from __future__ import print_function

import numpy as np
import pandas as pd

from bqplot import *
from ipywidgets import Layout

Scatter diagram

Selection in scatter diagrams

Click on a point in the scatter plot to select it and then execute the cell below to check the selection. Finally, try holding down the Ctrl key (or ⌘ on Mac) and clicking on another point. Clicking on the background will reset the selection.

x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(20)
y_data = np.random.randn(20)

scatter_chart = Scatter(
    x=x_data,
    y=y_data,
    scales={"x": x_sc, "y": y_sc},
    colors=["dodgerblue"],
    interactions={"click": "select"},
    selected_style={"opacity": 1.0, "fill": "DarkOrange", "stroke": "Red"},
    unselected_style={"opacity": 0.5},
)

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")

Figure(marks=[scatter_chart], axes=[ax_x, ax_y])

scatter_chart.selected

Alternatively, the selected attribute can be defined directly in Python, for example with the following line:

scatter_chart.selected = [1, 2, 3]

Streudiagramm-Interaktionen und -Tooltips

from ipywidgets import *

x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(20)
y_data = np.random.randn(20)

dd = Dropdown(options=["First", "Second", "Third", "Fourth"])
scatter_chart = Scatter(
    x=x_data,
    y=y_data,
    scales={"x": x_sc, "y": y_sc},
    colors=["dodgerblue"],
    names=np.arange(100, 200),
    names_unique=False,
    display_names=False,
    display_legend=True,
    labels=["Blue"],
)
ins = Button(icon="fa-legal")
scatter_chart.tooltip = ins

scatter_chart2 = Scatter(
    x=x_data,
    y=np.random.randn(20),
    scales={"x": x_sc, "y": y_sc},
    colors=["orangered"],
    tooltip=dd,
    names=np.arange(100, 200),
    names_unique=False,
    display_names=False,
    display_legend=True,
    labels=["Red"],
)

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")

Figure(marks=[scatter_chart, scatter_chart2], axes=[ax_x, ax_y])

Define call backs and customised messages:

def print_event(self, target):
    print(target)


# Adding call back to scatter events
# print custom mssg on hover and background click of Blue Scatter
scatter_chart.on_hover(print_event)
scatter_chart.on_background_click(print_event)

# print custom mssg on click of an element or legend of Red Scatter
scatter_chart2.on_element_click(print_event)
scatter_chart2.on_legend_click(print_event)

Define figure as tooltip:

# Adding figure as tooltip
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(10)
y_data = np.random.randn(10)

lc = Lines(x=x_data, y=y_data, scales={"x": x_sc, "y": y_sc})
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")
tooltip_fig = Figure(
    marks=[lc], axes=[ax_x, ax_y], layout=Layout(min_width="600px")
)

scatter_chart.tooltip = tooltip_fig

# Changing interaction from hover to click for tooltip
scatter_chart.interactions = {"click": "tooltip"}

Line diagram

# Adding default tooltip to Line Chart
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(100)
y_data = np.random.randn(3, 100)

def_tt = Tooltip(
    fields=["name", "index"], formats=["", ".2f"], labels=["id", "line_num"]
)
line_chart = Lines(
    x=x_data,
    y=y_data,
    scales={"x": x_sc, "y": y_sc},
    tooltip=def_tt,
    display_legend=True,
    labels=["line 1", "line 2", "line 3"],
)

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")

Figure(marks=[line_chart], axes=[ax_x, ax_y])

# Adding call back to print event when legend or the line is clicked
line_chart.on_legend_click(print_event)
line_chart.on_element_click(print_event)

Bar chart

# Adding interaction to select bar on click for Bar Chart
x_sc = OrdinalScale()
y_sc = LinearScale()

x_data = np.arange(10)
y_data = np.random.randn(2, 10)

bar_chart = Bars(
    x=x_data,
    y=[y_data[0, :].tolist(), y_data[1, :].tolist()],
    scales={"x": x_sc, "y": y_sc},
    interactions={"click": "select"},
    selected_style={"stroke": "orange", "fill": "red"},
    labels=["Level 1", "Level 2"],
    display_legend=True,
)
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")

Figure(marks=[bar_chart], axes=[ax_x, ax_y])

# Adding a tooltip on hover in addition to select on click
def_tt = Tooltip(fields=["x", "y"], formats=["", ".2f"])
bar_chart.tooltip = def_tt
bar_chart.interactions = {
    "legend_hover": "highlight_axes",
    "hover": "tooltip",
    "click": "select",
}

# Changing tooltip to be on click
bar_chart.interactions = {"click": "tooltip"}

# Call back on legend being clicked
bar_chart.type = "grouped"
bar_chart.on_legend_click(print_event)

Histogram

# Adding tooltip for Histogram
x_sc = LinearScale()
y_sc = LinearScale()

sample_data = np.random.randn(100)

def_tt = Tooltip(formats=["", ".2f"], fields=["count", "midpoint"])
hist = Hist(
    sample=sample_data,
    scales={"sample": x_sc, "count": y_sc},
    tooltip=def_tt,
    display_legend=True,
    labels=["Test Hist"],
    select_bars=True,
)
ax_x = Axis(scale=x_sc, tick_format="0.2f")
ax_y = Axis(scale=y_sc, orientation="vertical", tick_format="0.2f")

Figure(marks=[hist], axes=[ax_x, ax_y])

# Changing tooltip to be displayed on click
hist.interactions = {"click": "tooltip"}

# Changing tooltip to be on click of legend
hist.interactions = {"legend_click": "tooltip"}

Pie chart

pie_data = np.abs(np.random.randn(10))

sc = ColorScale(scheme="Reds")
tooltip_widget = Tooltip(
    fields=["size", "index", "color"], formats=["0.2f", "", "0.2f"]
)
pie = Pie(
    sizes=pie_data,
    scales={"color": sc},
    color=np.random.randn(10),
    tooltip=tooltip_widget,
    interactions={"click": "tooltip"},
    selected_style={"fill": "red"},
)

pie.selected_style = {"opacity": "1", "stroke": "white", "stroke-width": "2"}
pie.unselected_style = {"opacity": "0.2"}

Figure(marks=[pie])

# Changing interaction to select on click and tooltip on hover
pie.interactions = {"click": "select", "hover": "tooltip"}