The package at Github j1-nbinteract aims to enable authors and educators to create and share interactive web pages easily. Interactive explanations of concepts are useful for communicating and explaining complex concepts better. The package j1-nbinteract comes with a set of backend functions that produce Javascript-based plots designed for interaction. The package combines the ipywidgets library and the bqplot plotting library to implement function-driven interfaces for interactive plotting.
The current version of j1-nbinteract 1.x is limited to Notebook v6 (Classic Notebook). The latest version Jupyter Notebook v7 (JupyterLab) are supported by upcoming versions of j1-nbinteract 2.x. |
The j1-nbinteract plotting methods use ipywidgets to generate and display widgets, inferring the widget type automatically as needed. When a user interacts with a widget, a Python callback updates the visualization without a complete rerender. This noticeably lowers visualization update time compared to using ipywidgets for other plotting libraries that render static images.
Histogram
The widget nbinteract.hist
generates an interactive histogram that allows users to change the parameters of the input hist_function.
Example
def hist_function(mean, sd, size=1000):
'''
Returns 1000 values picked at random from the normal
distribution with the Mean value and SD given.
'''
return np.random.normal(loc=mean, scale=sd, size=1000)
options = {
'title': 'Histogram',
'xlabel': 'Mean value (mean)',
'ylabel': 'Standard Deviation (sd)',
'bins': 10
}
layouts = {
'plot_height': '480px',
'plot_width': '800px',
}
hist_chart = nbi.hist(
hist_function,
mean=(0, 10),
sd=(0.2, 2.0, 0.2),
options=options,
layouts=layouts
)
hist_chart
Synopsis
nbinteract.hist(
hist_function,
*, (1)
options={},
layouts={},
**interact_params
)
1 | arbitrary variables to control the hist_function |
Options
hist_function (Array | (*args -> Array int | Array float)):
Function that takes in parameters to interact with and returns an
array of numbers. These numbers will be plotted in the resulting
histogram.
interact_params (dict):
Keyword arguments in the same format as `ipywidgets.interact`.
One parameter is required for each argument of both `x_fn` and `y_fn`.
If `x_fn` and `y_fn` have conflicting parameter names, prefix the
corresponding kwargs with `x__` and
`y__`.
Name | Value | Description |
---|---|---|
| empty string | Title of the plot |
| float | Aspect ratio of the figure, defaults 16:9 ratio |
| int | Duration of transition on change of the data measured in milliseconds |
| empty string | Label of the x-axis |
| empty string | Label of the y-axis |
| Tuple | Contains the (lower, upper) values for x-axis |
| Tuple | Contains the (lower, upper) values for y-axis |
| int (positive) | Non-negative int for the number of Towers (bars) generated for the histogram. Default: 10 |
| Boolean (True|False) | Normalize histogram area to 1 if |
Name | Value | Description |
---|---|---|
| string | Specifies the |
| string | Specifies the |
Bar chart
The widget nbinteract.bar
generates an interactive bar chart that allows users to change the parameters of the inputs x_fn and y_fn.
Example
import nbinteract as nbi
import numpy as np
def x_fn(n):
return np.arange(n)
def y_fn(xs, offset):
return xs + offset
options = {
'ylim': (0, 20),
}
layouts = {
'plot_height': '480px',
'plot_width': '800px',
}
bar_chart = nbi.bar(
x_fn,
y_fn,
n=(3, 10),
offset=(1, 10),
options=options,
layouts=layouts
)
# print("Barchart Dataset: ", bar_chart)
bar_chart
Synopsis
nbinteract.bar(
x_fn,
y_fn,
*, (1)
options={},
layouts={},
**interact_params
)
1 | arbitrary variables to control the functions x_fn and y_fn |
Options
x_fn (Array | (*args -> Array str | Array int | Array float)):
If array, uses array values for categories of bar chart.
If function, must take parameters to interact with and return an
array of strings or numbers. These will become the categories on
the x-axis of the bar chart.
y_fn (Array | (Array, *args -> Array int | Array float)):
If array, uses array values for heights of bars.
If function, must take in the output of x_fn as its first parameter
and optionally other parameters to interact with. Must return an
array of numbers. These will become the heights of the bars on the
y-axis.
Name | Value | Description |
---|---|---|
| empty string | Title of the plot |
| float | Aspect ratio of the figure, defaults 16:9 ratio |
| int | Duration of transition on change of the data measured in milliseconds |
| empty string | Label of the x-axis |
| empty string | Label of the y-axis |
| Tuple | Contains the (lower, upper) values for x-axis |
| Tuple | Contains the (lower, upper) values for y-axis |
Name | Value | Description |
---|---|---|
| string | Specifies the |
| string | Specifies the |
Interactive Scatter Chart
The widget nbinteract.scatter_drag
generates an interactive scatter plot with the best fit line plotted over the points. The points can be dragged by the user and the line will automatically update.
Example
import nbinteract as nbi
import numpy as np
from numpy import arange
x_points = np.arange(10)
y_points = np.arange(10) + np.random.rand(10)
options = {
'title': 'Interactive Scatter Plot',
'xlabel': 'x-values',
'ylabel': 'y-values',
'xlim': (0, 10),
'ylim': (0, 10),
'animation_duration': 1000
}
layouts = {
'plot_height': '480px',
'plot_width': '800px',
}
scatter_drag = nbi.scatter_drag(
x_points,
y_points,
options=options,
layouts=layouts
)
scatter_drag
Rendered Interactive Scatter Chart
Find an live example on page: Common used widgets — Interactive Scatter Chart. |
Synopsis
nbinteract.scatter_drag(
x_points: 'Array',
y_points: 'Array',
options={},
layouts={}
)
Options
x_points (Array Number): x-values of points to plot
y_points (Array Number): y-values of points to plot
Name | Value | Description |
---|---|---|
| empty string | Title of the plot |
| float | Aspect ratio of the figure, defaults 16:9 ratio |
| int | Duration of transition on change of the data measured in milliseconds |
| empty string | Label of the x-axis |
| empty string | Label of the y-axis |
| Tuple | Contains the (lower, upper) values for x-axis |
| Tuple | Contains the (lower, upper) values for y-axis |
Name | Value | Description |
---|---|---|
| string | Specifies the |
| string | Specifies the |
Scatter Chart
The widget nbinteract.scatter
generates an interactive scatter chart that allows users to change the parameters of the inputs x_fn and y_fn.
Example
def x_fn(n):
return np.random.choice(100, n)
def y_fn(xs):
return np.random.choice(100, len(xs))
options = {
'title': 'Scatter Plot',
'marker': 'circle',
'animation_duration': 1000,
'xlabel': 'x-values',
'ylabel': 'y-values',
'xlim': (0, 100),
'ylim': (0, 100)
}
layouts = {
'plot_height': '480px',
'plot_width': '800px',
}
scatter_chart = nbi.scatter(
x_fn,
y_fn,
n=(10,200),
options=options,
layouts=layouts
)
scatter_chart
Synopsis
nbinteract.scatter(
x_fn,
y_fn,
*, (1)
options={},
layouts={},
**interact_params
)
1 | arbitrary variables to control the functions x_fn and y_fn |
Options
x_fn (Array | (*args -> Array str | Array int | Array float)):
If array, uses array values for x-coordinates.
If function, must take parameters to interact with and return an
array of strings or numbers. These will become the x-coordinates
of the scatter plot.
y_fn (Array | (Array, *args -> Array int | Array float)):
If array, uses array values for y-coordinates.
If function, must take in the output of x_fn as its first parameter
and optionally other parameters to interact with. Must return an
array of numbers. These will become the y-coordinates of the
scatter plot.
Name | Value | Description |
---|---|---|
| empty string | Title of the plot |
| float | Aspect ratio of the figure, defaults 16:9 ratio |
| int | Duration of transition on change of the data measured in milliseconds |
| empty string | Label of the x-axis |
| empty string | Label of the y-axis |
| Tuple | Contains the (lower, upper) values for x-axis |
| Tuple | Contains the (lower, upper) values for y-axis |
|
| Shape of marker plots. Default: |
Name | Value | Description |
---|---|---|
| string | Specifies the |
| string | Specifies the |
Line Chart
Generates an interactive line chart that allows users to change the parameters of the inputs x_fn
and y_fn
. The first two arguments of line
are response functions that return the x and y-axis coordinates.
Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to line in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument.
Example
import nbinteract as nbi
import numpy as np
from numpy import arange
def x_fn(max):
return np.arange(0, max + 1)
def y_fn(xs, sd):
return xs + np.random.normal(0, scale=sd, size=len(xs))
options = {
'title': 'Line chart',
'xlabel': 'x-values (max)',
'ylabel': 'y-values (sd)',
'xlim': (0, 50),
'ylim': (-20, 70),
'animation_duration': 500
}
layouts = {
'plot_height': '480px',
'plot_width': '800px',
}
line_chart = nbi.line(
x_fn,
y_fn,
max=(10, 50),
sd=(0, 10),
options=options,
layouts=layouts
)
line_chart
Synopsis
nbinteract.line(
x_fn,
y_fn,
*, (1)
options={},
layouts={},
**interact_params
)
1 | arbitrary variables to control the functions x_fn and y_fn |
Options
x_fn (Array | (*args -> Array str | Array int | Array float)):
If array, uses array values for x-coordinates.
If function, must take parameters to interact with and return an
array of strings or numbers. These will become the x-coordinates
of the line plot.
y_fn (Array | (Array, *args -> Array int | Array float)):
If array, uses array values for y-coordinates.
If function, must take in the output of x_fn as its first parameter
and optionally other parameters to interact with. Must return an
array of numbers. These will become the y-coordinates of the line
plot.
interact_params (dict):
Keyword arguments in the same format as `ipywidgets.interact`.
One parameter is required for each argument of both `x_fn` and `y_fn`.
If `x_fn` and `y_fn` have conflicting parameter names, prefix the
corresponding kwargs with `x__` and `y__`
Name | Value | Description |
---|---|---|
| empty string | Title of the plot |
| float | Aspect ratio of the figure, defaults 16:9 ratio |
| int | Duration of transition on change of the data measured in milliseconds |
| empty string | Label of the x-axis |
| empty string | Label of the y-axis |
| Tuple | Contains the (lower, upper) values for x-axis |
| Tuple | Contains the (lower, upper) values for y-axis |
Name | Value | Description |
---|---|---|
| string | Specifies the |
| string | Specifies the |
Multiple Choice
Generates a multiple choice question that allows the user to select an answer choice and shows whether choice was correct.
Example
import nbinteract as nbi
multiple_choice = nbi.multiple_choice(
question="Select all prime numbers.",
choices=['12', '3', '31'],
answers=[1, 2]
)
multiple_choice
Synopsis
nbinteract.multiple_choice(
question,
choices,
answers
)
Options
Name | Value | Description |
---|---|---|
| empty string | Question text displayed above choices |
| list (string) | Answer choices that user can select |
| int | iterable int | Either an integer or iterable of integers. Each integer in answers corresponds to the index of the correct choice in |
Short Answer
Generates a short answer question that allows user to input an answer in a textbox and a submit button to check the answer.
Example
import nbinteract as nbi
short_answer = nbi.short_answer(
'What is 1+1?',
answers='2',
explanation='1+1 is 2'
)
short_answer
Synopsis
nbinteract.short_answer(
question,
answers,
explanation
)
Options
Name | Value | Description |
---|---|---|
| empty string | The question being asked |
| int | iterable int | Either an integer or iterable of integers. Each integer in answers corresponds to the index of the correct choice in |
| list (string) | The explanation to the question is displayed if the user inputs the correct answer. Default: |