index


This is an nbpresent presentation!


In [5]:
from IPython.display import *

Font Awesome icons are a great way to get quick visual content onto your slides, and support many modifiers, which can be combined with Bootstrap 3 effects to create really nice effects with just a bit of markup. The minimum requires a span-level tag, historically <i> with a class of at least fa fa-<some icon>.

markdown
<i class="fa fa-gift"> </i>

Note the space inside the <i>: omitting this will cause strange rendering issues when exporting to HTML, as mistune (used by nbconvert is configured to be stricter than marked, used by the Notebook.

The best way to be sure about an image is to use a kernel-level output mechanism to embed the image directly in the page.


In [6]:
SVG("https://www.continuum.io/sites/all/themes/continuum_foundation/images/logos/logo-anaconda.svg")


Out[6]:

SVGs are malleable with simple code. To removing padding and complement a dark theme, do a few short replacements.


In [7]:
import requests
display(SVG(requests.get("http://jupyter.org/assets/main-logo.svg").content.decode("utf-8")
    .replace("""translate(248.000000, 26.000000)""", "")
    .replace("#767474", "#ffffff")
    .replace("#313940", "#ffffff")))


Artboard Created with Sketch.

Motivation

  • The Talk is important
    • The Work is more important
  • PowerPoint is bad
  • The Notebook is great
  • RISE is good
    • reveal.js not so good in the Notebook

IFrames are a quick-and-dirty way to get external content into your page: you just need to knwo the URL: no complex JS!


In [8]:
IFrame("http://origins.sese.asu.edu/ses405/Reference%20Documents/DAU_Wallchart.pdf",
       width="1380", height="900")


Out[8]:

In [9]:
IFrame("https://losc.ligo.org/s/events/GW150914/GW150914_tutorial.html",
       width="1380", height="900")


Out[9]:

In [10]:
IFrame(
    "https://nbviewer.jupyter.org/format/slides/github/lmarti/evolutionary-computation-course/blob/master/AEC.06%20-%20Evolutionary%20Multi-Objective%20Optimization.ipynb#/1",
    width="1380", height="900")


Out[10]:

In [11]:
IFrame("http://homepages.wmich.edu/~mcgrew/Siderius.pdf", width="1380", height="900")


Out[11]:

Features

  • Reuse your delightful data narratives from the Jupyter Notebook as slide-based presentations
  • Use rich visual tools to build the metadata for your layout
  • Choose a base theme for your presentation, or a theme per slide
  • Export your presentations as archival HTML and PDF

Examples

Community


In [12]:
IFrame("https://gitter.im/Anaconda-Platform/nbpresent/~embed", 400, 700)


Out[12]:

Sometimes, you just need some HTML... but if someone has already done the legwork, it's worth it!


In [13]:
%%html
<div class="github-card" data-github="anaconda-platform/nbpresent" data-width="300" data-theme="medium"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>


Some issues with embedding

Lessons Learned/Future Work

  • d3, it's been great
  • Baobab is really good
  • Testing this kind of stuff is hard
  • Still need
    • reveal.js Subslides/Hyperslides
    • Need better reuse than IFRAMES
    • (color, scroll, slide, etc.)-as-data
  • Fonts: embedded, in QtWebKit, etc.