Bokeh is a Python interactive visualization library that targets modern web browsers for presentation. Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.

Looking on some Bokeh forums, I have seen discussion threads mention that embedding Bokeh plots on GitHub Pages-hosted Jekyll blogs is not possible due the way that GitHub Pages handles certain aspects of JavaScript.

This post describes a method of embedding Bokeh plots on GitHub Pages that seems to work.

The Bokeh website has a page on embedding Bokeh plots. Here’s what it says about standalone HTML:

Bokeh can generate standalone HTML documents using the file_html() function. This function can emit HTML from its own generic template, or a template you provide. These files contain the data for the plot inline and are completely transportable, while still providing interactive tools (pan, zoom, etc.) for your plot.

Here is an example:

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.circle([1,2], [3,4])

html = file_html(plot, CDN, "my plot")

Here’s the result of print html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>my plot</title>
        
        <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script>
        <script type="text/javascript">
            Bokeh.set_log_level("info");
        </script>

        <script type="text/javascript">
            Bokeh.$(function() {
                var modelid = "274bb36d-c93e-4f9b-8dab-dad3a197f9a8";
                var modeltype = "Plot";
                var elementid = "127cb718-4f88-40e0-a87b-48789473ffa8";
                Bokeh.logger.info("Realizing plot:")
                Bokeh.logger.info(" - modeltype: Plot");
                Bokeh.logger.info(" - modelid: 274bb36d-c93e-4f9b-8dab-dad3a197f9a8");
                Bokeh.logger.info(" - elementid: 127cb718-4f88-40e0-a87b-48789473ffa8");
                var all_models = [{"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "2003c4e5-22d1-4fd0-b80b-50216a6a10c4"}, "type": "PanTool", "id": "2003c4e5-22d1-4fd0-b80b-50216a6a10c4"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "12efd6d4-57ab-4d06-a30d-9400c8d5a083"}, "type": "WheelZoomTool", "id": "12efd6d4-57ab-4d06-a30d-9400c8d5a083"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "5baaefb4-bec4-4260-aa54-c13f43e73dd4"}, "type": "BoxZoomTool", "id": "5baaefb4-bec4-4260-aa54-c13f43e73dd4"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_alpha": {"value": 0.1}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "fill_alpha": {"value": 0.1}, "y": {"field": "y"}, "x": {"field": "x"}, "id": "7c62e0ca-e859-433a-a3f1-88a75912a6e0"}, "type": "Circle", "id": "7c62e0ca-e859-433a-a3f1-88a75912a6e0"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "id": "99708b13-d3fb-45f0-a401-649d29996961"}, "type": "ResizeTool", "id": "99708b13-d3fb-45f0-a401-649d29996961"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_alpha": {"value": 1.0}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "fill_alpha": {"value": 1.0}, "y": {"field": "y"}, "x": {"field": "x"}, "id": "e53dae53-e101-4bf9-ab73-777346da1190"}, "type": "Circle", "id": "e53dae53-e101-4bf9-ab73-777346da1190"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "id": "7958e554-3d9b-493e-b096-48ca40159962"}, "type": "HelpTool", "id": "7958e554-3d9b-493e-b096-48ca40159962"}, {"attributes": {"column_names": ["x", "y"], "tags": [], "doc": null, "selected": {"2d": {"indices": []}, "1d": {"indices": []}, "0d": {"indices": [], "flag": false}}, "callback": null, "data": {"y": [3, 4], "x": [1, 2]}, "id": "41df4abc-ce73-4da3-a262-01b44e0f1b5f"}, "type": "ColumnDataSource", "id": "41df4abc-ce73-4da3-a262-01b44e0f1b5f"}, {"attributes": {"nonselection_glyph": {"type": "Circle", "id": "7c62e0ca-e859-433a-a3f1-88a75912a6e0"}, "data_source": {"type": "ColumnDataSource", "id": "41df4abc-ce73-4da3-a262-01b44e0f1b5f"}, "name": null, "tags": [], "doc": null, "selection_glyph": null, "id": "899eefa6-4fe2-4529-989e-4cc629d6ddb9", "glyph": {"type": "Circle", "id": "e53dae53-e101-4bf9-ab73-777346da1190"}}, "type": "GlyphRenderer", "id": "899eefa6-4fe2-4529-989e-4cc629d6ddb9"}, {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8", "attributes": {"x_range": {"type": "DataRange1d", "id": "11234b5f-f447-4558-877f-b11af2c638b2"}, "right": [], "tags": [], "y_range": {"type": "DataRange1d", "id": "a0bab0f8-dd67-4dda-9b05-0c8338296dca"}, "renderers": [{"type": "LinearAxis", "id": "dc3b92dd-b44a-41c1-87a3-d48c90dd9f1e"}, {"type": "Grid", "id": "1d19254f-cb37-4ebc-b3e0-ca163d4bff52"}, {"type": "LinearAxis", "id": "7d6d9c91-1fc4-411e-a976-6fd21ce955a8"}, {"type": "Grid", "id": "eae2cd94-525f-4752-a69a-7479c0bc0eed"}, {"type": "GlyphRenderer", "id": "899eefa6-4fe2-4529-989e-4cc629d6ddb9"}], "extra_y_ranges": {}, "extra_x_ranges": {}, "tool_events": {"type": "ToolEvents", "id": "d592d1ef-4ecb-43d9-b7c7-3dbfa650a1e2"}, "above": [], "doc": null, "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8", "tools": [{"type": "PanTool", "id": "2003c4e5-22d1-4fd0-b80b-50216a6a10c4"}, {"type": "WheelZoomTool", "id": "12efd6d4-57ab-4d06-a30d-9400c8d5a083"}, {"type": "BoxZoomTool", "id": "5baaefb4-bec4-4260-aa54-c13f43e73dd4"}, {"type": "PreviewSaveTool", "id": "5837534f-1ca5-4c7c-9bb7-bc7a0049e8b8"}, {"type": "ResizeTool", "id": "99708b13-d3fb-45f0-a401-649d29996961"}, {"type": "ResetTool", "id": "4e6bba38-319a-4989-90a0-87502e057dd5"}, {"type": "HelpTool", "id": "7958e554-3d9b-493e-b096-48ca40159962"}], "below": [{"type": "LinearAxis", "id": "dc3b92dd-b44a-41c1-87a3-d48c90dd9f1e"}], "left": [{"type": "LinearAxis", "id": "7d6d9c91-1fc4-411e-a976-6fd21ce955a8"}]}}, {"attributes": {"names": [], "tags": [], "doc": null, "id": "11234b5f-f447-4558-877f-b11af2c638b2", "renderers": []}, "type": "DataRange1d", "id": "11234b5f-f447-4558-877f-b11af2c638b2"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "id": "5837534f-1ca5-4c7c-9bb7-bc7a0049e8b8"}, "type": "PreviewSaveTool", "id": "5837534f-1ca5-4c7c-9bb7-bc7a0049e8b8"}, {"attributes": {"names": [], "tags": [], "doc": null, "id": "a0bab0f8-dd67-4dda-9b05-0c8338296dca", "renderers": []}, "type": "DataRange1d", "id": "a0bab0f8-dd67-4dda-9b05-0c8338296dca"}, {"attributes": {"geometries": [], "tags": [], "doc": null, "id": "d592d1ef-4ecb-43d9-b7c7-3dbfa650a1e2"}, "type": "ToolEvents", "id": "d592d1ef-4ecb-43d9-b7c7-3dbfa650a1e2"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "853370a8-14ea-4527-9ac6-16f31d5eb18d"}, "ticker": {"type": "BasicTicker", "id": "7bcb68e8-0e7f-4616-9bba-847ceb4d1a1e"}, "id": "dc3b92dd-b44a-41c1-87a3-d48c90dd9f1e"}, "type": "LinearAxis", "id": "dc3b92dd-b44a-41c1-87a3-d48c90dd9f1e"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "7bcb68e8-0e7f-4616-9bba-847ceb4d1a1e", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "7bcb68e8-0e7f-4616-9bba-847ceb4d1a1e"}, {"attributes": {"doc": null, "id": "853370a8-14ea-4527-9ac6-16f31d5eb18d", "tags": []}, "type": "BasicTickFormatter", "id": "853370a8-14ea-4527-9ac6-16f31d5eb18d"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "dimension": 0, "ticker": {"type": "BasicTicker", "id": "7bcb68e8-0e7f-4616-9bba-847ceb4d1a1e"}, "id": "1d19254f-cb37-4ebc-b3e0-ca163d4bff52"}, "type": "Grid", "id": "1d19254f-cb37-4ebc-b3e0-ca163d4bff52"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "9f361e93-736b-4356-bff9-beda9479d76c"}, "ticker": {"type": "BasicTicker", "id": "17b96f04-0432-46ee-afa2-ee1c57afdeeb"}, "id": "7d6d9c91-1fc4-411e-a976-6fd21ce955a8"}, "type": "LinearAxis", "id": "7d6d9c91-1fc4-411e-a976-6fd21ce955a8"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "17b96f04-0432-46ee-afa2-ee1c57afdeeb", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "17b96f04-0432-46ee-afa2-ee1c57afdeeb"}, {"attributes": {"doc": null, "id": "9f361e93-736b-4356-bff9-beda9479d76c", "tags": []}, "type": "BasicTickFormatter", "id": "9f361e93-736b-4356-bff9-beda9479d76c"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "dimension": 1, "ticker": {"type": "BasicTicker", "id": "17b96f04-0432-46ee-afa2-ee1c57afdeeb"}, "id": "eae2cd94-525f-4752-a69a-7479c0bc0eed"}, "type": "Grid", "id": "eae2cd94-525f-4752-a69a-7479c0bc0eed"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "274bb36d-c93e-4f9b-8dab-dad3a197f9a8"}, "tags": [], "doc": null, "id": "4e6bba38-319a-4989-90a0-87502e057dd5"}, "type": "ResetTool", "id": "4e6bba38-319a-4989-90a0-87502e057dd5"}];
                Bokeh.load_models(all_models);
                var model = Bokeh.Collections(modeltype).get(modelid);
                var view = new model.default_view({model: model, el: '#127cb718-4f88-40e0-a87b-48789473ffa8'});
                Bokeh.index[modelid] = view
            });
        </script>
    </head>
    <body>
        <div class="plotdiv" id="127cb718-4f88-40e0-a87b-48789473ffa8"></div>
    </body>
</html>

Including HTML in a Markdown file has given me some problems before, and some forum posts recommend using <iframe></imframe> tags, but this hasn’t worked very smoothly.

Here’s the HTML as I post include it in a Markdown file on my markdown file for a post:

<meta charset="utf-8">
<title>my plot</title>
    
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script>
<script type="text/javascript">
    Bokeh.set_log_level("info");
</script>

<script type="text/javascript">
    Bokeh.$(function() {
        var modelid = "27663170-c43e-4dea-a1bc-747229c2084e";
        var modeltype = "Plot";
        var elementid = "b201e9fd-4166-4aa8-8963-0ce26eeb8e73";
        Bokeh.logger.info("Realizing plot:")
        Bokeh.logger.info(" - modeltype: Plot");
        Bokeh.logger.info(" - modelid: 27663170-c43e-4dea-a1bc-747229c2084e");
        Bokeh.logger.info(" - elementid: b201e9fd-4166-4aa8-8963-0ce26eeb8e73");
        var all_models = [{"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e", "attributes": {"x_range": {"type": "DataRange1d", "id": "4839dfaa-3854-4e15-a204-ee072537d72b"}, "right": [], "tags": [], "y_range": {"type": "DataRange1d", "id": "6e07d07d-774a-4068-a104-6e8280e1bd33"}, "renderers": [{"type": "LinearAxis", "id": "5e8c9263-47d7-4d30-9e88-abfb7adb0c93"}, {"type": "Grid", "id": "8606d4ae-e56a-4fa9-ab6e-38a4a6a37098"}, {"type": "LinearAxis", "id": "98819d43-35a5-4c0c-8cdb-667d1f3603cd"}, {"type": "Grid", "id": "0551741c-d3e3-4395-81eb-d8c0190ede3e"}, {"type": "GlyphRenderer", "id": "d8c43984-012f-46b9-8f34-972a83b0ad2f"}], "extra_y_ranges": {}, "extra_x_ranges": {}, "tool_events": {"type": "ToolEvents", "id": "2e8e2bee-6830-45c7-bd6f-9166f5777505"}, "above": [], "doc": null, "id": "27663170-c43e-4dea-a1bc-747229c2084e", "tools": [{"type": "PanTool", "id": "e89e5427-e24e-47b1-bbaa-3aeb4321a9db"}, {"type": "WheelZoomTool", "id": "a37cf199-2570-4c07-9913-da0c5679d023"}, {"type": "BoxZoomTool", "id": "f431de3b-3585-424b-a698-cf3084b897df"}, {"type": "PreviewSaveTool", "id": "93383792-4ecc-4fc9-b735-b87781eae780"}, {"type": "ResizeTool", "id": "674735fd-0c97-43e8-8d1b-8f3f59f5fe42"}, {"type": "ResetTool", "id": "cd488e5c-076e-4027-b087-1dcdc73b6d10"}, {"type": "HelpTool", "id": "0a4e5027-8af4-4bbe-abb0-90caa5e09b44"}], "below": [{"type": "LinearAxis", "id": "5e8c9263-47d7-4d30-9e88-abfb7adb0c93"}], "left": [{"type": "LinearAxis", "id": "98819d43-35a5-4c0c-8cdb-667d1f3603cd"}]}}, {"attributes": {"names": [], "tags": [], "doc": null, "id": "4839dfaa-3854-4e15-a204-ee072537d72b", "renderers": []}, "type": "DataRange1d", "id": "4839dfaa-3854-4e15-a204-ee072537d72b"}, {"attributes": {"column_names": ["x", "y"], "tags": [], "doc": null, "selected": {"2d": {"indices": []}, "1d": {"indices": []}, "0d": {"indices": [], "flag": false}}, "callback": null, "data": {"y": [3, 4], "x": [1, 2]}, "id": "72265f1e-fb4d-4c3d-8fbe-559ad913936c"}, "type": "ColumnDataSource", "id": "72265f1e-fb4d-4c3d-8fbe-559ad913936c"}, {"attributes": {"names": [], "tags": [], "doc": null, "id": "6e07d07d-774a-4068-a104-6e8280e1bd33", "renderers": []}, "type": "DataRange1d", "id": "6e07d07d-774a-4068-a104-6e8280e1bd33"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "63b8bab9-a211-4a08-8703-a22f51bfcd0f"}, "ticker": {"type": "BasicTicker", "id": "e3ca1f42-4452-4cb2-b3b4-87db30ba3448"}, "id": "5e8c9263-47d7-4d30-9e88-abfb7adb0c93"}, "type": "LinearAxis", "id": "5e8c9263-47d7-4d30-9e88-abfb7adb0c93"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "e3ca1f42-4452-4cb2-b3b4-87db30ba3448", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "e3ca1f42-4452-4cb2-b3b4-87db30ba3448"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_alpha": {"value": 1.0}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "fill_alpha": {"value": 1.0}, "y": {"field": "y"}, "x": {"field": "x"}, "id": "8d15ed42-6088-40fc-8624-3ae69eedf1e2"}, "type": "Circle", "id": "8d15ed42-6088-40fc-8624-3ae69eedf1e2"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "dimension": 0, "ticker": {"type": "BasicTicker", "id": "e3ca1f42-4452-4cb2-b3b4-87db30ba3448"}, "id": "8606d4ae-e56a-4fa9-ab6e-38a4a6a37098"}, "type": "Grid", "id": "8606d4ae-e56a-4fa9-ab6e-38a4a6a37098"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "b17c0304-1823-48c6-be15-f33ffc0fbecb"}, "ticker": {"type": "BasicTicker", "id": "628c864f-3b51-4815-bd0d-2050741e55b4"}, "id": "98819d43-35a5-4c0c-8cdb-667d1f3603cd"}, "type": "LinearAxis", "id": "98819d43-35a5-4c0c-8cdb-667d1f3603cd"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "628c864f-3b51-4815-bd0d-2050741e55b4", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "628c864f-3b51-4815-bd0d-2050741e55b4"}, {"attributes": {"doc": null, "id": "b17c0304-1823-48c6-be15-f33ffc0fbecb", "tags": []}, "type": "BasicTickFormatter", "id": "b17c0304-1823-48c6-be15-f33ffc0fbecb"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "dimension": 1, "ticker": {"type": "BasicTicker", "id": "628c864f-3b51-4815-bd0d-2050741e55b4"}, "id": "0551741c-d3e3-4395-81eb-d8c0190ede3e"}, "type": "Grid", "id": "0551741c-d3e3-4395-81eb-d8c0190ede3e"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "e89e5427-e24e-47b1-bbaa-3aeb4321a9db"}, "type": "PanTool", "id": "e89e5427-e24e-47b1-bbaa-3aeb4321a9db"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "a37cf199-2570-4c07-9913-da0c5679d023"}, "type": "WheelZoomTool", "id": "a37cf199-2570-4c07-9913-da0c5679d023"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "f431de3b-3585-424b-a698-cf3084b897df"}, "type": "BoxZoomTool", "id": "f431de3b-3585-424b-a698-cf3084b897df"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "id": "93383792-4ecc-4fc9-b735-b87781eae780"}, "type": "PreviewSaveTool", "id": "93383792-4ecc-4fc9-b735-b87781eae780"}, {"attributes": {"nonselection_glyph": {"type": "Circle", "id": "8862d1e2-f5a3-468d-971b-c58701a194c4"}, "data_source": {"type": "ColumnDataSource", "id": "72265f1e-fb4d-4c3d-8fbe-559ad913936c"}, "name": null, "tags": [], "doc": null, "selection_glyph": null, "id": "d8c43984-012f-46b9-8f34-972a83b0ad2f", "glyph": {"type": "Circle", "id": "8d15ed42-6088-40fc-8624-3ae69eedf1e2"}}, "type": "GlyphRenderer", "id": "d8c43984-012f-46b9-8f34-972a83b0ad2f"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "id": "674735fd-0c97-43e8-8d1b-8f3f59f5fe42"}, "type": "ResizeTool", "id": "674735fd-0c97-43e8-8d1b-8f3f59f5fe42"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "id": "cd488e5c-076e-4027-b087-1dcdc73b6d10"}, "type": "ResetTool", "id": "cd488e5c-076e-4027-b087-1dcdc73b6d10"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "27663170-c43e-4dea-a1bc-747229c2084e"}, "tags": [], "doc": null, "id": "0a4e5027-8af4-4bbe-abb0-90caa5e09b44"}, "type": "HelpTool", "id": "0a4e5027-8af4-4bbe-abb0-90caa5e09b44"}, {"attributes": {"geometries": [], "tags": [], "doc": null, "id": "2e8e2bee-6830-45c7-bd6f-9166f5777505"}, "type": "ToolEvents", "id": "2e8e2bee-6830-45c7-bd6f-9166f5777505"}, {"attributes": {"doc": null, "id": "63b8bab9-a211-4a08-8703-a22f51bfcd0f", "tags": []}, "type": "BasicTickFormatter", "id": "63b8bab9-a211-4a08-8703-a22f51bfcd0f"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_alpha": {"value": 0.1}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "fill_alpha": {"value": 0.1}, "y": {"field": "y"}, "x": {"field": "x"}, "id": "8862d1e2-f5a3-468d-971b-c58701a194c4"}, "type": "Circle", "id": "8862d1e2-f5a3-468d-971b-c58701a194c4"}];
        Bokeh.load_models(all_models);
        var model = Bokeh.Collections(modeltype).get(modelid);
        var view = new model.default_view({model: model, el: '#b201e9fd-4166-4aa8-8963-0ce26eeb8e73'});
        Bokeh.index[modelid] = view
    });
</script>

<div class="plotdiv" id="b201e9fd-4166-4aa8-8963-0ce26eeb8e73"></div>

Update:

Instead of including the html directly in the markdown file, the better way is to put the Bokeh html file in the _include folder and then use the following liquid template syntax to include the html in the markdown:

{% include my_bokeh_file.html %}

You may need to inspect the file that bokeh generates and remove some of the stying. Here is the <head> tag of one of the bokeh files I have used in a Jekyll blog post:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Plot</title>
        
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css" type="text/css" />
        
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.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>

Commenting out the style portion was enough to fix the styling issue I had, but there is probably more you can remove from the html file as well. Be sure to include the javascript links that bokeh needs to run properly.

It is important that the <script>, <link> and <div> tags are not indented in Markdown, otherwise the Bokeh plot may not render correcty in the Jekyll engine. The result should be an interactive Bokeh plot:

my plot

Bokeh is a powerful library and I’ll be trying to use it more in future projects.