I would like to do the equivalent of the following Python in stand-alone BokehJS
color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)
How do I do it? Where are the color mappers located in the javascript CDN files? They don't seem to be here, for example:
https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.7.js
and not here either:
https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.js
I am trying to follow examples like these:
https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example
Thanks in advance
After reading Bokeh docs and js source this seems to work with version 0.12.5
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
I did try to get some sane result in example below but without much success. Maybe you can improve this code further. This is based on python source from Updating color mapper in a bokeh plot with taptool Try to click on button "Add some data!" many times, more then 10.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.5.min.js"></script>
<title> by bokeh</title>
</head>
<body>
<div>
<div id="myplot" />
</div>
<button onclick="addPoint()">Add some data!</button>
<script type='text/javascript'>//<![CDATA[
// arrays to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] }
});
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300});
var pglyph = plot.patches({ field: "x" }, { field: "y" },
{ fill_color: { field: "humidity", transform: color_mapper}},
{ source: source, alpha: 1, line_width: 4})
var scatterData = plot.line({ field: "x" }, { field: "y" },
{ source: source, line_width: 10 });
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot, document.getElementById('myplot'));
function addPoint() {
// The data can be added, but generally all fields must be the
// same length.
source.data.x.push(Math.random() * 10.0);
source.data.y.push(Math.random() * 10.0);
// Also, the DataSource object must be notified when it has changed.
source.trigger('change');
}
//]]>
</script>
</body>
</html>