In response to http://stackoverflow.com/questions/43793578/using-bokeh-jupyter-notebook-and-pelican-for-interactive-plots
First, generate the standard Bokeh plot:
import numpy as np
import pandas as pd
from IPython.core.display import HTML
import bokeh
print('Bokeh version:', bokeh.__version__)
from bokeh.plotting import figure, show
from bokeh.charts import ColumnDataSource
from bokeh.io import output_notebook
from bokeh.models import HoverTool
from bokeh.resources import CDN
from bokeh.embed import file_html
output_notebook()
df = pd.DataFrame(np.random.normal(0, 5, (100, 2)), columns=['x','y'])
source = ColumnDataSource(df)
hover = HoverTool(tooltips=[("x", "@x"), ("y", "@y")])
myplot = figure(plot_width=600, plot_height=400, tools='hover,box_zoom,box_select,crosshair,resize,reset')
myplot.circle('x', 'y', size=7, fill_alpha=0.5, source=source)
show(myplot, notebook_handle=True);
Now, generate the standalone HTML code using Bokeh's function, see http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html:
myplot_html = file_html(myplot, CDN)
# this HTML code is very long (~30 K), the cell below doesn't show all the code in NBviewer
print(myplot_html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Application</title>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 90%;
height: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="bk-root">
<div class="bk-plotdiv" id="7fba5f3c-9768-4da5-a715-2ce2313b03ea"></div>
</div>
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
var docs_json = {"a9bf11cd-94a3-4d4b-9f0f-822f753a0002":{"roots":{"references":[{"attributes":{"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},"ticker":{"id":"a136a255-67af-488c-b1d1-cc3adc7ca73a","type":"BasicTicker"}},"id":"bd798fba-2aaa-4b56-8b3d-8ddb97627342","type":"Grid"},{"attributes":{"formatter":{"id":"61d87393-cf00-4499-82b4-261e61dfaf91","type":"BasicTickFormatter"},"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},"ticker":{"id":"3afc6846-986b-40a7-a37d-c7d2796a4c4f","type":"BasicTicker"}},"id":"d550d6c5-3667-4c36-a9a2-10fad47f4852","type":"LinearAxis"},{"attributes":{},"id":"3afc6846-986b-40a7-a37d-c7d2796a4c4f","type":"BasicTicker"},{"attributes":{"dimension":1,"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},"ticker":{"id":"3afc6846-986b-40a7-a37d-c7d2796a4c4f","type":"BasicTicker"}},"id":"436bdf09-504e-4201-91e6-c0a4c73cd6d7","type":"Grid"},{"attributes":{"data_source":{"id":"89929e99-904f-4740-b94d-40434d54bb92","type":"ColumnDataSource"},"glyph":{"id":"1016319b-24e6-4eff-94db-78868e227a9c","type":"Circle"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"45d8c71e-14c5-435f-bb11-8c0e732da5e3","type":"Circle"},"selection_glyph":null},"id":"75d5ddb3-8f82-416e-bd9e-d8bd94b6da7c","type":"GlyphRenderer"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"#1f77b4"},"line_color":{"value":"#1f77b4"},"size":{"units":"screen","value":7},"x":{"field":"x"},"y":{"field":"y"}},"id":"1016319b-24e6-4eff-94db-78868e227a9c","type":"Circle"},{"attributes":{"callback":null,"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"}},"id":"fc7a1324-58f5-4ebe-8333-9ca25c63ac4c","type":"HoverTool"},{"attributes":{"below":[{"id":"72f241d5-e7b9-4d7c-a0db-b847d91982a9","type":"LinearAxis"}],"left":[{"id":"d550d6c5-3667-4c36-a9a2-10fad47f4852","type":"LinearAxis"}],"plot_height":400,"renderers":[{"id":"72f241d5-e7b9-4d7c-a0db-b847d91982a9","type":"LinearAxis"},{"id":"bd798fba-2aaa-4b56-8b3d-8ddb97627342","type":"Grid"},{"id":"d550d6c5-3667-4c36-a9a2-10fad47f4852","type":"LinearAxis"},{"id":"436bdf09-504e-4201-91e6-c0a4c73cd6d7","type":"Grid"},{"id":"e0b77d7c-1411-4875-a8d4-8c5bf16b8b22","type":"BoxAnnotation"},{"id":"ec7ec3a6-2b24-441e-be55-f4309b6491f0","type":"BoxAnnotation"},{"id":"75d5ddb3-8f82-416e-bd9e-d8bd94b6da7c","type":"GlyphRenderer"}],"title":{"id":"7835772a-d000-456d-b61e-b8ec099673a8","type":"Title"},"tool_events":{"id":"65501ef1-5699-4613-aa04-3832a3895c52","type":"ToolEvents"},"toolbar":{"id":"f0b57205-5dde-4329-921c-020f0c4856b5","type":"Toolbar"},"x_range":{"id":"9e263aef-dca3-4046-88d8-33340e00ceb1","type":"DataRange1d"},"y_range":{"id":"0998ddb9-81a6-4c89-adf4-3b7352b26284","type":"DataRange1d"}},"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"ec7ec3a6-2b24-441e-be55-f4309b6491f0","type":"BoxAnnotation"},{"attributes":{"active_drag":"auto","active_scroll":"auto","active_tap":"auto","tools":[{"id":"fc7a1324-58f5-4ebe-8333-9ca25c63ac4c","type":"HoverTool"},{"id":"00a4a34a-bd64-42c7-8426-ea4b6505d218","type":"BoxZoomTool"},{"id":"ad7d5fa3-62a1-42da-b319-a238c748dd9e","type":"BoxSelectTool"},{"id":"3ba6e3aa-4e4b-465f-954b-fe08a2fdc0ea","type":"CrosshairTool"},{"id":"fdd02ec3-1a86-4ea2-9db4-9bb27216de73","type":"ResizeTool"},{"id":"3cd4e1ed-08be-4ce6-9a45-06699edb16bf","type":"ResetTool"}]},"id":"f0b57205-5dde-4329-921c-020f0c4856b5","type":"Toolbar"},{"attributes":{},"id":"61d87393-cf00-4499-82b4-261e61dfaf91","type":"BasicTickFormatter"},{"attributes":{"callback":null,"overlay":{"id":"ec7ec3a6-2b24-441e-be55-f4309b6491f0","type":"BoxAnnotation"},"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},"renderers":[{"id":"75d5ddb3-8f82-416e-bd9e-d8bd94b6da7c","type":"GlyphRenderer"}]},"id":"ad7d5fa3-62a1-42da-b319-a238c748dd9e","type":"BoxSelectTool"},{"attributes":{"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"}},"id":"3ba6e3aa-4e4b-465f-954b-fe08a2fdc0ea","type":"CrosshairTool"},{"attributes":{"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"}},"id":"fdd02ec3-1a86-4ea2-9db4-9bb27216de73","type":"ResizeTool"},{"attributes":{"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"}},"id":"3cd4e1ed-08be-4ce6-9a45-06699edb16bf","type":"ResetTool"},{"attributes":{},"id":"65501ef1-5699-4613-aa04-3832a3895c52","type":"ToolEvents"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"size":{"units":"screen","value":7},"x":{"field":"x"},"y":{"field":"y"}},"id":"45d8c71e-14c5-435f-bb11-8c0e732da5e3","type":"Circle"},{"attributes":{"overlay":{"id":"e0b77d7c-1411-4875-a8d4-8c5bf16b8b22","type":"BoxAnnotation"},"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"}},"id":"00a4a34a-bd64-42c7-8426-ea4b6505d218","type":"BoxZoomTool"},{"attributes":{"plot":null,"text":""},"id":"7835772a-d000-456d-b61e-b8ec099673a8","type":"Title"},{"attributes":{"callback":null,"column_names":["x","y","index"],"data":{"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],"x":{"__ndarray__":"QtDvFw7EFUC6dPuBf9YVQELWbHUV8Q1AonSoYSYaEEBlB7YBLMQQwBpqtyFo9f0/6WiZWZRF979FLujzaZAPwLugH4jBCB5A0BMnwH8CJMA6yNdFVvMBwGdF8XGQ+OI/XKri1IKlDkA51Bc5CrIHQJLw+KYXEfG/FBvHiTxDAECnR/AnwxDrP+BiztkpDBhA0HnNIkYvE0CvvKhqgs0SQGDx6CCTHiBAcahLKv+EEcBBrBvcaikBQBT3/KnsPiDA4CEKg1IxAUD+kZRP++AZwMLle2l65RVAhOwxkJDv9D/WiFXE3LQbQIuAJBCzuBPA681yDXbO879jNUI2I8oBwJBTo9dxVQNA+av5vH2BHEABe+rdw2jvP4Zb4M5x9vc/gRCZlSEYD8Bq62qezg0JwOaMtahRDilAHiWfovdwIECx7CP0DD0YQL2rP67s6hFAkIMPhI3h6T8uJCgPHY7Wv0RtL2oNjADA1fq/Qr98D0BQSeJ0pjAbwJ0k5gAdhhHAqbyic3arDEB/NMzBAwAgwDh2bf6IiPs/D9VBJxX9AEDyFYsM2McYQKTBoOVhMRBAGW0BXABNFECzw4jIOA4KQL9/7tIbAiRAet6uoDQ8B8Cbc4VG3bYgwODsw+4ZJQ9ABkYjpMkjF0CIpPG2vesiwJqlZIdICdK/qh12o5lMEcAYEleXn6cSwFpvQyHYFOE/wsn/vTgyB8D8a7kse9Hlv+9sjTn8yypA6uJgYoVBwL/8GHdmPGIVwD8eGpGb4wBAXmON3lJFCMA75ZVZWEF1vwUvvzof0wLAcc0eA/C7B8C+hSx+vQvPP1GQQuKRnfG/i9oz5yr1A8DtMh7WWA4aQOafkSxHLxvASVnF4XimCkB82lMAcO0cQFa/zM+J9f2/VZ2908IR4j+eROmQRGkRwBYy20KEngXAcmChFWcEFcDytXumkcoHwCZUyYF8IRVAX7paH9UD+r9oBj53uhsWwMIFwfzcBvK/dRJhTFA8IMARMKMls7b0P6cF97v4hiBAQA2AQK86GMBYy+uJDdskQBRKPKboKCTA28IA1nhLG0A=","dtype":"float64","shape":[100]},"y":{"__ndarray__":"fUkHJyWt2r+pOS+nSo0KQGgZ19Odr/A/jGIlon9rDMD9w4FLW0nyv0q/1OEpQf6/5rTOBOCy/j9IsOuVZuoLwPDtxvGwyiBArLbeKOo6/b+vSUKqu/oMwJnO4JwrLAJAw/pyDn67FEC7gRYwOngJwJwyH9QyB+A/NC+NLJ94EEDe3ARvKjMhwK/HehXmeBBAkiqqw/f/4r+E/xoncxPpP+ECZhMhtwJA4J+LJnUC+7/eJ3QoPTP7P1QdxvC+cgtALxU2C9hkHsAnWAjW+hsXQBizFei3LgFAIPZ22+j6I8CUIauhdbwawC/DVlfBIABApoceq6mlD0CnoxuAB6AIwCbbzzl8SgVADue707fKE8BP14fy4xIpwK/A5UZLchNANS8SMlR8BEDuf/wkXI8UwMxfF5ddVBTA+GBnF9pXBMDkKsQT+ED9P+SLL6NkwPm/yh73qgZ4BUAy90Ova0f3P6yCp6j+YRlAFjmmYzffF8Aexxh6sO8iQL0gVijSShdAcDLnOUx78z8mfVcKfD0RQPJvoaxw7f+/8j7f3GMEJsArSbqtyAQBQHRC/ClLcQdAyClc1bTXBUDdgRs5obMJwLCQkL84cB9ABJbv/ny5FEC17G/MYYD2PwbIYCR94wtAI1rc8lOAE8CwQZ0fje0kwG3bY4CItQhA9qiMX2rTD0BIjehyCgYjQCART/dXwRDA6pZItUokFcB4xGZGdMsQwFMf3btW+RzAIbvzMGDrIMBSULR7Adn7v9wty3XcOuO/LRuLaNvg8L+ssL9wRpIDQBdQtqiCbvE/8OXvip6EBkBJCwpaep7bv7aWmpleX9Y/FVT5SiYaFkCMyv5n804RQJYZdwVOtQvAiJGr/6DDFsCVtXGeGJEpQHr2Uz0/zBHAKI3QvdyaIcBIQnRXVarZP4jvefzgiBPAshnEP5w7GEA+EZ1k4iggwHiA4jOb/xZAzt4eovawEkDmikQjnOQTQAihGq0/tRpAT8LdSFx7DkDOhl/J46P+P9qbGcnBlAJA/4kEbmCEH0CIztrIQVEUwEXTp4P6OxzAbc5a5k6EEsA=","dtype":"float64","shape":[100]}}},"id":"89929e99-904f-4740-b94d-40434d54bb92","type":"ColumnDataSource"},{"attributes":{},"id":"91ae7643-0c5e-41a6-8ef3-c467ef1ffb1f","type":"BasicTickFormatter"},{"attributes":{"callback":null},"id":"9e263aef-dca3-4046-88d8-33340e00ceb1","type":"DataRange1d"},{"attributes":{"callback":null},"id":"0998ddb9-81a6-4c89-adf4-3b7352b26284","type":"DataRange1d"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"e0b77d7c-1411-4875-a8d4-8c5bf16b8b22","type":"BoxAnnotation"},{"attributes":{"formatter":{"id":"91ae7643-0c5e-41a6-8ef3-c467ef1ffb1f","type":"BasicTickFormatter"},"plot":{"id":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e","subtype":"Figure","type":"Plot"},"ticker":{"id":"a136a255-67af-488c-b1d1-cc3adc7ca73a","type":"BasicTicker"}},"id":"72f241d5-e7b9-4d7c-a0db-b847d91982a9","type":"LinearAxis"},{"attributes":{},"id":"a136a255-67af-488c-b1d1-cc3adc7ca73a","type":"BasicTicker"}],"root_ids":["7e77cf28-6fda-45b1-a5c8-de8a84864f3e"]},"title":"Bokeh Application","version":"0.12.5"}};
var render_items = [{"docid":"a9bf11cd-94a3-4d4b-9f0f-822f753a0002","elementid":"7fba5f3c-9768-4da5-a715-2ce2313b03ea","modelid":"7e77cf28-6fda-45b1-a5c8-de8a84864f3e"}];
Bokeh.embed.embed_items(docs_json, render_items);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</body>
</html>
And we can execute this HTML code and get the interactive plot again:
from IPython.core.display import HTML
HTML(myplot_html)