Plotly Example#

Thebe can display output from


Be sure to load require.js before any of your thebe activation code so that the Jupyter widgets can function:

<script src=""></script>

Configure thebe and load it:

<script type="text/x-thebe-config">
    requestKernel: true,
    binderOptions: {
      repo: "plotly/",
      ref: "doc-prod",
      binderUrl: "",
      repoProvider: "github",
<script src=""></script>

Create a button to activate thebe:

<button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
var bootstrapThebe = function() {
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)

Now add code cells between these HTML tags:

<pre data-executable="true" data-language="python"></pre>


Press the “Activate” button below to connect to a Jupyter server:

Here is a distribution plot example from (MIT License):

import as px
df =
fig = px.histogram(df, x="total_bill", y="tip", color="sex", marginal="rug",