widgets.html

---
layout: default
title: Widgets
permalink: /widgets
---

<link href="css/gallery.css" rel="stylesheet">
<link href="css/syntax.css" rel="stylesheet">
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"
        integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA="
        crossorigin="anonymous">
</script>
<script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>
<section>
  <div class="header header-grey">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Interactive Widgets</h2>
                <p>Jupyter widgets enable interactive data visualization in the Jupyter notebooks.</p>
            </div>
        </div>
    </div>
  </div>
</section>

<section>
  <div class="section-white top-section-border">
    <div class="container">
      <img class="section-icon img-responsive" src="assets/widget.svg" alt="icon to represent multiple notebooks">
        <h3 class="col-sm-12 section-header">Notebook Widgets</h3>
      <p class="support-paragraph">Notebooks come alive when interactive widgets are used. Users can visualize and control changes in the data. Learning becomes an immersive, plus fun, experience. Researchers can easily see how changing inputs to a model impacts the results.</p>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="tabbable tabs-left">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#ipyleaflet" data-toggle="tab">
          <p>ipyleaflet</p>
          <p>Geo-spatial analytics</p>
          </a>
        </li>
        <li>
          <a href="#bqplot" data-toggle="tab">
            <p>bqplot</p>
            <p>2-D interactive data visualization</p>
          </a>
        </li>
        <li>
          <a href="#pythreejs" data-toggle="tab">
            <p>pythreejs</p>
            <p>3-D data visualization</p>
          </a>
        </li>
        <li>
          <a href="#ipyvolume" data-toggle="tab">
            <p>ipyvolume</p>
            <p>3-D plotting</p>
          </a>
        </li>
        <li>
          <a href="#nglview" data-toggle="tab">
            <p>nglview</p>
            <p>3-D interactive molecular visualization</p>
          </a>
        </li>
        <li>
          <a href="#k3d" data-toggle="tab" onclick="adjustK3D()">
            <p>K3D-Jupyter</p>
            <p>3-D data visualization</p>
          </a>
        </li>
        <li>
          <a href="#beakerx" data-toggle="tab" onclick="adjustBeakerXTable()">
            <p>BeakerX</p>
            <p>tables, plotting, forms</p>
          </a>
        </li>
        <li>
          <a href="#jupyter-gmaps" data-toggle="tab">
            <p>jupyter-gmaps</p>
            <p>Data visualization on Google Maps</p>
          </a>
        </li>
        <li>
          <a href="#cookiecutter" data-toggle="tab">
            <p>cookiecutter</p>
            <p>Template widget project</p>
          </a>
        </li>
        <li>
          <a href="#perspective" data-toggle="tab">
            <p>perspective</p>
            <p>Real-time Dataset Visualization</p>
          </a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="ipyleaflet">
          <div class="jupyter-widget-header">
            <span class="gallery-title">ipyleaflet</span>
              <span>
                <a href="https://mybinder.org/v2/gh/jupyter-widgets/ipyleaflet/stable?filepath=examples">
                <img class="img-scaling" src="assets/mybinder.svg" alt="Binder">
                </a>
                <a href="https://github.com/ellisonbg/ipyleaflet">
                <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                </a>
              </span>
          </div>
          <p>
          A library for creating simple interactive maps with panning and
          zooming, ipyleaflet supports annotations such as polygons,
          markers, and more generally any geojson-encoded geographical
          data structure.
          </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/ipyleaflet-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/ipyleaflet-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "5e5cc11723794d639e8d7a3f0951fdea"
          }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c conda-forge ipyleaflet{% endhighlight %}
          With pip:
          {% highlight bash %}pip install ipyleaflet
jupyter nbextension enable --py --sys-prefix ipyleaflet{% endhighlight %}
          If you are using JupyterLab, you will need to install the JupyterLab extension:
          {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-leaflet{% endhighlight %}
        </div>
        <div class="tab-pane" id="nglview">
          <div class="jupyter-widget-header">
            <span class="gallery-title">nglview</span>
          </div>
          <p>
          A Jupyter widget to interactively view molecular structures and trajectories.
          </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/nglview-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/nglview-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "8a1512fb32fe47ee904e1ed8aa498e10"
          }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c bioconda nglview{% endhighlight %}
          With pip:
          {% highlight bash %}pip install nglview
jupyter nbextension enable --py --sys-prefix nglview{% endhighlight %}
        </div>
        <div class="tab-pane" id="k3d">
            <div class="jupyter-widget-header">
                <span class="gallery-title">K3D-Jupyter</span>
                <span>
                <a href="https://github.com/K3D-tools/K3D-jupyter">
                <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                </a>
            </span>
            </div>
          <p>
            <a href="https://github.com/K3D-tools/K3D-jupyter">K3D</a> lets you create 3D plots backed by WebGL with
              high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer,
              colormaps, etc). The primary aim of K3D-jupyter is to be easy for use as stand alone package like
              matplotlib, but also to allow interoperation with existing libraries as VTK. The power of ipywidgets
              makes it also a fast and performant visualisation tool for HPC computing e.g. fluid dynamics.
          </p>
            <p>
                Showcase gallery: <a href="https://k3d-jupyter.readthedocs.io/en/latest/showcase/index.html">https://k3d-jupyter.readthedocs.io/en/latest/showcase/index.html</a>.
            </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/k3d-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/k3d-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "d3a24bac28644484b2aad2bdf34f31bf"
          }
          </script>
          <script type="application/javascript">
              function adjustK3D() {
                  setTimeout(function() {
                      window.dispatchEvent && window.dispatchEvent(new Event('resize'));
                  });
              }
          </script>
          <h3>Installation</h3>
          With pip:
          {% highlight bash %}pip install k3d
jupyter nbextension enable --py --sys-prefix k3d{% endhighlight %}
          If you are using JupyterLab, you will need to install the JupyterLab extension:
          {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager k3d{% endhighlight %}
        </div>
        <div class="tab-pane" id="bqplot">
          <div class="jupyter-widget-header">
            <span class="gallery-title">bqplot</span>
            <span>
                <a href="https://mybinder.org/v2/gh/bloomberg/bqplot/stable?filepath=examples">
                <img class="img-scaling" src="assets/mybinder.svg" alt="Binder">
                </a>
                <a href="https://github.com/bloomberg/bqplot">
                <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                </a>
            </span>
          </div>
          <p>
          A 2-D interactive data visualization library implementing the
          constructs of the grammar of graphics, bqplot provides a simple
          API for creating custom user interactions.
          </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/bqplot-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/bqplot-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "10e4ea0790e94bcba5d41df5f3ce007c"
          }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c conda-forge bqplot{% endhighlight %}
          With pip:
          {% highlight bash %}pip install bqplot
jupyter nbextension enable --py --sys-prefix bqplot{% endhighlight %}
          If you are using JupyterLab, you will need to install the JupyterLab extension:
          {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager bqplot{% endhighlight %}
        </div>
        <div class="tab-pane" id="pythreejs">
          <div class="jupyter-widget-header">
            <span class="gallery-title">pythreejs</span>
            <span>
              <!--
              <a href="https://mybinder.org/repo/jupyter-widgets/pythreejs/examples">
              <img class="img-scaling" src="assets/mybinder.svg" alt="Binder">
              </a>
              -->
              <a href="https://github.com/jupyter-widgets/pythreejs">
              <img class="img-scaling" src="assets/github.svg" alt="GitHub">
              </a>
            </span>
          </div>
          <p>
          A 3-D visualization library enabling GPU-accelerated computer
          graphics in Jupyter.
          </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/pythreejs-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/pythreejs-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "d6a0b86fa7434395ac0aca0659f35274"
          }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c conda-forge pythreejs{% endhighlight %}
          With pip:
          {% highlight bash %}pip install pythreejs
jupyter nbextension enable --py --sys-prefix pythreejs{% endhighlight %}
          If you are using JupyterLab, you will need to install the JupyterLab extension:
          {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-threejs{% endhighlight %}
        </div>
        <div class="tab-pane" id="ipyvolume">
          <div class="jupyter-widget-header">
            <span class="gallery-title">ipyvolume</span>
            <span>
              <a href="https://mybinder.org/v2/gh/maartenbreddels/ipyvolume/master?filepath=notebooks/simple.ipynb">
              <img class="img-scaling" src="assets/mybinder.svg" alt="Binder">
              </a>
                <a href="https://github.com/maartenbreddels/ipyvolume">
                <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                </a>
            </span>
          </div>
          <p>
          3-D plotting for Python in the Jupyter notebook based on IPython widgets using WebGL.
          </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/ipyvolume-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/ipyvolume-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "3a74fe1c2fc14b30a012b5754cd55af7"
          }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c conda-forge ipyvolume{% endhighlight %}
          With pip:
          {% highlight bash %}pip install ipyvolume
jupyter nbextension enable --py --sys-prefix ipyvolume{% endhighlight %}
          If you are using JupyterLab, you will need to install the JupyterLab extension:
          {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-threejs ipyvolume{% endhighlight %}
        </div>
        <div class="tab-pane" id="beakerx">
          <div class="jupyter-widget-header">
            <span class="gallery-title">BeakerX</span>
            <span>
                <a href="https://github.com/twosigma/beakerx">
                <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                </a>
            </span>
          </div>
          <p>
          <a href="https://BeakerX.com">BeakerX</a> includes widgets
          for interactive tables, plots, forms, Apache Spark, and more.
          The table widget automatically recognizes pandas dataframes
          and allows you to search, sort, drag, filter, format,
          select, graph, hide, pin, and export to CSV or
          clipboard. This makes connecting to spreadsheets quick and
          easy.
          </p>
            <p>
            The table widget, shown below, is so fast because it's implemented with the PhosphorJS Data Grid,
            part of Jupyter Lab's architecture.
            </p>
          <h3>Example</h3>
          {% highlight python %}{% include_relative assets/beakerx-example.py %}{% endhighlight %}
          <script type="application/vnd.jupyter.widget-state+json">
              {% include_relative assets/beakerx-example.json %}
          </script>
          <script type="application/vnd.jupyter.widget-view+json">
          {
              "model_id": "d6371237-9b40-427e-9833-71cb25330855"
          }
          </script>
          <script type="application/javascript">
              function adjustBeakerXTable() {
                  setTimeout(function() {
                      window.dispatchEvent && window.dispatchEvent(new Event('resize'));
                  });
              }
          </script>
          <h3>Installation</h3>
          With conda:
          {% highlight bash %}conda install -c conda-forge beakerx ipywidgets{% endhighlight %}
          With pip:
          {% highlight bash %}pip install beakerx
beakerx-install{% endhighlight %}
        </div>
        <div class="tab-pane" id="jupyter-gmaps">
            <div class="jupyter-widget-header">
                <span class="gallery-title">jupyter-gmaps</span>
                <span>
                    <a href="https://github.com/pbugnion/gmaps">
                        <img class="img-scaling" src="assets/github.svg" alt="GitHub">
                    </a>
                </span>
            </div>
            <p>
                <a href="https://jupyter-gmaps.readthedocs.io">Gmaps</a> lets you
                embed interactive Google maps in Jupyter notebooks. Visualize
                your data with heatmaps, GeoJSON, symbols and markers, or plot
                directions, traffic, or cycle routes. Let users draw on the map
                and capture the coordinates of the markers or polygons they are
                placing to build interactive applications entirely in Python.
            </p>
            <h3>Example</h3>
            {% highlight python %}{% include_relative assets/jupyter-gmaps-example.py %}{% endhighlight %}
            <script type="application/vnd.jupyter.widget-state+json">
             {% include_relative assets/jupyter-gmaps-example.json %}
            </script>
            <script type="application/vnd.jupyter.widget-view+json">
             {
                 "model_id": "c3031eeeee3348ddb94c2f472822f829"
             }
            </script>
            <h3>Installation</h3>
            With conda:
            {% highlight bash %}conda install -c conda-forge gmaps{% endhighlight %}
            With pip:
            {% highlight bash %}pip install gmaps
jupyter nbextension enable --py --sys-prefix gmaps{% endhighlight %}
            If you are using JupyterLab, you will need to install the JupyterLab extension:
            {% highlight bash %}jupyter labextension install @jupyter-widgets/jupyterlab-manager{% endhighlight %}
        </div>

        <div class="tab-pane" id="cookiecutter">
          <div class="jupyter-widget-header">
            <span class="gallery-title">widget cookiecutters</span>
            <span>
              <a href="https://github.com/jupyter-widgets/widget-cookiecutter">
              <img class="img-scaling" src="assets/github.svg" alt="GitHub">
              </a>
              <a href="https://github.com/jupyter-widgets/widget-ts-cookiecutter">
              <img class="img-scaling" src="assets/github.svg" alt="GitHub">
              </a>
            </span>
          </div>
          <p>
          The Jupyter widget framework is extensible and enables developers to create custom
          widget libraries and bindings for visualization libraries of the JavaScript and TypeScript ecosystem.
          </p>
          <p>
          The <code>cookiecutter</code> projects help widget authors get up to speed with the
          packaging and distribution of Jupyter interactive widgets, in
          <a href="https://github.com/jupyter-widgets/widget-cookiecutter">JavaScript</a> and
          <a href="https://github.com/jupyter-widgets/widget-ts-cookiecutter">TypeScript</a>.
          </p>
          <p>
          They produce a base project for a Jupyter interactive widget library following the current best practices.
          An implementation for a placeholder "Hello World" widget is provided. Following these practices will
          help make your custom widgets work in static web pages (like the examples of this page) and be compatible
          with future versions of Jupyter.
          </p>
        </div>
        <div class="tab-pane" id="perspective">
          <div class="jupyter-widget-header">
            <span class="gallery-title">perspective</span>
            <span>
              <a href="https://github.com/finos/perspective">
              <img class="img-scaling" src="assets/perspective.gif" alt="GitHub">
              </a>
            </span>
          </div>
          <p>
          Perspective is an interactive visualization component for large, real-time datasets. Originally developed for J.P. Morgan's trading business, Perspective makes it simple to build real-time & user configurable analytics entirely in the browser, or in concert with Python and/or Jupyterlab.
          </p>
          <p>
          <code>Perspective</code> can be used to create reports, dashboards, notebooks and applications, with static data or streaming updates via Apache Arrow.</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>