Accommodating large slides in jupyter presentation

user_2923519 0
Viewed 1492

I have a jupyter notebook which I am converting to a slideshow using:

jupyter nbconvert notebook.ipynb --to slides --post serve --SlidesExporter.reveal_scroll=True

Some of the slides contain a code segment with a figure as output. At the moment the figure runs off the bottom of the screen. Since this is the main purpose of the slide is there a way to either enable scrolling (I thought --SlidesExporter.reveal_scroll=True should do this, but it doesn't work in my case - no scroll bar appears). Or is there a way to split the input and output across two slides or to hide the input code and just show the output figure.

An example of the code cell which is too long is below:

import numpy as np
import matplotlib.pyplot as plt
t=np.linspace(0,1,1000)
Sr=np.exp(1j*t*(15)*2*np.pi)* np.exp(-5 *t)
#Trial wavefunctions
#Frequency (Hz)
f=[5,10,15,20]

y=np.cos(f[0]*2*np.pi*t)

#Multiply the signal with our trial cosine function

S_cos = np.real(Sr)*y

#Integrate the signal (using Simpson's rule for numerical integration)
from scipy.integrate import simps
area=np.empty([4,])
area[0] = simps(S_cos,dx=1)
print('Area under product function = %.1f' %area[0])

#Plot the real part of the signal
plt.figure(figsize=(14,6))
plt.subplot(1,2,1)
plt.plot(t,np.real(Sr),label='Signal')
plt.plot(t,y,label='Trial cosine')
plt.xlabel('Time (s)')
plt.ylabel('Intensity')
plt.legend()

plt.subplot(1,2,2)
plt.plot(t,S_cos, 'g', label='Product (signal*trial cosine)')
plt.xlabel('Time (s)')
plt.ylabel('Intensity')
plt.legend()
plt.show()
jupyter-notebook
1 Answers

One of nbconvert's contributors made a template that can hide input code from slides.

Save the code below as output_toggle.tpl and place it in the folder with your .ipynb file. When you're ready, just run: jupyter nbconvert notebook.ipynb --to slides --post serve --template output_toggle 

{# Jupyter Notebook Toggle Template for Slides by Damian Avila 
   from http://www.damian.oquanta.info/posts/hide-the-input-cells-from-your-ipython-slides.html
#}

{%- extends 'slides_reveal.tpl' -%}

{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}

{%- block header -%}
{{ super() }}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
.input_hidden {
  display: none;
//  margin-top: 5px;
}
</style>

<script>
$(document).ready(function(){
  $(".output_wrapper").click(function(){
      $(this).prev('.input_hidden').slideToggle();
  });
})
</script>
{%- endblock header -%}

If you need to display the code while presenting, you can click the output to reveal the input cells.

user_103395310
Related