[ 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}},"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> | |
| </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 = 76 | |
| 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: 731, | |
| 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"] | |
| }) |