如何在 javascript 中创建散景色彩映射器？

Question

我想在独立的 BokehJS

中执行与以下 Python 等效的操作

color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)

我该怎么做？ javascript CDN 文件中的颜色映射器在哪里？他们似乎不在这里，例如：

https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.7.js

也不在这里：

https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.js

我正在尝试遵循以下示例：

https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example

提前致谢

Answer 1

阅读 Bokeh 文档和 js 源代码后，这似乎适用于版本 0.12.5

var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});

我确实尝试在下面的示例中获得一些合理的结果，但没有取得太大成功。也许您可以进一步改进此代码。这是基于 python 来自 Updating color mapper in a bokeh plot with taptool 的来源尝试多次点击按钮 "Add some data!"，超过 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>

Answer 2

模型位于主 JS 文件中（至少对于 Bokeh 0.12.9）：https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.js

您可以使用以下代码在您的代码中获得 LogColorMapper：

Bokeh.require('models/mappers/log_color_mapper').LogColorMapper

如何在 javascript 中创建散景色彩映射器？

how to create a bokeh colormapper in javascript?

javascript

bokeh