[ Tributary.io ] 041e951ff1407ed667f7 by tonyfast
Adding a short index.html
file allows bl.ocks.org to present the visualization as a stand-alone webpage.
[ Tributary.io ] 041e951ff1407ed667f7 by tonyfast
Adding a short index.html
file allows bl.ocks.org to present the visualization as a stand-alone webpage.
{"description":"scatter","endpoint":"","display":"div","public":true,"require":[{"name":"Bokeh","url":"http://cdn.pydata.org/bokeh/release/bokeh-0.8.0.min.js"},{"name":"style","url":"http://cdn.pydata.org/bokeh/release/bokeh-0.8.0.min.css"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SN1wcdj.png","inline-console":false} |
<!doctype html> | |
<html> | |
<head> | |
<link id="bokeh-css" rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.8.0.min.css"> | |
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.8.0.min.js"> | |
</script> | |
</head> | |
<body> | |
<div id="display"> | |
</div> | |
<script src="inlet.js"> | |
</script> | |
<div id="source"></div> | |
<script> | |
Bokeh.$.get('inlet.js', function(d){ | |
Bokeh.$('#source') | |
.append('<pre></pre>') | |
.append('<code></code>') | |
.text(d); | |
}) | |
</script> | |
</body> | |
</html> |
if(!$('#bokeh-css')[0]){ | |
$('head').append('<link id="bokeh-css" rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.8.0.min.css">'); | |
} | |
r = new Bokeh.Random(123456789) | |
N = 843 | |
x = _.range(N).map(function(){return r.randf()*100}) | |
y = _.range(N).map(function(){return r.randf()*100}) | |
data = { | |
x: x, | |
y: y, | |
radius: _.range(N).map(function(){return r.randf()+0.3}), | |
color: _.zip(x,y).map(function(val){return 'rgb('+[Math.floor(50+2*val[0]),Math.floor(50+2*val[1]),15].join(',')+')'}) | |
} | |
scatter = { | |
type: 'Circle', | |
source: "mydata", | |
x: 'x', | |
y: 'y', | |
radius: 'radius', | |
fill_color: 'color', | |
fill_alpha: 0.6, | |
line_color: null | |
} | |
options = { | |
title: "Scatter Demo", | |
plot_width: 539, | |
plot_height: 360, | |
x_range: [0, 151], | |
y_range: [0, 100] | |
} | |
xaxis = { | |
type: "auto", | |
location: "below", | |
grid: true | |
} | |
yaxis = { | |
type: "auto", | |
location: "left", | |
grid: true | |
} | |
Bokeh.$("#display").bokeh("figure", { | |
options: options, | |
sources: { mydata: data }, | |
glyphs: [scatter], | |
guides: [xaxis, yaxis], | |
tools: ["Pan", "WheelZoom", "Resize", "Reset", "BoxZoom"] | |
}) | |