ENH: Javascript mimetype and integrations (#46)

* ENH: Pass through javascript mimetype

* DOC: Integrations

docs/Makefile

@@ -47,12 +47,24 @@ help:
 	@echo "  doctest    to run all doctests embedded in the documentation (if enabled)"
 	@echo "  coverage   to run coverage check of the documentation (if enabled)"
 
-.PHONY: clean
+.PHONY: clean, examples
 clean:
 	rm -rf $(BUILDDIR)/*
 
+
+examples: ex_bokeh.html ex_altair.html ex_holoviews.html
+
+ex_bokeh.html:
+	stitch ex_bokeh.txt -o ex_bokeh.html --no-self-contained
+
+ex_altair.html:
+	stitch ex_altair.txt -o ex_altair.html --no-self-contained
+
+ex_holoviews.html:
+	stitch ex_holoviews.txt -o ex_holoviews.html --no-self-contained -H header.js
+
 .PHONY: html
-html:
+html: examples
 	$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
 	@echo
 	@echo "Build finished. The HTML pages are in $(BUILDDIR)/html."

docs/ex_altair.txt

@@ -0,0 +1,28 @@
+# Altair
+
+[Altair](https://github.com/ellisonbg/altair) is a declarative statistical visualization library for python.
+
+This document can be compiled to html with
+
+    ```
+    stitch ex_altair.txt -o ex_altair.html --no-self-contained
+    ```
+
+```{python}
+from altair import Chart, load_dataset
+from IPython import display
+
+# load data as a pandas DataFrame
+cars = load_dataset('cars')
+
+c = Chart(cars).mark_point().encode(
+    x='Horsepower',
+    y='Miles_per_Gallon',
+    color='Origin'
+)
+c
+```
+
+```{python}
+display.HTML(c.to_html())
+```

docs/ex_bokeh.txt

@@ -0,0 +1,47 @@
+# Bokeh Integration
+
+> [Bokeh](http://bokeh.pydata.org/en/latest/) is a Python interactive visualization library that targets modern web browsers for presentation.
+
+This document can be compiled to HTML with
+
+    ```
+    stitch ex_bokeh.txt -o ex_bokeh.html --no-self-contained
+    ```
+
+The easiest way to use stitch & Bokeh together is with the ``Bokeh.output_notebook``
+method.
+
+```{python}
+from bokeh.plotting import figure, show, output_notebook
+
+# prepare some data
+x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]
+y0 = [i**2 for i in x]
+y1 = [10**i for i in x]
+y2 = [10**(i**2) for i in x]
+
+output_notebook()
+```
+
+```{python}
+# create a new plot
+p = figure(
+   tools="pan,box_zoom,reset,save",
+   y_axis_type="log", y_range=[0.001, 10**11], title="log axis example",
+   x_axis_label='sections', y_axis_label='particles'
+)
+
+# add some renderers
+p.line(x, x, legend="y=x")
+p.circle(x, x, legend="y=x", fill_color="white", size=8)
+p.line(x, y0, legend="y=x^2", line_width=3)
+p.line(x, y1, legend="y=10^x", line_color="red")
+p.circle(x, y1, legend="y=10^x", fill_color="red", line_color="red", size=6)
+p.line(x, y2, legend="y=10^x^2", line_color="orange", line_dash="4 4")
+
+# show the results
+show(p)
+```
+
+See also Bokeh's tools for [embedding](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html)
+the HTML and javascript necessary to get a figure to show up in HTML output.

docs/ex_holoviews.txt

@@ -0,0 +1,51 @@
+# Holoviews
+
+
+[HoloViews](http://holoviews.org) is a Python library that makes analyzing and visualizing scientific or engineering data much simpler, more intuitive, and more easily reproducible.
+
+This document can be compiled to HTML with
+
+    ```
+    stitch ex_holoviews.txt -o ex_holoviews.html --no-self-contained -H header.js
+    ```
+
+You'll need a file ``header.js`` with the required javascript libraries.
+
+    ```
+    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
+    ```
+
+```{python}
+import numpy as np
+import holoviews as hv
+from IPython import display
+hv.notebook_extension()
+```
+
+```{python}
+def sine(x, phase=0, freq=100):
+    return np.sin((freq * x + phase))
+
+phases = np.linspace(0,2*np.pi,11) # Explored phases
+freqs = np.linspace(50,150,5)      # Explored frequencies
+
+dist = np.linspace(-0.5,0.5,202)   # Linear spatial sampling
+x,y = np.meshgrid(dist, dist)
+grid = (x**2+y**2)                 # 2D spatial sampling
+```
+
+```{python}
+freq1 = hv.Image(sine(grid, freq=50))  + hv.Curve(zip(dist, sine(dist**2, freq=50)))
+freq2 = hv.Image(sine(grid, freq=200)) + hv.Curve(zip(dist, sine(dist**2, freq=200)))
+(freq1 + freq2).cols(2)
+```
+
+```{python}
+dimensions = ['Phase', 'Frequency']
+keys = [(p,f) for p in phases for f in freqs]
+
+items = [(k, hv.Image(sine(grid, *k), vdims=['Amplitude'])) for k in keys]
+circular_wave = hv.HoloMap(items, kdims=dimensions)
+circular_wave
+```

docs/header.js

@@ -0,0 +1,3 @@
+  <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
+

docs/index.rst

@@ -125,6 +125,7 @@ Contents:
    :maxdepth: 2
 
    self
+   integration
    api
    whatsnew
 

docs/integration.rst

@@ -0,0 +1,14 @@
+Integration With Other Libraries
+--------------------------------
+
+``stitch`` doesn't make many assumptions, so it works
+pretty well with other libraries. For the most part, if it works in the
+notebook then it will work in ``stitch``.
+
+Note that source files all use the ``.txt`` extension so they open in
+your browser. Typically you'd use ``.md`` or ``.markdown``.
+
+* Bokeh: :download:`source <ex_bokeh.txt>`, :download:`HTML <ex_bokeh.html>`
+* Altair: :download:`source <ex_altair.txt>`, :download:`HTML <ex_altair.html>`
+* Holoviews: :download:`source <ex_holoviews.txt>`, :download:`HTML <ex_holoviews.html>`
+

stitch/stitch.py

@@ -309,8 +309,10 @@ def wrap_output(self, chunk_name, messages, execution_count, kp, attrs):
                 text = message['content']['text']
                 output_blocks.append(plain_output(text))
 
+        priority = list(enumerate(NbConvertBase().display_data_priority))
+        priority.append((len(priority), 'application/javascript'))
         order = dict(
-            (x[1], x[0]) for x in enumerate(NbConvertBase().display_data_priority)
+            (x[1], x[0]) for x in priority
         )
 
         for message in display_messages:
@@ -337,6 +339,9 @@ def wrap_output(self, chunk_name, messages, execution_count, kp, attrs):
                     block = RawBlock('latex', data)
                 elif key == 'text/html':
                     block = RawBlock('html', data)
+                elif key == 'application/javascript':
+                    script = '<script type=text/javascript>{}</script>'.format(data)
+                    block = RawBlock('html', script)
                 elif key.startswith('image') or key == 'application/pdf':
                     block = self.wrap_image_output(chunk_name, data, key, attrs)
                 else: