<commit_before><!DOCTYPE HTML>
<html lang="en">
<head>
	<title>On Demand Analytic and Learning Environments with Jupyter</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="stylesheet" href="assets/shower-ribbon/styles/screen.css">
</head>
<body class="list">
	<style>
		#Picture h2 {
			color:#FFF;
			}

		#Cover h2 {
			margin:30px 0 0;
			text-align:center;
			font-size:90px;
			color: #fff;
		}
		#Cover p {
			margin:10px 0 0;
			text-align:center;
			font-style:italic;
			font-size:30px;
			color: #ddd;
		}
	  .slide-img {
	  	display: block;
	  	margin-left: auto;
	  	margin-right: auto;
	  }

		#Author h2 {
			margin:30px 0 0;
			color:#FFF;
			text-align:center;
			font-size:70px;
		}
		#Author p {
			margin:10px 0 0;
			text-align:center;
			color:#FFF;
			font-style:italic;
			font-size:20px;
		}
		#Author p a {
			color:#FFF;
		}
	  #questions {
			color: white;
		}
		#questions img {
			filter: blur(.5) grayscale(1) invert(1);
			-webkit-filter: blur(.5) grayscale(1) invert(1);
		}
	</style>

	<header class="caption">
		<h1>On Demand Analytic and Learning Environments with Jupyter</h1>
        <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
        <p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
	</header>
	<section class="slide cover" id="Cover"><div>
		<h2>On Demand Analytic and Learning Environments with Jupyter</h2>
        <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
        <p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
	</div></section>

<!--

  <section class="slide"><div>
  </div></section>

-->


  <!--

    Computers - great with data
    Humans - great with narratives

    Step 1: Bring together the narrative with the code they write

    Step 2: Bring together their environment


    (the place)

    data, code, narrative, environment

    computational environment


    Collaboration: Context of git (*ahem* github), Google Docs style

    Past: Colaboratory
    Future: Jupyter Drive


    Bridging the gap of the expert and the non-expert

  -->


  <section class="slide shout"><div>
      <h2>Good Morning!</h2>
  </div></section>

  <section class="slide shout"><div>
      <h2>Etherpad: <a href="http://j.mp/jupyterdemo">j.mp/jupyterdemo</a></h2>
  </div></section>

  <!--

    TODO: Bring in Rackspacey bits
  -->

  <!-- Transition...? -->

  <section class="slide shout"><div>
      <h2>Consume, produce, process data</h2>
  </div></section>

      <!-- Speaker notes:
        Computers are good at consuming, producing, and processing data. Humans process the world through narratives. In order for data, and the computations that process and visualize that data, to be useful for humans, they must be embedded into a narrative - a computational narrative - that tells a story for a particular audience and context.
      -->

  <section class="slide cover"><div>
		<img src="pictures/14729561746_dc823b7d2a_b.jpg" class="slide-img" alt="storytime">
	</div></section>

  <section class="slide shout"><div>
      <h2>Computational narratives 😄</h2>
  </div></section>

  <section class="slide"><div>
      <h2>Computational Narrative Contexts</h2>
      <ul>
        <li>Exploratory data analysis</li>
        <li>Developing software</li>
        <li>API exploration</li>
        <li>Technical papers</li>
        <li>Reports for leadership</li>
      </ul>
      <!-- Speaker notes:
        A computational narrative needs to adapt to a variety of contexts and audiences.
        * A published paper
      -->
  </div></section>

  <section class="slide" id="Reproducibility"><div>
      <h2>Reproducibility</h2>
      <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3383002/"><img src="pictures/repro.png" alt="Reproducibility spectrum" style="width:100%; vertical-align:center; display:block; margin: auto;"></a>
  </div></section>

  <section class="slide"><div>
      <h2>Reproducibility</h2>
      <ul>
        <li>Code, prose (narrative, wrapped in a document)<ul>
          <li>IPython/Jupyter notebooks, RMarkdown</li>
          <li>Version control (e.g. git!)</li>
        </ul></li>
        <li>Data</li>
        <li>Execution Environments<ul>
            <li>VMs</li>
            <li>Containers (e.g. Docker)</li>
            <li>Virtualenv and conda environments</li>
          </ul>
        </li>
      </ul>
  </div></section>

  <!-- Notebook image -->

  <!-- Docker segway -->

  <!--
    Segway?


    Forking execution environments.


    Docker as a tool for reproducible environments

  <section class="slide"><div>
  </div></section>

  -->


  <section class="slide"><div>
		<img src="pictures/jupyter-logo.png" alt="Jupyter">
		<ol>
      <li>Common tooling amongst languages (beyond 🐍)
			<li>Open formats and protocols</li>
      <li>Active community</li>
		</ol>
		<p class="note">Jupyter [ˈdʒuːpɨtər] noun. interactive reproducible computing environments.</p>
	</div></section>


  <!-- Talk about some of the team and where it is based -->

	<section class="slide"><div>
		<h2>Jupyter Environments</h2>
		<ul>
			<li>Single: Console, Notebook</li>
			<li>Multi: JupyterHub, binder, tmpnb</li>
		  <li>Future: Realtime, alternative frontends</li>
		</ul>
	</div></section>

  <!-- A bit on the notebook -->

	<section class="slide"><div>
		<h2>JupyterHub - Technical Overview</h2>
		<h3><a href="https://github.com/jupyter/jupyterhub">github.com/jupyter/jupyterhub</a></h3>
		<ul>
			<li>Multi-user Hub (Python/Tornado)</li>
			<li>Configurable HTTP Proxy (nodejs)</li>
			<li>Spawns notebooks as their own (processes | containers | systems)</li>
		</ul>
	</div></section>

	<section class="slide shout"><div>
		<h2><a href="https://demohub.jupyter.org">Demo Hub</a>
    <a href="http://j.mp/jupyterdemo">j.mp/jupyterdemo</a></h2>
	</div></section>

	<section class="slide"><div>
		<h2>JupyterHub Deployments</h2>
		<ul>
			<li>Computational Models (first big deployment!)</li>
			<li>Cal Poly</li>
			<li>Berkeley (campus wide!)</li>
			<li>UCSD</li>
			<li><img src="https://www.quantopian.com/assets/logo-old-2x.png" height=32 style="vertical-align: middle" alt="quantopian logo" /> Quantopian</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Authentication</h2>
		<p>Defaults to PAM/*nix users...
		<span class="next">While allowing custom authenticators!</span></p>
		<ul class="next">
			<li><a href="https://github.com/jupyter/oauthenticator">GitHub OAuth</a></li>
			<li><a href="https://github.com/yuvipanda/mwoauthenticator">MediaWiki</a></li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Spawning</h2>
		<p>Defaults to local notebook processes...
		<span class="next">While allowing custom spawners!</span></p>
		<ul class="next">
			<li><a href="https://github.com/jupyter/dockerspawner">DockerSpawner</a></li>
			<li><a href="https://github.com/compmodels/jupyterhub-deploy/blob/master/roles/jupyterhub_host/files/swarmspawner.py">SwarmSpawner</a></li>
			<li><a href="https://github.com/zonca/remotespawner">Remote SSH Spawner</a></li>
		</ul>
	</div></section>

  <section class="slide"></div>
    <img src="pictures/binder-logo.svg" alt="MyBinder" width="600px">
    <div>
      <br />
      <h1><em>Turn a GitHub repo into a collection of interactive notebooks.</em></h1>
      <ul>
        <li>Live public notebooks for your projects</li>
        <li><a href="http://mybinder.org">MyBinder</a> is built by <NAME> and <NAME></li>
        <li>Relies on the configurable http proxy as well!</li>
      </ul>
    </div>
  </div></section>

	<section class="slide"><div>
		<h2>Temporary Notebook System - tmpnb</h2>
		<h3><a href="https://github.com/jupyter/tmpnb">github.com/jupyter/tmpnb</a></h3>
		<p>Originally built for <a href="http://www.nature.com/news/ipython-interactive-demo-7.21492?article=1.16261">a demo</a> as part of a <a href="http://www.nature.com/news/interactive-notebooks-sharing-the-code-1.16261">Nature article on IPython</a></p>
	</div></section>

	<section class="slide"><div>
		<h2>tmpnb deployments</h2>
		<ul>
			<li><a href="http://www.nature.com/news/ipython-interactive-demo-7.21492?article=1.16261">Nature Demo</a></li>
			<li><a href="https://try.jupyter.org">try.jupyter.org</a></li>
			<li><a href="http://koldunov.net/?p=950">Yet Another Conference 2014</a></li>
      <li><a href="http://notebooks.codeneuro.org/">CodeNeuro</a></li>
			<li class="next"><a href="https://www.oreilly.com/learning">O'Reilly Media</a></li>
		</ul>
	</div></section>

	<section class="slide cover" id="Author"><div>
		<h2>Authoring Workflows with Jupyter</h2>
    <!-- <p>Write, Code, Publish</p> -->
		<img src="pictures/cover.jpg" alt="">
		<!--
			To apply styles to certain slides
			set slide ID to get needed elements
			-->
	</div></section>



	<section class="slide"><div>
		<h2>Not These People</h2>
		<img src="pictures/not-this-guy.png" class="slide-img" style="width: 60%" alt="Typity type type">

	</div></section>

	<section class="slide"><div>
		<h2>These People</h2>
		<img src="pictures/about-orm.png" class="slide-img" style="width: 80%" alt="Typity type type">
	</div></section>

	<section class="slide"><div>
		<h2>This Person</h2>
		<img src="pictures/oreilly-beta.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Founder of <a href="https://atlas.oreilly.com">Atlas</a>, O'Reilly Media's next generation authoring tool</li>
			<li>Author of <a href="http://sites.oreilly.com/odewahn/dds-field-guide/">DDS Field Guide</a> and <a href="http://odewahn.github.io/docker-jumpstart/">Docker Jumpstart</a></li>
			<li>Executive sponsor for <a href="https://beta.oreilly.com">beta.oreilly.com</a></li>
			<li>Currently exploring how to produce "next generation content"</li>
		</ul>

	</div></section>

	<section class="slide"><div>
		<h2>Atlas: O'Reilly's Publishing Toolchain</h2>
		<img src="pictures/atlas-key-ideas.png" class="slide-img" style="width: 80%" alt="Typity type type">
	</div></section>

	<section class="slide"><div>
		<h2>Authoring with O'Reilly</h2>
		<img src="pictures/tim-tweet.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Many options: <a href="http://oreillymedia.github.io/HTMLBook/">HTML</a>, <a href="http://www.methods.co.nz/asciidoc/">AsciiDoc</a>, Markdown, DocBook
			<li>About 80% of our tech books are written in one of these formats.</li>
			<li><NAME> announced <a href="https://beta.oreilly.com/ideas/jupyter-at-oreilly">full support for Jupyter on May 8.</a></li>
		</ul>
	</div></section>


	<section class="slide"><div>
		<h2>The Process</h2>
		<img src="pictures/atlas-configure.gif" style="float:right; width: 50%" alt="Typity type type">
		<ul>
		  <li>You write in the Notebooks, like always.</li>
		  <li>You check the Notebooks into <a href="atlas.oreilly.com">Atlas</a> to collaborate with your editor, reviewers, and the O’Reilly production department.</li>
		  <li>You build a beautiful book.</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Getting Beyond Books</h2>
		<img src="pictures/new-learning-tools.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Books are great, but they lack the features that makes the Notebook such an amazing experience:
			    <em>interactivity</em>, <em>immediacy</em>, <em>video</em>, etc.</li>
			<li>This is what <i>learners</i> (not just <i>readers</i>) expect</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>New Content Platform: Jupyter + Docker + tmpnb</h2>
		<ul>
			<li><a href="http://jupyter.org/">Jupyter</a>. Other than git and GitHub, we've never had authors demand a tool more than Jupyter.</li>
			<li><a href="https://www.docker.com/">Docker</a>.  Containerizing the notebooks gave us a simple way to package up and deploy the content and all its dependencies.</li>
			<li><a href="https://github.com/jupyter/tmpnb">tmpnb</a>. A lightweight system for creating ephemeral sandboxes.
		 </ul>
	</div></section>

	<section class="slide"><div>
		<h2>Version 0.1: Just Enough Math</h2>
		<img src="pictures/jem-strata.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Hosted Notebooks on Docker+tmpnb for a Strata tutorial.</li>
			<li>Great concept, but performance was an issue.  (Static assets, etc)</li>
			<li>Catastrophic failure mode. (No content at all!)</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Thebe: Jupyter Cells As a Service</h2>
		<ul>
			<li>Jupyter code cells that can be embedded in static web pages.</li>
			<li><a href="https://github.com/oreillymedia/thebe">Thebe</a>.  MIT-licensed plugin <a href="https://twitter.com/zischwartz">@zischwartz</a> based on <a href="https://github.com/minrk/singlecell">minrk/singlecell</a></li>
			<li>Supports widgets, plots, and the wide range of Jupyter display protocols.</li>
			<li>Separates serving of static assets from the notebook.</li>
			<li>Much more graceful failure mode.</li>
		</ul>
	</div></section>


  <!---

    Can run any number of language kernels. Just a matter of having that installed.

  -->

	<section class="slide"><div>
	  <h2>Turns Static Code</h2>
	  <pre><code>
	     &lt;pre <mark class="important">data-executable='true'</mark>&gt;
	        x = np.linspace(0, n, 1000)
	        plt.plot(x, np.sin(x), x, np.cos(x))
	        sns.set()
	        plt.plot(x, np.sin(x), x, np.cos(x))
         &lt;/pre&gt;
	</code></pre>
	</div></section>

	<section class="slide shout"><div>
		<h2><a href="thebe.html" target="_blank">Thebe Demo</a></h2>
	</div></section>

	<section class="slide"><div>
		<h2>https://www.oreilly.com/topics/data</h2>
		<img src="pictures/thebe.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
		  <li><a href="https://beta.oreilly.com/learning/data-visualization-with-seaborn">Data visualization with Seaborn</a></li>
		  <li><a href="https://beta.oreilly.com/learning/intro-to-svm">Introduction to Support Vector Machines</a></li>
		  <li><a href="https://beta.oreilly.com/learning/simple-line-plots-with-matplotlib">Simple Line Plots with Matplotlib</a></li>
		  <li><a href="https://beta.oreilly.com/learning/three-dimensional-plotting-in-matplotlib">Three-dimensional Plotting in Matplotlib</a></li>
		  <li><a href="https://beta.oreilly.com/learning/an-illustrated-introduction-to-the-t-sne-algorithm">An illustrated introduction to the t-SNE algorithm</a></li>
		</ul>
	</div></section>

	<section class="slide cover" id="Picture"><div>
		<h2>Future</h2>
		<img src="pictures/picture.jpg" alt="Typewriter">

	</div></section>

	<section class="slide shout"><div>
      <h3>Thebe Mashup</h3>
      <h3><a href="http://lambdaops.com/share-cell/">Share cell</a></h3>
      <h3><a href="http://lambdaops.com/gistexec/">Gist exec</a></h3>
	</div></section>

	<section class="slide"><div>
      <h3><a href="https://github.com/willwhitney/hydrogen">Hydrogen</a></h3>
      <img src="https://camo.githubusercontent.com/df535b1882e71808e9f1cd19c66a3674628cc805/687474703a2f2f692e696d6775722e636f6d2f524650443163392e676966" alt="Hydrogen Atom Package" />
	</div></section>

  <section class="slide"><div>
    <h3><a href="http://blog.ibmjstart.net/2015/08/22/dynamic-dashboards-from-jupyter-notebooks/">Dynamic Dashboards</a></h3>
    <ul>
      <li>Created by IBM Emerging Technologies</li>
      <li>One of the first incubation projects for Jupyter</li>
      <li>Also relies on Thebe</li>
    </ul>
    <img src="pictures/dashboard.jpg" alt="Dynamic Dashboards for Jupyter" />
  </div></section>

	<section class="slide cover" id="questions"><div>
		<h2>Questions?</h2>
    <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
		<p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
    <ul>
      <li><a href="http://jupyter.org">jupyter.org</a></li>
      <li><a href="https://developer.rackspace.com">developer.rackspace.com</a></li>
      <li><a href="https://beta.oreilly.com">beta.oreilly.com</a></li>
    </ul>
	</div></section>

	<p class="badge"><a href="https://github.com/rgbkrk/jupyter-environments-talk">Fork me on Github</a></p>
	<!--
		To hide progress bar from entire presentation
		just remove “progress” element.
		-->
	<div class="progress"><div></div></div>

	<script src="assets/shower-core/shower.min.js"></script>
	<!-- Copyright © 2015 <NAME>, <NAME> -->
	<!-- Photos by <NAME>, fiftyfootshadows.net -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<commit_msg>Link out to How Jupyter Output Works<commit_after><!DOCTYPE HTML>
<html lang="en">
<head>
	<title>On Demand Analytic and Learning Environments with Jupyter</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="stylesheet" href="assets/shower-ribbon/styles/screen.css">
</head>
<body class="list">
	<style>
		#Picture h2 {
			color:#FFF;
			}

		#Cover h2 {
			margin:30px 0 0;
			text-align:center;
			font-size:90px;
			color: #fff;
		}
		#Cover p {
			margin:10px 0 0;
			text-align:center;
			font-style:italic;
			font-size:30px;
			color: #ddd;
		}
	  .slide-img {
	  	display: block;
	  	margin-left: auto;
	  	margin-right: auto;
	  }

		#Author h2 {
			margin:30px 0 0;
			color:#FFF;
			text-align:center;
			font-size:70px;
		}
		#Author p {
			margin:10px 0 0;
			text-align:center;
			color:#FFF;
			font-style:italic;
			font-size:20px;
		}
		#Author p a {
			color:#FFF;
		}
	  #questions {
			color: white;
		}
		#questions img {
			filter: blur(.5) grayscale(1) invert(1);
			-webkit-filter: blur(.5) grayscale(1) invert(1);
		}
	</style>

	<header class="caption">
		<h1>On Demand Analytic and Learning Environments with Jupyter</h1>
        <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
        <p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
	</header>
	<section class="slide cover" id="Cover"><div>
		<h2>On Demand Analytic and Learning Environments with Jupyter</h2>
        <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
        <p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
	</div></section>

<!--

  <section class="slide"><div>
  </div></section>

-->


  <!--

    Computers - great with data
    Humans - great with narratives

    Step 1: Bring together the narrative with the code they write

    Step 2: Bring together their environment


    (the place)

    data, code, narrative, environment

    computational environment


    Collaboration: Context of git (*ahem* github), Google Docs style

    Past: Colaboratory
    Future: Jupyter Drive


    Bridging the gap of the expert and the non-expert

  -->


  <section class="slide shout"><div>
      <h2>Good Morning!</h2>
  </div></section>

  <section class="slide shout"><div>
      <h2>Etherpad: <a href="http://j.mp/jupyterdemo">j.mp/jupyterdemo</a></h2>
  </div></section>

  <!--

    TODO: Bring in Rackspacey bits
  -->

  <!-- Transition...? -->

  <section class="slide shout"><div>
      <h2>Consume, produce, process data</h2>
  </div></section>

      <!-- Speaker notes:
        Computers are good at consuming, producing, and processing data. Humans process the world through narratives. In order for data, and the computations that process and visualize that data, to be useful for humans, they must be embedded into a narrative - a computational narrative - that tells a story for a particular audience and context.
      -->

  <section class="slide cover"><div>
		<img src="pictures/14729561746_dc823b7d2a_b.jpg" class="slide-img" alt="storytime">
	</div></section>

  <section class="slide shout"><div>
      <h2>Computational narratives 😄</h2>
  </div></section>

  <section class="slide"><div>
      <h2>Computational Narrative Contexts</h2>
      <ul>
        <li>Exploratory data analysis</li>
        <li>Developing software</li>
        <li>API exploration</li>
        <li>Technical papers</li>
        <li>Reports for leadership</li>
      </ul>
      <!-- Speaker notes:
        A computational narrative needs to adapt to a variety of contexts and audiences.
        * A published paper
      -->
  </div></section>

  <section class="slide" id="Reproducibility"><div>
      <h2>Reproducibility</h2>
      <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3383002/"><img src="pictures/repro.png" alt="Reproducibility spectrum" style="width:100%; vertical-align:center; display:block; margin: auto;"></a>
  </div></section>

  <section class="slide"><div>
      <h2>Reproducibility</h2>
      <ul>
        <li>Code, prose (narrative, wrapped in a document)<ul>
          <li>IPython/Jupyter notebooks, RMarkdown</li>
          <li>Version control (e.g. git!)</li>
        </ul></li>
        <li>Data</li>
        <li>Execution Environments<ul>
            <li>VMs</li>
            <li>Containers (e.g. Docker)</li>
            <li>Virtualenv and conda environments</li>
          </ul>
        </li>
      </ul>
  </div></section>

  <!-- Notebook image -->

  <!-- Docker segway -->

  <!--
    Segway?


    Forking execution environments.


    Docker as a tool for reproducible environments

  <section class="slide"><div>
  </div></section>

  -->


  <section class="slide"><div>
		<img src="pictures/jupyter-logo.png" alt="Jupyter">
		<ol>
      <li>Common tooling amongst languages (beyond 🐍)
			<li>Open formats and protocols</li>
      <li>Active community</li>
		</ol>
		<p class="note">Jupyter [ˈdʒuːpɨtər] noun. interactive reproducible computing environments.</p>
	</div></section>

  <section class="slide"><div>
    <h3><a href="http://slides.com/kylekelley/sidecar#/6">How Jupyter Output Works</a></h3>
  </div></section>


  <!-- Talk about some of the team and where it is based -->

	<section class="slide"><div>
		<h2>Jupyter Environments</h2>
		<ul>
			<li>Single: Console, Notebook</li>
			<li>Multi: JupyterHub, binder, tmpnb</li>
		  <li>Future: Realtime, alternative frontends</li>
		</ul>
	</div></section>

  <!-- A bit on the notebook -->

	<section class="slide"><div>
		<h2>JupyterHub - Technical Overview</h2>
		<h3><a href="https://github.com/jupyter/jupyterhub">github.com/jupyter/jupyterhub</a></h3>
		<ul>
			<li>Multi-user Hub (Python/Tornado)</li>
			<li>Configurable HTTP Proxy (nodejs)</li>
			<li>Spawns notebooks as their own (processes | containers | systems)</li>
		</ul>
	</div></section>

	<section class="slide shout"><div>
		<h2><a href="https://demohub.jupyter.org">Demo Hub</a>
    <a href="http://j.mp/jupyterdemo">j.mp/jupyterdemo</a></h2>
	</div></section>

	<section class="slide"><div>
		<h2>JupyterHub Deployments</h2>
		<ul>
			<li>Computational Models (first big deployment!)</li>
			<li>Cal Poly</li>
			<li>Berkeley (campus wide!)</li>
			<li>UCSD</li>
			<li><img src="https://www.quantopian.com/assets/logo-old-2x.png" height=32 style="vertical-align: middle" alt="quantopian logo" /> Quantopian</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Authentication</h2>
		<p>Defaults to PAM/*nix users...
		<span class="next">While allowing custom authenticators!</span></p>
		<ul class="next">
			<li><a href="https://github.com/jupyter/oauthenticator">GitHub OAuth</a></li>
			<li><a href="https://github.com/yuvipanda/mwoauthenticator">MediaWiki</a></li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Spawning</h2>
		<p>Defaults to local notebook processes...
		<span class="next">While allowing custom spawners!</span></p>
		<ul class="next">
			<li><a href="https://github.com/jupyter/dockerspawner">DockerSpawner</a></li>
			<li><a href="https://github.com/compmodels/jupyterhub-deploy/blob/master/roles/jupyterhub_host/files/swarmspawner.py">SwarmSpawner</a></li>
			<li><a href="https://github.com/zonca/remotespawner">Remote SSH Spawner</a></li>
		</ul>
	</div></section>

  <section class="slide"></div>
    <img src="pictures/binder-logo.svg" alt="MyBinder" width="600px">
    <div>
      <br />
      <h1><em>Turn a GitHub repo into a collection of interactive notebooks.</em></h1>
      <ul>
        <li>Live public notebooks for your projects</li>
        <li><a href="http://mybinder.org">MyBinder</a> is built by <NAME> and <NAME></li>
        <li>Relies on the configurable http proxy as well!</li>
      </ul>
    </div>
  </div></section>

	<section class="slide"><div>
		<h2>Temporary Notebook System - tmpnb</h2>
		<h3><a href="https://github.com/jupyter/tmpnb">github.com/jupyter/tmpnb</a></h3>
		<p>Originally built for <a href="http://www.nature.com/news/ipython-interactive-demo-7.21492?article=1.16261">a demo</a> as part of a <a href="http://www.nature.com/news/interactive-notebooks-sharing-the-code-1.16261">Nature article on IPython</a></p>
	</div></section>

	<section class="slide"><div>
		<h2>tmpnb deployments</h2>
		<ul>
			<li><a href="http://www.nature.com/news/ipython-interactive-demo-7.21492?article=1.16261">Nature Demo</a></li>
			<li><a href="https://try.jupyter.org">try.jupyter.org</a></li>
			<li><a href="http://koldunov.net/?p=950">Yet Another Conference 2014</a></li>
      <li><a href="http://notebooks.codeneuro.org/">CodeNeuro</a></li>
			<li class="next"><a href="https://www.oreilly.com/learning">O'Reilly Media</a></li>
		</ul>
	</div></section>

	<section class="slide cover" id="Author"><div>
		<h2>Authoring Workflows with Jupyter</h2>
    <!-- <p>Write, Code, Publish</p> -->
		<img src="pictures/cover.jpg" alt="">
		<!--
			To apply styles to certain slides
			set slide ID to get needed elements
			-->
	</div></section>



	<section class="slide"><div>
		<h2>Not These People</h2>
		<img src="pictures/not-this-guy.png" class="slide-img" style="width: 60%" alt="Typity type type">

	</div></section>

	<section class="slide"><div>
		<h2>These People</h2>
		<img src="pictures/about-orm.png" class="slide-img" style="width: 80%" alt="Typity type type">
	</div></section>

	<section class="slide"><div>
		<h2>This Person</h2>
		<img src="pictures/oreilly-beta.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Founder of <a href="https://atlas.oreilly.com">Atlas</a>, O'Reilly Media's next generation authoring tool</li>
			<li>Author of <a href="http://sites.oreilly.com/odewahn/dds-field-guide/">DDS Field Guide</a> and <a href="http://odewahn.github.io/docker-jumpstart/">Docker Jumpstart</a></li>
			<li>Executive sponsor for <a href="https://beta.oreilly.com">beta.oreilly.com</a></li>
			<li>Currently exploring how to produce "next generation content"</li>
		</ul>

	</div></section>

	<section class="slide"><div>
		<h2>Atlas: O'Reilly's Publishing Toolchain</h2>
		<img src="pictures/atlas-key-ideas.png" class="slide-img" style="width: 80%" alt="Typity type type">
	</div></section>

	<section class="slide"><div>
		<h2>Authoring with O'Reilly</h2>
		<img src="pictures/tim-tweet.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Many options: <a href="http://oreillymedia.github.io/HTMLBook/">HTML</a>, <a href="http://www.methods.co.nz/asciidoc/">AsciiDoc</a>, Markdown, DocBook
			<li>About 80% of our tech books are written in one of these formats.</li>
			<li><NAME> announced <a href="https://beta.oreilly.com/ideas/jupyter-at-oreilly">full support for Jupyter on May 8.</a></li>
		</ul>
	</div></section>


	<section class="slide"><div>
		<h2>The Process</h2>
		<img src="pictures/atlas-configure.gif" style="float:right; width: 50%" alt="Typity type type">
		<ul>
		  <li>You write in the Notebooks, like always.</li>
		  <li>You check the Notebooks into <a href="atlas.oreilly.com">Atlas</a> to collaborate with your editor, reviewers, and the O’Reilly production department.</li>
		  <li>You build a beautiful book.</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Getting Beyond Books</h2>
		<img src="pictures/new-learning-tools.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Books are great, but they lack the features that makes the Notebook such an amazing experience:
			    <em>interactivity</em>, <em>immediacy</em>, <em>video</em>, etc.</li>
			<li>This is what <i>learners</i> (not just <i>readers</i>) expect</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>New Content Platform: Jupyter + Docker + tmpnb</h2>
		<ul>
			<li><a href="http://jupyter.org/">Jupyter</a>. Other than git and GitHub, we've never had authors demand a tool more than Jupyter.</li>
			<li><a href="https://www.docker.com/">Docker</a>.  Containerizing the notebooks gave us a simple way to package up and deploy the content and all its dependencies.</li>
			<li><a href="https://github.com/jupyter/tmpnb">tmpnb</a>. A lightweight system for creating ephemeral sandboxes.
		 </ul>
	</div></section>

	<section class="slide"><div>
		<h2>Version 0.1: Just Enough Math</h2>
		<img src="pictures/jem-strata.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
			<li>Hosted Notebooks on Docker+tmpnb for a Strata tutorial.</li>
			<li>Great concept, but performance was an issue.  (Static assets, etc)</li>
			<li>Catastrophic failure mode. (No content at all!)</li>
		</ul>
	</div></section>

	<section class="slide"><div>
		<h2>Thebe: Jupyter Cells As a Service</h2>
		<ul>
			<li>Jupyter code cells that can be embedded in static web pages.</li>
			<li><a href="https://github.com/oreillymedia/thebe">Thebe</a>.  MIT-licensed plugin <a href="https://twitter.com/zischwartz">@zischwartz</a> based on <a href="https://github.com/minrk/singlecell">minrk/singlecell</a></li>
			<li>Supports widgets, plots, and the wide range of Jupyter display protocols.</li>
			<li>Separates serving of static assets from the notebook.</li>
			<li>Much more graceful failure mode.</li>
		</ul>
	</div></section>


  <!---

    Can run any number of language kernels. Just a matter of having that installed.

  -->

	<section class="slide"><div>
	  <h2>Turns Static Code</h2>
	  <pre><code>
	     &lt;pre <mark class="important">data-executable='true'</mark>&gt;
	        x = np.linspace(0, n, 1000)
	        plt.plot(x, np.sin(x), x, np.cos(x))
	        sns.set()
	        plt.plot(x, np.sin(x), x, np.cos(x))
         &lt;/pre&gt;
	</code></pre>
	</div></section>

	<section class="slide shout"><div>
		<h2><a href="thebe.html" target="_blank">Thebe Demo</a></h2>
	</div></section>

	<section class="slide"><div>
		<h2>https://www.oreilly.com/topics/data</h2>
		<img src="pictures/thebe.png" class="slide-img" style="float:right; width: 50%" alt="Typity type type">
		<ul>
		  <li><a href="https://beta.oreilly.com/learning/data-visualization-with-seaborn">Data visualization with Seaborn</a></li>
		  <li><a href="https://beta.oreilly.com/learning/intro-to-svm">Introduction to Support Vector Machines</a></li>
		  <li><a href="https://beta.oreilly.com/learning/simple-line-plots-with-matplotlib">Simple Line Plots with Matplotlib</a></li>
		  <li><a href="https://beta.oreilly.com/learning/three-dimensional-plotting-in-matplotlib">Three-dimensional Plotting in Matplotlib</a></li>
		  <li><a href="https://beta.oreilly.com/learning/an-illustrated-introduction-to-the-t-sne-algorithm">An illustrated introduction to the t-SNE algorithm</a></li>
		</ul>
	</div></section>

	<section class="slide cover" id="Picture"><div>
		<h2>Future</h2>
		<img src="pictures/picture.jpg" alt="Typewriter">

	</div></section>

	<section class="slide shout"><div>
      <h3>Thebe Mashup</h3>
      <h3><a href="http://lambdaops.com/share-cell/">Share cell</a></h3>
      <h3><a href="http://lambdaops.com/gistexec/">Gist exec</a></h3>
	</div></section>

	<section class="slide"><div>
      <h3><a href="https://github.com/willwhitney/hydrogen">Hydrogen</a></h3>
      <img src="https://camo.githubusercontent.com/df535b1882e71808e9f1cd19c66a3674628cc805/687474703a2f2f692e696d6775722e636f6d2f524650443163392e676966" alt="Hydrogen Atom Package" />
	</div></section>

  <section class="slide"><div>
    <h3><a href="http://blog.ibmjstart.net/2015/08/22/dynamic-dashboards-from-jupyter-notebooks/">Dynamic Dashboards</a></h3>
    <ul>
      <li>Created by IBM Emerging Technologies</li>
      <li>One of the first incubation projects for Jupyter</li>
      <li>Also relies on Thebe</li>
    </ul>
    <img src="pictures/dashboard.jpg" alt="Dynamic Dashboards for Jupyter" />
  </div></section>



	<section class="slide cover" id="questions"><div>
		<h2>Questions?</h2>
    <p><NAME>; Developer at Rackspace, Jupyter/IPython; <a href="https://twitter.com/rgbkrk">@rgbkrk</a></p>
		<p><NAME>; CTO O'Reilly Media; <a href="https://twitter.com/odewahn">@odewahn</a></p>
    <ul>
      <li><a href="http://jupyter.org">jupyter.org</a></li>
      <li><a href="https://developer.rackspace.com">developer.rackspace.com</a></li>
      <li><a href="https://beta.oreilly.com">beta.oreilly.com</a></li>
    </ul>
	</div></section>

	<p class="badge"><a href="https://github.com/rgbkrk/jupyter-environments-talk">Fork me on Github</a></p>
	<!--
		To hide progress bar from entire presentation
		just remove “progress” element.
		-->
	<div class="progress"><div></div></div>

	<script src="assets/shower-core/shower.min.js"></script>
	<!-- Copyright © 2015 <NAME>, <NAME> -->
	<!-- Photos by <NAME>, fiftyfootshadows.net -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
{'fraction_non_alphanumeric': 0.18838295388207824, 'fraction_numerical': 0.018242848803269117, 'mean_word_length': 3.775717870086423, 'pattern_counts': {'":': 0, '<': 1321, '<?xml version=': 0, '>': 1321, 'https://': 72, 'lorem ipsum': 0, 'www.': 18, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4640837', 'n_tokens_mistral': 13714, 'n_tokens_neox': 12357, 'n_words': 2601}