In [1]:

    

from bokeh.embed import components
from bokeh.io import output_notebook, show
from bokeh.plotting.figure import Figure
import numpy as np
output_notebook()


    

    






    

        
        Loading BokehJS ...
    






    

In [2]:

    

x = np.linspace(0, 100, 11)
y1 = np.random.randn(11)
y2 = np.random.randn(11)
y3 = np.random.randn(11)


    

In [3]:

    

x


    

    
Out[3]:





array([  0.,  10.,  20.,  30.,  40.,  50.,  60.,  70.,  80.,  90., 100.])

In [4]:

    

y1


    

    
Out[4]:





array([ 1.70942633,  0.05128078, -0.39044929, -1.1464359 , -1.03742517,
       -0.41068952,  0.790034  ,  1.02702431,  0.35897633, -1.19757308,
        0.12617111])

In [5]:

    

y2


    

    
Out[5]:





array([ 1.18414609, -0.03085089, -1.26604334, -0.503521  , -1.78568738,
       -2.64521981, -0.23341972, -0.90815206, -0.88204462,  0.43318265,
        0.87561114])

In [6]:

    

p = Figure(title='SUPER Simple Notebook Demo', plot_width=600, plot_height=200, sizing_mode='scale_width')
p.title.align = 'center'
p.title.text_font_size = '15pt'
p.line(x, y1, color='red', alpha=1, muted_alpha=0.2, legend='A')
p.line(x, y2, alpha=1, muted_alpha=0.2, legend='B')
p.circle(x, y3, color='purple', alpha=1, muted_alpha=0.2, legend='C')
p.line(x, y3, color='purple', alpha=1, muted_alpha=0.2, legend='C')
p.xaxis.axis_label = 'X Values'
p.yaxis.axis_label = 'Randomly Generated Values'
p.xgrid.grid_line_alpha = 1
p.xgrid.grid_line_dash = [3,7]
p.legend.click_policy = 'mute'
p.legend.background_fill_alpha = 0.8
p.toolbar.logo = None
show(p, notebook_handle=True)


    

    











  








    















    
Out[6]:




<Bokeh Notebook handle for In[6]>

In [7]:

    

script, div = components(p)


    

In [8]:

    

print(script)


    

    




<script type="text/javascript">
  (function() {
    var fn = function() {
      Bokeh.safely(function() {
        (function(root) {
          function embed_document(root) {
            
          var docs_json = '{"ed726084-e61c-46c1-890a-67f2aeca1f9d":{"roots":{"references":[{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1040","type":"Line"},{"attributes":{"line_alpha":0.2,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1055","type":"Line"},{"attributes":{"data_source":{"id":"1084","type":"ColumnDataSource"},"glyph":{"id":"1085","type":"Line"},"hover_glyph":null,"muted_glyph":{"id":"1087","type":"Line"},"nonselection_glyph":{"id":"1086","type":"Line"},"selection_glyph":null,"view":{"id":"1089","type":"CDSView"}},"id":"1088","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.2,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1041","type":"Line"},{"attributes":{"data_source":{"id":"1052","type":"ColumnDataSource"},"glyph":{"id":"1053","type":"Line"},"hover_glyph":null,"muted_glyph":{"id":"1055","type":"Line"},"nonselection_glyph":{"id":"1054","type":"Line"},"selection_glyph":null,"view":{"id":"1057","type":"CDSView"}},"id":"1056","type":"GlyphRenderer"},{"attributes":{},"id":"1023","type":"PanTool"},{"attributes":{"source":{"id":"1084","type":"ColumnDataSource"}},"id":"1089","type":"CDSView"},{"attributes":{"source":{"id":"1052","type":"ColumnDataSource"}},"id":"1057","type":"CDSView"},{"attributes":{},"id":"1024","type":"WheelZoomTool"},{"attributes":{},"id":"1100","type":"Selection"},{"attributes":{},"id":"1064","type":"Selection"},{"attributes":{"overlay":{"id":"1031","type":"BoxAnnotation"}},"id":"1025","type":"BoxZoomTool"},{"attributes":{},"id":"1101","type":"UnionRenderers"},{"attributes":{"callback":null,"data":{"x":{"__ndarray__":"AAAAAAAAAAAAAAAAAAAkQAAAAAAAADRAAAAAAAAAPkAAAAAAAABEQAAAAAAAAElAAAAAAAAATkAAAAAAAIBRQAAAAAAAAFRAAAAAAACAVkAAAAAAAABZQA==","dtype":"float64","shape":[11]},"y":{"__ndarray__":"qRkLLEPy8j9FDL1/YJefvxlzSqq2QfS/mvd6FNgc4L/J+BjvLJL8vxwQfwBpKQXA2gCugbLgzb/G+I7plA/tv4w1cKW1Oey/tFdBu0O52z/6ApqoAQXsPw==","dtype":"float64","shape":[11]}},"selected":{"id":"1081","type":"Selection"},"selection_policy":{"id":"1082","type":"UnionRenderers"}},"id":"1052","type":"ColumnDataSource"},{"attributes":{"below":[{"id":"1013","type":"LinearAxis"}],"left":[{"id":"1018","type":"LinearAxis"}],"plot_height":200,"renderers":[{"id":"1013","type":"LinearAxis"},{"id":"1017","type":"Grid"},{"id":"1018","type":"LinearAxis"},{"id":"1022","type":"Grid"},{"id":"1031","type":"BoxAnnotation"},{"id":"1050","type":"Legend"},{"id":"1042","type":"GlyphRenderer"},{"id":"1056","type":"GlyphRenderer"},{"id":"1071","type":"GlyphRenderer"},{"id":"1088","type":"GlyphRenderer"}],"sizing_mode":"scale_width","title":{"id":"1002","type":"Title"},"toolbar":{"id":"1029","type":"Toolbar"},"x_range":{"id":"1005","type":"DataRange1d"},"x_scale":{"id":"1009","type":"LinearScale"},"y_range":{"id":"1007","type":"DataRange1d"},"y_scale":{"id":"1011","type":"LinearScale"}},"id":"1003","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1065","type":"UnionRenderers"},{"attributes":{},"id":"1026","type":"SaveTool"},{"attributes":{"line_color":"red","x":{"field":"x"},"y":{"field":"y"}},"id":"1039","type":"Line"},{"attributes":{"callback":null,"data":{"x":{"__ndarray__":"AAAAAAAAAAAAAAAAAAAkQAAAAAAAADRAAAAAAAAAPkAAAAAAAABEQAAAAAAAAElAAAAAAAAATkAAAAAAAIBRQAAAAAAAAFRAAAAAAACAVkAAAAAAAABZQA==","dtype":"float64","shape":[11]},"y":{"__ndarray__":"QXkaa89Z+z9MqoCceUGqP1aFjwkf/di/wTwoLM1X8r/vbZEhS5nwv5TufLG8SNq/xm2ZX/VH6T8GVlcKsW7wP9qHYNZ3+dY/QazcYkIp87/qGBwAYCbAPw==","dtype":"float64","shape":[11]}},"selected":{"id":"1064","type":"Selection"},"selection_policy":{"id":"1065","type":"UnionRenderers"}},"id":"1038","type":"ColumnDataSource"},{"attributes":{"label":{"value":"B"},"renderers":[{"id":"1056","type":"GlyphRenderer"}]},"id":"1066","type":"LegendItem"},{"attributes":{},"id":"1027","type":"ResetTool"},{"attributes":{},"id":"1115","type":"Selection"},{"attributes":{"align":"center","plot":null,"text":"SUPER Simple Notebook Demo","text_font_size":{"value":"15pt"}},"id":"1002","type":"Title"},{"attributes":{},"id":"1028","type":"HelpTool"},{"attributes":{},"id":"1116","type":"UnionRenderers"},{"attributes":{"fill_color":{"value":"purple"},"line_color":{"value":"purple"},"x":{"field":"x"},"y":{"field":"y"}},"id":"1068","type":"Circle"},{"attributes":{"callback":null},"id":"1005","type":"DataRange1d"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","logo":null,"tools":[{"id":"1023","type":"PanTool"},{"id":"1024","type":"WheelZoomTool"},{"id":"1025","type":"BoxZoomTool"},{"id":"1026","type":"SaveTool"},{"id":"1027","type":"ResetTool"},{"id":"1028","type":"HelpTool"}]},"id":"1029","type":"Toolbar"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"1069","type":"Circle"},{"attributes":{"data_source":{"id":"1038","type":"ColumnDataSource"},"glyph":{"id":"1039","type":"Line"},"hover_glyph":null,"muted_glyph":{"id":"1041","type":"Line"},"nonselection_glyph":{"id":"1040","type":"Line"},"selection_glyph":null,"view":{"id":"1043","type":"CDSView"}},"id":"1042","type":"GlyphRenderer"},{"attributes":{"callback":null},"id":"1007","type":"DataRange1d"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.2},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"1070","type":"Circle"},{"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":"1031","type":"BoxAnnotation"},{"attributes":{},"id":"1009","type":"LinearScale"},{"attributes":{"data_source":{"id":"1067","type":"ColumnDataSource"},"glyph":{"id":"1068","type":"Circle"},"hover_glyph":null,"muted_glyph":{"id":"1070","type":"Circle"},"nonselection_glyph":{"id":"1069","type":"Circle"},"selection_glyph":null,"view":{"id":"1072","type":"CDSView"}},"id":"1071","type":"GlyphRenderer"},{"attributes":{},"id":"1048","type":"BasicTickFormatter"},{"attributes":{"source":{"id":"1038","type":"ColumnDataSource"}},"id":"1043","type":"CDSView"},{"attributes":{},"id":"1011","type":"LinearScale"},{"attributes":{"source":{"id":"1067","type":"ColumnDataSource"}},"id":"1072","type":"CDSView"},{"attributes":{},"id":"1046","type":"BasicTickFormatter"},{"attributes":{"axis_label":"X Values","formatter":{"id":"1048","type":"BasicTickFormatter"},"plot":{"id":"1003","subtype":"Figure","type":"Plot"},"ticker":{"id":"1014","type":"BasicTicker"}},"id":"1013","type":"LinearAxis"},{"attributes":{},"id":"1014","type":"BasicTicker"},{"attributes":{"callback":null,"data":{"x":{"__ndarray__":"AAAAAAAAAAAAAAAAAAAkQAAAAAAAADRAAAAAAAAAPkAAAAAAAABEQAAAAAAAAElAAAAAAAAATkAAAAAAAIBRQAAAAAAAAFRAAAAAAACAVkAAAAAAAABZQA==","dtype":"float64","shape":[11]},"y":{"__ndarray__":"WYbtJkCrrj/fOLugANjXvxu4PSYQteI/YW3t5KtZ6T+RjzwqSXn0P7y1EI4+J+6/cz9/Es4o7D+6UuN2KOH1v81PU0siksM/hUfidGx3wT8WolVO6mLhPw==","dtype":"float64","shape":[11]}},"selected":{"id":"1115","type":"Selection"},"selection_policy":{"id":"1116","type":"UnionRenderers"}},"id":"1084","type":"ColumnDataSource"},{"attributes":{},"id":"1082","type":"UnionRenderers"},{"attributes":{"background_fill_alpha":{"value":0.8},"click_policy":"mute","items":[{"id":"1051","type":"LegendItem"},{"id":"1066","type":"LegendItem"},{"id":"1083","type":"LegendItem"}],"plot":{"id":"1003","subtype":"Figure","type":"Plot"}},"id":"1050","type":"Legend"},{"attributes":{},"id":"1081","type":"Selection"},{"attributes":{"grid_line_dash":[3,7],"plot":{"id":"1003","subtype":"Figure","type":"Plot"},"ticker":{"id":"1014","type":"BasicTicker"}},"id":"1017","type":"Grid"},{"attributes":{"label":{"value":"A"},"renderers":[{"id":"1042","type":"GlyphRenderer"}]},"id":"1051","type":"LegendItem"},{"attributes":{"label":{"value":"C"},"renderers":[{"id":"1071","type":"GlyphRenderer"},{"id":"1088","type":"GlyphRenderer"}]},"id":"1083","type":"LegendItem"},{"attributes":{"axis_label":"Randomly Generated Values","formatter":{"id":"1046","type":"BasicTickFormatter"},"plot":{"id":"1003","subtype":"Figure","type":"Plot"},"ticker":{"id":"1019","type":"BasicTicker"}},"id":"1018","type":"LinearAxis"},{"attributes":{"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1053","type":"Line"},{"attributes":{},"id":"1019","type":"BasicTicker"},{"attributes":{"callback":null,"data":{"x":{"__ndarray__":"AAAAAAAAAAAAAAAAAAAkQAAAAAAAADRAAAAAAAAAPkAAAAAAAABEQAAAAAAAAElAAAAAAAAATkAAAAAAAIBRQAAAAAAAAFRAAAAAAACAVkAAAAAAAABZQA==","dtype":"float64","shape":[11]},"y":{"__ndarray__":"WYbtJkCrrj/fOLugANjXvxu4PSYQteI/YW3t5KtZ6T+RjzwqSXn0P7y1EI4+J+6/cz9/Es4o7D+6UuN2KOH1v81PU0siksM/hUfidGx3wT8WolVO6mLhPw==","dtype":"float64","shape":[11]}},"selected":{"id":"1100","type":"Selection"},"selection_policy":{"id":"1101","type":"UnionRenderers"}},"id":"1067","type":"ColumnDataSource"},{"attributes":{"line_color":"purple","x":{"field":"x"},"y":{"field":"y"}},"id":"1085","type":"Line"},{"attributes":{"dimension":1,"plot":{"id":"1003","subtype":"Figure","type":"Plot"},"ticker":{"id":"1019","type":"BasicTicker"}},"id":"1022","type":"Grid"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1086","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1054","type":"Line"},{"attributes":{"line_alpha":0.2,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"1087","type":"Line"}],"root_ids":["1003"]},"title":"Bokeh Application","version":"1.0.4"}}';
          var render_items = [{"docid":"ed726084-e61c-46c1-890a-67f2aeca1f9d","roots":{"1003":"24187609-2050-41d3-9f8a-6090ae8e5513"}}];
          root.Bokeh.embed.embed_items(docs_json, render_items);
        
          }
          if (root.Bokeh !== undefined) {
            embed_document(root);
          } else {
            var attempts = 0;
            var timer = setInterval(function(root) {
              if (root.Bokeh !== undefined) {
                embed_document(root);
                clearInterval(timer);
              }
              attempts++;
              if (attempts > 100) {
                console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                clearInterval(timer);
              }
            }, 10, root)
          }
        })(window);
      });
    };
    if (document.readyState != "loading") fn();
    else document.addEventListener("DOMContentLoaded", fn);
  })();
</script>

In [9]:

    

print(div)


    

    




<div class="bk-root" id="24187609-2050-41d3-9f8a-6090ae8e5513" data-root-id="1003"></div>

In [ ]: