kevincolten/ocean_plot.py

## ocean_plot.py
from bokeh.embed import components
from bokeh.models import AjaxDataSource, Callback, Slider
from bokeh.plotting import figure, output_file, show, vplot
from jinja2 import Template
import webbrowser
import os
import six

source = AjaxDataSource(
    data_url='http://54.80.255.253:5000/subsample/0/180/0/360/350/800/0',
    polling_interval=10000000,
    data=dict(data=[[[0]]], x=[-180], dw=[360], y=[-90], dh=[180])
)

callback = Callback(args=dict(source=source), code="""
    var t = slider.get('value')
    var xr = plot.get('x_range')
    var yr = plot.get('y_range')
    lat_start = Math.max(yr.get('start'), -90) + 90
    lat_end = Math.min(yr.get('end'), 90) + 90
    lon_start = Math.max(xr.get('start'), -180) + 180
    lon_end = Math.min(xr.get('end'), 180) + 180

    var url = 'http://54.80.255.253:5000/subsample/' + +lat_start + '/' + lat_end + '/' + lon_start + '/' + lon_end + '/200/600/' + t
    source.set('data_url', url, {'silent': true})

    buffer = function(func, wait, scope) {
      var timer = null;
      return function() {
        if(timer) clearTimeout(timer);
        var args = arguments;
        timer = setTimeout(function() { timer = null; func.apply(scope, args); }, wait);
      };
    };
    buffer(source.get_data, 400)("replace")
""")

s = Slider(start=0, end=92, value=1, step=1, title="Time", callback=callback)

p = figure(plot_width=900, x_range=(-180, 180), y_range=(-90, 90))

p.image(image="data", x="x", y="y", dw="dw", dh="dh", palette="Spectral11", source=source)
p.x_range.callback = p.y_range.callback = callback

callback.args['plot'] = p
callback.args['slider'] = s

# output_file("ocean.html")

# show(vplot(p, s))

script, div = components((p, s))

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ocean</title>
        <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.1.min.css" type="text/css" />
        <style>.bk-slider-horizontal{max-width:900px}</style>
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.1.min.js"></script>
        {{ script }}
    </head>
    <body>
    {% for idx in div %}
        {{ idx }}
    {% endfor %}
    <script>
        Bokeh.$(document).ready(function(){
            var slider = Bokeh.$('div.bk-slider-horizontal .slider')[0];
            var sliderClasses = slider.classList;
            for (c in sliderClasses) {
                Bokeh.$(slider).addClass("bk-" + sliderClasses[c]);
            }
            var sliderHandle = Bokeh.$('a.ui-slider-handle')[0];
            var sliderHandleClasses = sliderHandle.classList;
            for (c in sliderHandleClasses) {
                Bokeh.$(sliderHandle).addClass("bk-" + sliderHandleClasses[c]);
            }
        })
    </script>
    </body>
</html>
''')

html_file = 'ocean.html'
with open(html_file, 'w') as textfile:
    textfile.write(template.render(script=script, div=div))
url = 'file:{}'.format(six.moves.urllib.request.pathname2url(os.path.abspath(html_file)))
webbrowser.open(url)
	from bokeh.embed import components
	from bokeh.models import AjaxDataSource, Callback, Slider
	from bokeh.plotting import figure, output_file, show, vplot
	from jinja2 import Template
	import webbrowser
	import os
	import six

	source = AjaxDataSource(
	data_url='http://54.80.255.253:5000/subsample/0/180/0/360/350/800/0',
	polling_interval=10000000,
	data=dict(data=[[[0]]], x=[-180], dw=[360], y=[-90], dh=[180])
	)

	callback = Callback(args=dict(source=source), code="""
	var t = slider.get('value')
	var xr = plot.get('x_range')
	var yr = plot.get('y_range')
	lat_start = Math.max(yr.get('start'), -90) + 90
	lat_end = Math.min(yr.get('end'), 90) + 90
	lon_start = Math.max(xr.get('start'), -180) + 180
	lon_end = Math.min(xr.get('end'), 180) + 180

	var url = 'http://54.80.255.253:5000/subsample/' + +lat_start + '/' + lat_end + '/' + lon_start + '/' + lon_end + '/200/600/' + t
	source.set('data_url', url, {'silent': true})

	buffer = function(func, wait, scope) {
	var timer = null;
	return function() {
	if(timer) clearTimeout(timer);
	var args = arguments;
	timer = setTimeout(function() { timer = null; func.apply(scope, args); }, wait);
	};
	};
	buffer(source.get_data, 400)("replace")
	""")

	s = Slider(start=0, end=92, value=1, step=1, title="Time", callback=callback)

	p = figure(plot_width=900, x_range=(-180, 180), y_range=(-90, 90))

	p.image(image="data", x="x", y="y", dw="dw", dh="dh", palette="Spectral11", source=source)
	p.x_range.callback = p.y_range.callback = callback

	callback.args['plot'] = p
	callback.args['slider'] = s

	# output_file("ocean.html")

	# show(vplot(p, s))

	script, div = components((p, s))

	template = Template('''<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Ocean</title>
	<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.1.min.css" type="text/css" />
	<style>.bk-slider-horizontal{max-width:900px}</style>
	<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.1.min.js"></script>
	{{ script }}
	</head>
	<body>
	{% for idx in div %}
	{{ idx }}
	{% endfor %}
	<script>
	Bokeh.$(document).ready(function(){
	var slider = Bokeh.$('div.bk-slider-horizontal .slider')[0];
	var sliderClasses = slider.classList;
	for (c in sliderClasses) {
	Bokeh.$(slider).addClass("bk-" + sliderClasses[c]);
	}
	var sliderHandle = Bokeh.$('a.ui-slider-handle')[0];
	var sliderHandleClasses = sliderHandle.classList;
	for (c in sliderHandleClasses) {
	Bokeh.$(sliderHandle).addClass("bk-" + sliderHandleClasses[c]);
	}
	})
	</script>
	</body>
	</html>
	''')

	html_file = 'ocean.html'
	with open(html_file, 'w') as textfile:
	textfile.write(template.render(script=script, div=div))
	url = 'file:{}'.format(six.moves.urllib.request.pathname2url(os.path.abspath(html_file)))
	webbrowser.open(url)