widgets.html

---
layout: default
title: Widgets
navbar_gray: true
---

<link href="css/gallery.css" rel="stylesheet">
<link href="css/syntax.css" rel="stylesheet">
<script src="https://unpkg.com/jupyter-js-widgets@1.1.2/dist/embed.js"></script>

<section>
  <div class="header">
    <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 impact 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>Interactive 2-D 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="#cookiecutter" data-toggle="tab">
            <p>cookiecutter</p>
            <p>Template widget project</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="http://mybinder.org/repo/ellisonbg/ipyleaflet/notebooks/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-embedded-widgets">
              {% include_relative assets/ipyleaflet-example.json %}
          </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 %}
        </div>
        <div class="tab-pane" id="bqplot">
          <div class="jupyter-widget-header">
            <span class="gallery-title">bqplot</span>
            <span>
                <a href="http://mybinder.org/repo/bloomberg/bqplot/notebooks/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 interative 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-embedded-widgets">
              {% include_relative assets/bqplot-example.json %}
          </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 %}
        </div>
        <div class="tab-pane" id="pythreejs">
          <div class="jupyter-widget-header">
            <span class="gallery-title">pythreejs</span>
            <span>
              <a href="http://mybinder.org/repo/jovyan/pythreejs/notebooks/examples">
              <img class="img-scaling" src="assets/mybinder.svg" alt="Binder">
              </a>
              <a href="https://github.com/jovyan/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-embedded-widgets">
              {% include_relative assets/pythreejs-example.json %}
          </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 %}
        </div>
        <div class="tab-pane" id="cookiecutter">
          <div class="jupyter-widget-header">
            <span class="gallery-title">widget cookiecutter</span>
            <span>
              <a href="https://github.com/jupyter/widget-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 ecosystem.
          </p>
          <p>
          The <code>cookiecutter</code> project helps widget authors get up to speed with the
          packaging and distribution of Jupyter interactive widgets.
          </p>
          <p>
          It produces 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>
  </div>
</section>