--- title: J1 NBI tagline: common used widgets date: 2022-03-28 00:00:00 description: > The package 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 tricky concepts. keywords: > opensource, free, load, download, start, starter, example, high, easy, use, secure, encrypt, standard, popular, generate, create, learn, distribute, publish, deploy, beginner, advanced, expert, student, learner, educator, writer, reader, visitor, framework, toolkit, integration, extension, module, api, dynamic, static, generator, client, server, internet, local, localhost, page, web, website, webdesign, material, design, responsive, javascript, nodejs, ruby, windows, linux, osx, mac, os, http, https, html, html5, css, scss, style, browser, firefox, chrome, edge, opera, safari, configuration, generator, navigation, menu, dropdown, fab, action, button, application, interface, provider, api, repository, cookie, language, translation, gdpr, dsgvo, privacy, asciidoc, aciidoctor, bootstrap, jekyll, liquid, hyvor, disqus, git, github, netlify, heroku, apple, microsoft, provider, service, internet, support, google, analytics, advertising, search, console, silverlight, score, j1, nbi, j1-nbinteract, nbinteract, template, integration, python, jupyter, notebook, textbook, api, app, binder, binderhub, jupyterhub categories: [ Software, Python ] tags: [ Binder, Jupyter, Notebooks, Distributed ] scrollbar: false fab_menu_id: open_toc_reload personalization: true permalink: /pages/public/jupyter/examples/distributed/common-used-widgets/ regenerate: false resources: [ animate, nbinteract, rouge ] resource_options: - attic: slides: - url: /assets/images/modules/attics/1920x1280/john-schnobrich-2.jpg alt: Photo by John Schnobrich on Unsplash badge: type: unsplash author: John Schnobrich href: https://unsplash.com/@johnschno --- // Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid: // Set (local) page attributes here // ----------------------------------------------------------------------------- // :page--attr: :binder-badges-enabled: true :binder-app-launch--lab: https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main :binder-app-launch--tree: https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree :binder-app-launch--notebook: https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_interactive_widgets.ipynb // Load Liquid procedures // ----------------------------------------------------------------------------- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%} // Load page attributes // ----------------------------------------------------------------------------- {% include {{load_attributes}} scope="global" %} // Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Include sub-documents (if any) // ----------------------------------------------------------------------------- // image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}] // image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}] ifeval::[{binder-badges-enabled} == true] image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}] image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}] endif::[] CAUTION: Each interactive element presented on this page uses *time-consuming* operations that take a while to finish. The elements are built through a backend in the cloud. Please be patient to see the results. *Widgets* are eventful python objects that have a representation in the browser, often as a control like as sliders, textboxes, dowpdowns etc. Widgets may used to build *interactive* GUIs for your notebooks, and to synchronize stateful and stateless information between the (IPython-)Kernel and JavaScript. Many libraries are available for Jupyter (IPython) to choose from. One of the most commonly used libraries for widgets is *IPyWidgets* and the visualizations (plots) of *Matplotlib*, *BQplot* or *GGplot*. In addition to the popular widgets, the NBI module offers additional GUI elements via the integrated interact-core library, which are useable in a very simple way. Find with that page a commonly used set of widgets for interactive textbooks. Some more options are available for interactivity, but this selection shows the most used. Interactive widgets are provided natively by Jupyter Notebooks using the library `ipywidgets`. Find common examples in the textbooks below. == Widgets from ipywidgets The library *ipywidgets*, also known as *jupyter-widgets*, are interactive HTML widgets for Jupyter notebooks and the IPython kernel. Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data. textbook::j1_interactive_widgets[] == Widgets from nbinteract The library *nbinteract* comes with a set of 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 to interactive plotting. CAUTION: 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 nbinteract plotting methods use **ipywidgets** to generate and display widgets, inferring the widget type 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 alone to render static images. === Histogram The widget `nbinteract.hist` generates a histogram that allows interaction with the parameters for the response function. The widget takes in a single response function. The response function returns the array of numerical values that will be shown in the histogram. The hist function allows interaction with the response function's parameters by specifying them as keyword arguments in the same format as ipywidgets.interact. Any argument that can be used for `ipywidgets.interact` can be used for hist. textbook::j1_nbi_widgets_hist_chart[] === Bar chart The widget `nbinteract.bar` generates an bar plot that allows interaction with the parameters for the response functions. The first two arguments of bar are response functions that return the x and y-axis data arrays, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to bar in the format expected by interact. The response function for the y-axis data will be called with the x-axis data as its first argument. For example, in the bar plot below categories generates the categories to plot on the x-axis and heights generates the y-axis heights. The heights function uses the parameter xs which is the array of x-axis data points. textbook::j1_nbi_widgets_bar_chart[] === Interactive Scatter chart The widget `nbinteract.scatter_drag` generates a scatter plot that allows interaction through clicking and dragging the points on the graph. `scatter_drag` takes in two lists/arrays consisting of the x-coordinates and y-coordinates of the points to plot. It generates an interactive scatter plot where the points can be dragged by the user and a best fit line is updated automatically according to the placement of the points. WARNING: The widget `scatter_drag` does *not* allow response functions as inputs. textbook::j1_nbi_widgets_scatter_drag_chart[] === Scatter chart The widget `nbinteract.scatter` generates a scatter plot that allows interaction with the parameters to the response functions. This is different from `scatter_drag` which facilitates interaction using click and drag actions. The first two arguments of scatter are response functions that return the x and y-axis coordinates, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to scatter in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument. textbook::j1_nbi_widgets_scatter_chart[] === Line chart The `nbinteract.line` widget generates a line plot that allows interaction with the parameters to the response functions. The first two arguments of line are response functions that return the x and y-axis coordinates, respectively. 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. textbook::j1_nbi_widgets_line_chart[] === Interactive questions To enable educators to create and share interactive web pages for learning, beside widgets for plotting interactive widgets for asking questions are available as well. ==== Multiple choice The widget `nbinteract.multiple_choice` takes a question, a list of possible answer choices, and the correct answer. Clicking the buttons shows whether the choice was correct. textbook::j1_nbi_widgets_question_multiple_choice[] ==== Short answer The widget `nbinteract.short_answer` takes a question and an answer. The answer can either be a string, a list of strings, or a function that returns `True` when called with the user's input. If the function errors, an error message will be displayed. textbook::j1_nbi_widgets_question_short_answer[]