dih-jupyter/2. Jupyter - interaktywne wykresy i prezentacje multimedialne.ipynb

Przygotowanie innowacyjnych materiałów szkoleniowych i dokumentacji wewnętrznych w obszarze IT

2. Tworzenie materiałów szkoleniowych w Jupyter Notebook - wzory, prezentacje, wykresy

2.1. Umieszczanie wzorów matematycznych

W notatnikach Jupytera można umieszczać wzory matematyczne, korzystając z notacji LaTeX-a.

Wszystko pomiędzy znakami $$ wyświetli się jako wzór matematyczny:

$$ a^2 = b^2 + c^2 $$

$$ a^2 = b^2 + c^2 $$

Wyrażenia matematyczne można wstawiać też wewnątrz tekstu - dokładnie tak, jak w LaTeX-u:

To jest tekst, w którym występują zmienne $x$, $y$ i $z$, przy czym $z = \frac{x}{y}$.

To jest tekst, w którym występują zmienne $x$, $y$ i $z$, przy czym $z = \frac{x}{y}$.

2.2. Wyświetlanie materiałów Jupyter Notebook w formie prezentacji multimedialnej

Materiały przygotowane w formacie .ipynb można wyświetlać w formie prezentacji multimedialnej.

Jest to możliwe dzięki narzędziu RISE.

RISE (_Reveal.js Ipython Slideshow Extension) jest rozszerzeniem do Jupytera umożliwiającym wyświetlanie notatników w trybie prezentacji w oparciu o framework Reveal.js.

_Uwaga: Rozszerzenie RISE działa tylko z klasycznym środowiskiem Jupyter Notebook. Nie zadziała, jeżeli notatnik otworzymy korzystajac z JupyterLab.

Instalacja rozszerzenia RISE

Rozszerzenie RISE można zainstalować na dwa sposoby:

• korzystając z menedżera pakietów Conda
• korzystając z menedżera pakietów PIP

Aby zainstalować rozszerzenie RISE za pomocą menedżera Conda, należy wpisać w konsoli:

conda install -c conda-forge rise

Aby zainstalować rozszerzenie RISE za pomocą menedżera PIP, należy wpisać w konsoli:

pip install RISE

Wyświetlanie prezentacji

Po zainstalowaniu rozszerzenia RISE i uruchomieniu środowiska Jupyter Notebook (nie JupyterLab! - patrz uwaga powyżej) na pasku narzędzi pojawi się nowy przycisk _Enter/Exit RISE Slideshow:

Naciśnięcie go uruchamia tryb prezentacji.

Prezentację można również uruchomić za pomocą skrótu klawiszowego Alt+R.

Poruszanie się po prezentacji

Do następnego slajdu przechodzimy za pomocą spacji, a cofamy się naciskając Shift+spację.

W trybie prezentacji po lewej stronie ekranu widać dwa przyciski: X zamyka prezentację, a po kliknięciu w ? pokazuje się okienko pomocy z przydatnymi skrótami klawiszowymi.

Przygotowanie prezentacji

Aby prezentacja poprawnie się wyświetlała, komórki notatnika powinny być odpowiednio oznaczone. Bez tego, cały notatnik wyświetli się na pojedynczym slajdzie, a jego zawartość będzie ucięta.

W tym celu musimy wyświetlić pasek narzędzi prezentacji.

Narzędzia prezentacji

Aby wyświetlić narzędzia prezentacji, należy z menu wybrać _View→Cell Toolbar→Slideshow.

Wówczas przy każdej komórce pokaże się pole wyboru _Slide Type (typ slajdu).

W polu _Slide Type możemy wybrać, czy i w jaki sposób dana komórka pojawi się w prezentacji.

Typy slajdów

• Slide - komórka pojawi się jako oddzielny slajd, rozpoczynający nową sekcję
• Sub-Slide - komórka pojawi się jako oddzielny slajd
• Fragment - komórka pojawi się jako kontynuacja poprzedniego slajdu (po animacji pauzy)
• Skip - komórka nie pojawi się w prezentacji
• Notes - komórka nie pojawi się w prezentacji, ale pojawi się w widoku prezentera (zobacz poniżej)

Jeżeli komórka nie ma wybranego typu, to wyświetli się ona w prezentacji tak, jakby miała przypisany typ _Fragment.

Jest to domyślne zachowanie dla każdej nowo utworzonej komórki.

Widok prezentera

Naciśnięcie klawisza T w widoku prezentacji uruchamia tzw. widok prezentera (_speaker view), dzięki któremu w oddzielnym oknie można podejrzeć:

• bieżący slajd
• następny slajd
• notatki (komórki oznaczone jako _Notes)

To jest komórka z notatkami, które nie wyświetlą się w prezentacji, ale pokażą się w widoku prezentera.

To jest komórka, która nie pojawi się w prezentacji w ogóle.

Dostosowywanie wyglądu prezentacji

Rozszerzenie RISE pozwala na dostosowanie niektórych elementów wyglądu prezentacji, takich jak czcionki, kolory czy efekty przejścia.

W tym celu należy z menu wybrać _Edit→Edit Notebook Metadata i zmodyfikować plik JSON, który się wyświetli.

Po odświeżeniu notatnika dokonane zmiany zostaną zastosowane.

Przykład: zmiana motywu prezentacji

Aby zmienić motyw prezentacji z domyślnego np. na taki z jasnoniebieskim tłem, należy w JSON-ie z metadanymi dopisać

 "rise": {"theme": "sky"}

Listę dostępnych motywów można znaleźć na stronie narzędzia Reveal.js: https://revealjs.com/themes

Więcej o personalizacji prezentacji, a także o samym rozszerzeniu RISE można przeczytać w dokumentacji projektu.

2.3. Tworzenie interaktywnych wykresów

Wykresy w notatnikach Jupyter Notebook można tworzyć, korzystając z odpowiednich narzędzi języka Python, np. z biblioteki matplotlib.

Opis sposobu korzystania z biblioteki matplotlib wykracza poza ramy tego kursu.

Informacje na ten temat można znaleźć w dokumentacji biblioteki.

Umieszczanie wykresów matplotlib w komórkach notatnika

Aby wykresy stworzone przy użyciu biblioteki matplotlib wyświetlały się bezpośrednio w komórkach notatnika, należy na jego początku dodać i wykonać kod:

%matplotlib inline
%config InlineBackend.figure_format = 'svg'

Przykład prostego wykresu

import matplotlib
import matplotlib.pyplot as plt
import numpy as np

def plot_sine(amplitude=1, frequency=1):
    # Dane do wykresu
    x = np.arange(0.0, 10.0, 0.01)
    y = amplitude * np.sin(frequency * x)

    fig, ax = plt.subplots()
    ax.plot(x, y)

    ax.set_ylim([-5, 5])
    ax.set(xlabel=r"$x$", ylabel=r"$y$",
           title="Sinusoida")
    ax.grid()

plot_sine()  # Wykres z domyślnymi wartościami parametrów

plot_sine(amplitude=2, frequency=3)  # Wykres z określonymi parametrami

Interaktywne wykresy

Wykresy w Jupyterze mogą posiadać elementy interaktywności, np. wartości parametrów regulowane suwakiem.

W tym celu należy skorzystać z widżetów z biblioteki ipywidgets.

import ipywidgets

# Stworzenie widźetów
slider_amplitude = ipywidgets.FloatSlider(
    min=0.0, max=5.0, step=0.1, value=1.0, description="amplituda", width=300)
slider_frequency = ipywidgets.FloatSlider(
    min=0.5, max=10.0, step=0.1, value=1.0, description="częstotliwość", width=300)

# Funkcja obsługi widżetów
def slider_handler(amplitude, frequency):
    plot_sine(amplitude, frequency)

Wykres może zmieniać się od razu po przesunięciu suwaka:

ipywidgets.interact(
    slider_handler, amplitude=slider_amplitude, frequency=slider_frequency)

interactive(children=(FloatSlider(value=1.0, description='amplituda', max=5.0), FloatSlider(value=1.0, descrip…

<function __main__.slider_handler(amplitude, frequency)>

...albo dopiero po zatwierdzeniu zmiany przyciskiem:

ipywidgets.interact_manual(
    slider_handler, amplitude=slider_amplitude, frequency=slider_frequency)

interactive(children=(FloatSlider(value=1.0, description='amplituda', max=5.0), FloatSlider(value=1.0, descrip…

<function __main__.slider_handler(amplitude, frequency)>