7

The following code plots an interactive figure where I can toggle specific lines on/off. This works perfectly when I'm working in an Ipython Notebook

import pandas as pd
import numpy as np
from itertools import cycle
import matplotlib.pyplot as plt, mpld3
from matplotlib.widgets import CheckButtons
import matplotlib.patches
import seaborn as sns
%matplotlib nbagg
sns.set(style="whitegrid")
df = pd.DataFrame({'freq': {0: 0.01, 1: 0.02, 2: 0.029999999999999999, 3: 0.040000000000000001, 4: 0.050000000000000003, 5: 0.059999999999999998, 6: 0.070000000000000007, 7: 0.080000000000000002, 8: 0.089999999999999997, 9: 0.10000000000000001, 10: 0.01, 11: 0.02, 12: 0.029999999999999999, 13: 0.040000000000000001, 14: 0.050000000000000003, 15: 0.059999999999999998, 16: 0.070000000000000007, 17: 0.080000000000000002, 18: 0.089999999999999997, 19: 0.10000000000000001, 20: 0.01, 21: 0.02, 22: 0.029999999999999999, 23: 0.040000000000000001, 24: 0.050000000000000003, 25: 0.059999999999999998, 26: 0.070000000000000007, 27: 0.080000000000000002, 28: 0.089999999999999997, 29: 0.10000000000000001}, 'kit': {0: 'B', 1: 'B', 2: 'B', 3: 'B', 4: 'B', 5: 'B', 6: 'B', 7: 'B', 8: 'B', 9: 'B', 10: 'A', 11: 'A', 12: 'A', 13: 'A', 14: 'A', 15: 'A', 16: 'A', 17: 'A', 18: 'A', 19: 'A', 20: 'C', 21: 'C', 22: 'C', 23: 'C', 24: 'C', 25: 'C', 26: 'C', 27: 'C', 28: 'C', 29: 'C'}, 'SNS': {0: 91.198979591799997, 1: 90.263605442199989, 2: 88.818027210899999, 3: 85.671768707499993, 4: 76.23299319729999, 5: 61.0969387755, 6: 45.1530612245, 7: 36.267006802700003, 8: 33.0782312925, 9: 30.739795918400002, 10: 90.646258503400006, 11: 90.306122449, 12: 90.178571428600009, 13: 89.498299319699996, 14: 88.435374149599994, 15: 83.588435374200003, 16: 75.212585034, 17: 60.969387755100001, 18: 47.278911564600001, 19: 37.627551020399999, 20: 90.986394557800011, 21: 90.136054421799997, 22: 89.540816326499993, 23: 88.690476190499993, 24: 86.479591836799997, 25: 82.397959183699996, 26: 73.809523809499993, 27: 63.180272108800004, 28: 50.935374149700003, 29: 41.241496598699996}, 'FPR': {0: 1.0953616823100001, 1: 0.24489252678500001, 2: 0.15106142277199999, 3: 0.104478605177, 4: 0.089172822253300005, 5: 0.079856258734300009, 6: 0.065881413455800009, 7: 0.059892194050699996, 8: 0.059892194050699996, 9: 0.0578957875824, 10: 0.94097291541899997, 11: 0.208291741532, 12: 0.14773407865800001, 13: 0.107805949291, 14: 0.093165635189999998, 15: 0.082518134025399995, 16: 0.074532508152000007, 17: 0.065881413455800009, 18: 0.062554069341799995, 19: 0.061888600519100001, 20: 0.85313103081100006, 21: 0.18899314567100001, 22: 0.14107939043000001, 23: 0.110467824582, 24: 0.099820323417899995, 25: 0.085180009316599997, 26: 0.078525321088700001, 27: 0.073201570506399985, 28: 0.071870632860800004, 29: 0.0705396952153}})

tableau20 = ["#6C6C6C", "#92D050", "#FFC000"]
tableau20 = cycle(tableau20)

kits = ["A","B", "C"]
color = iter(["#6C6C6C", "#92D050", "#FFC000"])
fig = plt.figure(figsize=(12,8))
for kit in kits:
    colour = next(color)
    for i in df.groupby('kit'):
        grouped_df = pd.DataFrame(np.array(i[1]), columns = 
                      ['freq', 'SNS', 'FPR', 'kit'])
        if grouped_df.kit.tolist()[1] == kit:
            x = [float(value) for i, value in enumerate(grouped_df.FPR)]
            y = [float(value) for i, value in enumerate(grouped_df.SNS)]
            x, y = (list(x) for x in zip(*sorted(zip(x, y))))
            label = grouped_df['kit'].tolist()[1]
            p = plt.plot(x, y, "-o",label = label, color = colour)

labels = [label.get_text() for label in plt.legend().texts]
plt.legend().set_visible(False)
for i, value in enumerate(labels):
    exec('label%s="%s"'%(i, value))

for i in range(len(labels)):
    exec('l%s=fig.axes[0].lines[i]'%(i))

rax = plt.axes([0.92, 0.7, 0.2, 0.2], frameon=False)
check = CheckButtons(rax, (labels), ('True ' * len(labels)))
for i, rec in enumerate(check.rectangles):
     rec.set_facecolor(tableau20.next())

def func(label):
    for i in range(len(labels)):
        if label == eval('label%s'%(i)): eval('l%s.set_visible(not l%s.get_visible())'%(i,i))

    plt.draw()
check.on_clicked(func)

plt.show()

Problem is, I need to export the notebook as a html to share with colleagues who know nothing about python. How can I export the notebook to html and get it to maintain the interactive (toggle) functionality (which it currently loses)? Thanks!

Thomas K
  • 39,200
  • 7
  • 84
  • 86
Michael Berry
  • 923
  • 3
  • 13
  • 17
  • 1
    For the toggle functionality, it has to be talking to a running Python process - the HTML export is a static view of the document, without a connection to a kernel. You could look at the experimental [jupyter-dashboards](https://github.com/jupyter-incubator/dashboards) project. Or you might be able to find a way to plot with the interactivity in Javascript so it works without needing a kernel. – Thomas K Mar 22 '16 at 10:02
  • Depending on how comfortable you are with javascript you can follow [this](https://jakevdp.github.io/blog/2013/12/05/static-interactive-widgets/) blog on how to make static interactive widgets using ipywidgets. This will require some modifications to your code but should be doable. – nluigi Mar 22 '16 at 12:02
  • Thanks. `StaticInteract` doesn't seem to exist in ipywidgets anymore. Any idea what the replacement is? – Michael Berry Mar 22 '16 at 13:17

1 Answers1

1

Maybe you don't need to export jupyter notebook to html, but share the notebook link to the other people and they can visit the url using their browser.

A jupyter notebook plugin would help you do this more efficiently: jupyter/dashboards, it's maintained by official jupyter team, and it helps you share your notebook like a report, and you can control which cell to display and the location of each cell displayed. Worth a try!

kingbase
  • 1,268
  • 14
  • 23