Markieren-Interaktionen#

[1]:
from __future__ import print_function
from bqplot import *
import numpy as np
import pandas as pd
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.

[2]:
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])
[3]:
scatter_chart.selected

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

[4]:
scatter_chart.selected = [1, 2, 3]

Streudiagramm-Interaktionen und -Tooltips#

[5]:
from ipywidgets import *
[6]:
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:

[7]:
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:

[8]:
# 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
[9]:
# Changing interaction from hover to click for tooltip
scatter_chart.interactions = {'click': 'tooltip'}

Liniendiagramm#

[10]:
# 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])
[11]:
# 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#

[12]:
# 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])
[13]:
# 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',
}
[14]:
# Changing tooltip to be on click
bar_chart.interactions = {'click': 'tooltip'}
[15]:
# Call back on legend being clicked
bar_chart.type='grouped'
bar_chart.on_legend_click(print_event)

Histogramm#

[16]:
# 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])
[17]:
# Changing tooltip to be displayed on click
hist.interactions = {'click': 'tooltip'}
[18]:
# Changing tooltip to be on click of legend
hist.interactions = {'legend_click': 'tooltip'}

Tortendiagramm#

[19]:
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])
[20]:
# Changing interaction to select on click and tooltip on hover
pie.interactions = {'click': 'select', 'hover': 'tooltip'}