Markieren-Interaktionen

from __future__ import print_function

import numpy as np
import pandas as pd

from bqplot import *
from ipywidgets import Layout

Streudiagramm

Auswahl in Streudiagrammen

Klickt auf einen Punkt im Streudiagramm, um ihn auszuwählen und führt anschließend die Zelle unten aus, um die Auswahl zu überprüfen. Versucht schließlich, die Strg-Taste (oder ⌘ auf dem Mac) gedrückt zu halten und auf einen anderen Punkt zu klicken. Durch Klicken auf den Hintergrund wird die Auswahl zurückgesetzt.

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

Alternativ kann das Attribut selected direkt in Python festgelegt werden, z.B. mit der folgenden Zeile:

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])

Call backs und benutzerdefinierte Nachrichten definieren:

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)

figure als Tooltip definieren:

# 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"}

Liniendiagramm

# 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)

Balkendiagramm

# 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)

Histogramm

# 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"}

Tortendiagramm

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"}