Skip to content

Instantly share code, notes, and snippets.

@schlichtanders

schlichtanders/mwe_layout_plots.html

Last active October 26, 2016 11:53
Show Gist options
  • Save schlichtanders/3e41890dcd20fbc3a1db2a675df6ce51 to your computer and use it in GitHub Desktop.
Save schlichtanders/3e41890dcd20fbc3a1db2a675df6ce51 to your computer and use it in GitHub Desktop.
Download ZIP
bokeh layout. This gist shows some unexpected behaviour of the layout.
Raw
mwe_layout_plots.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bokeh Plots Responsiveness Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-md-6">
<div class="well">
<div class="bk-root">
<div class="plotdiv" id="56b44878-c0a2-4417-9787-5344e260352a"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">...</div>
</div>
</div>
</div>
<script type="text/javascript">
Bokeh.$(function() {
Bokeh.safely(function() {
var docs_json = {"878d01ca-72d7-4d01-a490-11b996217cec":{"roots":{"references":[{"attributes":{"callback":null,"column_names":["y","x"],"data":{"x":[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],"y":[0.555391536547789,0.47517124493679674,0.567291610878313,0.9363363826077649,0.011577285944550542,0.2615906690169081,0.7431712379266797,0.5116797983125488,0.4669838737542107,0.2882416795191052,0.9801869192692758,0.4116080027720437,0.8529415039219814,0.6727956349976076,0.15615724725133862,0.857018882809675,0.7917003596945305,0.621824584510838,0.6780194472817258,0.7716904615634923,0.38224642677947074,0.41379302190961353,0.4917479974366341,0.8487559475682049,0.927666670311057,0.295813016593645,0.5112992698911799,0.4730293734898554,0.2674906397413438,0.8291211378623923,0.5877060293433165,0.9316816815503328,0.16996368855924326,0.34630309801219483,0.7699882510923769,0.30657338570667236,0.4782264520341746,0.8540261269409006,0.6679524173798846,0.25288220717319565,0.5529972397766519,0.9818498136341112,0.48214523473437,0.06545025714789887,0.9029764920655858,0.1269997063657592,0.6132323709043793,0.9273221983874596,0.4337978247818842,0.7738135214224892]}},"id":"87afd768-bd06-4e24-ad64-eadeeed0a74b","type":"ColumnDataSource"},{"attributes":{"callback":null},"id":"79cc278d-cb4f-4896-bf60-e4c3ec37ebd1","type":"DataRange1d"},{"attributes":{"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"}},"id":"fa2dd657-28da-4b6f-ad9e-9eab1144886b","type":"Grid"},{"attributes":{"callback":null},"id":"1eee82a0-dba9-4f69-ae03-9818749bddb2","type":"DataRange1d"},{"attributes":{},"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"},{"attributes":{"height":30,"sizing_mode":"scale_width"},"id":"214cd9bc-a216-42bd-b860-5eca5e5dca97","type":"Spacer"},{"attributes":{"plot":null,"text":null},"id":"3d703100-2253-4ae6-adbb-04c747173cac","type":"Title"},{"attributes":{"data_source":{"id":"87afd768-bd06-4e24-ad64-eadeeed0a74b","type":"ColumnDataSource"},"glyph":{"id":"2a3d8fca-e01a-4456-9bb1-9189a86ac4ae","type":"Line"},"hover_glyph":null,"nonselection_glyph":{"id":"18f6c76a-37da-4cd3-b407-9c269841458b","type":"Line"},"selection_glyph":null},"id":"d343541c-4fa3-41d9-bcbb-b1579108a146","type":"GlyphRenderer"},{"attributes":{"children":[{"id":"214cd9bc-a216-42bd-b860-5eca5e5dca97","type":"Spacer"},{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"}],"sizing_mode":"scale_width"},"id":"cf08aa2f-411f-49d7-84d5-c54252db5842","type":"Column"},{"attributes":{},"id":"f00c96cb-afd5-48ac-bd31-9bbd3237afb5","type":"BasicTickFormatter"},{"attributes":{"dimension":1,"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"}},"id":"963c37fe-4c87-443b-a9af-99205cc87421","type":"Grid"},{"attributes":{"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"2a3d8fca-e01a-4456-9bb1-9189a86ac4ae","type":"Line"},{"attributes":{"formatter":{"id":"f00c96cb-afd5-48ac-bd31-9bbd3237afb5","type":"BasicTickFormatter"},"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"}},"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"},{"attributes":{},"id":"e8d05970-dd31-41fc-abaf-0899a4ea2a98","type":"BasicTickFormatter"},{"attributes":{"below":[{"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"}],"left":[{"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"}],"plot_height":42,"plot_width":700,"renderers":[{"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"},{"id":"fa2dd657-28da-4b6f-ad9e-9eab1144886b","type":"Grid"},{"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"},{"id":"963c37fe-4c87-443b-a9af-99205cc87421","type":"Grid"},{"id":"d343541c-4fa3-41d9-bcbb-b1579108a146","type":"GlyphRenderer"}],"sizing_mode":"scale_width","title":{"id":"3d703100-2253-4ae6-adbb-04c747173cac","type":"Title"},"tool_events":{"id":"4db3dc31-399a-4510-a1bc-d786fd183cc9","type":"ToolEvents"},"toolbar":{"id":"9e793876-bb23-4a21-892f-af8fb061429b","type":"Toolbar"},"x_range":{"id":"1eee82a0-dba9-4f69-ae03-9818749bddb2","type":"DataRange1d"},"y_range":{"id":"79cc278d-cb4f-4896-bf60-e4c3ec37ebd1","type":"DataRange1d"}},"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},{"attributes":{"formatter":{"id":"e8d05970-dd31-41fc-abaf-0899a4ea2a98","type":"BasicTickFormatter"},"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"}},"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"},{"attributes":{"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"18f6c76a-37da-4cd3-b407-9c269841458b","type":"Line"},{"attributes":{"active_drag":"auto","active_scroll":"auto","active_tap":"auto"},"id":"9e793876-bb23-4a21-892f-af8fb061429b","type":"Toolbar"},{"attributes":{},"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"},{"attributes":{},"id":"4db3dc31-399a-4510-a1bc-d786fd183cc9","type":"ToolEvents"}],"root_ids":["cf08aa2f-411f-49d7-84d5-c54252db5842"]},"title":"Bokeh Application","version":"0.12.3"}};
var render_items = [{"docid":"878d01ca-72d7-4d01-a490-11b996217cec","elementid":"56b44878-c0a2-4417-9787-5344e260352a","modelid":"cf08aa2f-411f-49d7-84d5-c54252db5842"}];
Bokeh.embed.embed_items(docs_json, render_items);
});
});
</script>
</body>
</html>
Raw
mwe_layout_plots.jinja2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bokeh Plots Responsiveness Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-md-6">
<div class="well">
{{ plots_div }}
</div>
</div>
<div class="col-md-6">
<div class="well">...</div>
</div>
</div>
</div>
{{ plot_script |indent(8) }}
</body>
</html>
Raw
mwe_layout_plots.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import numpy as np
from jinja2 import Template
from bokeh.embed import components
from bokeh.models import ColumnDataSource, Spacer
from bokeh.layouts import column
from bokeh.resources import CDN
from bokeh.plotting import figure
__author__ = 'Stephan Sahm <[email protected]>'
# posted on github bokeh under https://github.com/bokeh/bokeh/issues/5397
WIDTH = 700
EXTRA_HEIGHT_REL = 0.08
RESPONSIVE = True
N = 50
source = ColumnDataSource({
'x': range(N),
'y': np.random.uniform(size=N),
})
fig = figure(plot_height=int(EXTRA_HEIGHT_REL * WIDTH), tools="", plot_width=WIDTH)
fig.line(x="x", y="y", source=source)
composite = column(Spacer(height=30), fig, responsive=RESPONSIVE)
script, context = components({'plots_div': composite})
context['plot_script'] = script
context['bokeh_css'], context['bokeh_js'] = CDN.render_css(), CDN.render_js()
with open("mwe_layout_plots.jinja2") as f:
template = f.read()
html = Template(template).render(context)
with open("mwe_layout_plots.html", "w") as f:
f.write(html)
# visible bugs:
# making EXTRA_HEIGHT_REL < 0.08 no plot is printed (non-responsive)
# for responsiveness it is slightly lower EXTRA_HEIGHT_REL < 0.07
# however for e.g. 0.06 the plot appears again if one resizes the window to very small
# Spacer disappear in responsiveness (same holds for spacing with VBox and the like)
# resizing (smaller) the extra plots stay too big (occasionally leading also to overlapping)
# resizing (bigger) the extra plots stay too small (occasionally leading also to overlapping)
# updating webpage (F5) has different behaviours: usually it makes plot bigger (but still false),
# sometimes it fits it as one would expect for responsiveness
# (a short test with uncommented bootstrap CSS showed that this behaviour is not due to bootstrap)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment