from __future__ import print_function
from bqplot import *
import numpy as np
import pandas as pd
from ipywidgets import Layout, Dropdown, Button
from ipywidgets import Image as ImageIpy
Click a point on the Scatter
plot to select it. Now, run the cell below to check the selection. After you've done this, try holding the ctrl
(or command
key on Mac) and clicking another point. Clicking 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
Alternately, the selected
attribute can be directly set on the Python side (try running the cell below):
scatter_chart.selected = [1, 2, 3]
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
line = Lines(x=x_data, y=y_data, scales={"x": x_sc, "y": y_sc}, colors=["dodgerblue"])
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")
fig = Figure(marks=[scatter_chart, scatter_chart2, line], axes=[ax_x, ax_y])
fig
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)
line.on_element_click(print_event)
# Changing interaction from hover to click for tooltip
scatter_chart.interactions = {"click": "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
For images, on_element_click
returns the location of the mouse click.
i = ImageIpy.from_file(os.path.abspath("../data_files/trees.jpg"))
bqi = Image(image=i, scales={"x": x_sc, "y": y_sc}, x=(0, 10), y=(-1, 1))
fig_image = Figure(marks=[bqi], axes=[ax_x, ax_y])
fig_image
bqi.on_element_click(print_event)
# 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)
# 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)
# 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"}
Set up a pie chart with click to show the tooltip.
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"}