Javascript 用python中的bokeh实现完整的3d散点

我目前正在做一个项目，我想用Bokeh输出一个3D交互式散点图。我想根据2或3个类别给圆点上色，我想在鼠标悬停后显示对应于圆点的基因。我知道Bokeh没有完全实现3D绘图，我发现了下面的脚本，它允许使用python（）生成这样的3D绘图

虽然最初的代码生成了一个3D曲面，但通过一些阅读，我已经成功地生成了一个3D绘图。我还根据类别给点上色。但是，当我尝试生成工具提示时，其信息将被编码在python（或任何其他）中的“extra”变量中，我无法生成该信息。我不了解JS，所以我只是尝试调整变量，看看会发生什么

我产生的代码如下：

from __future__ import division
from bokeh.core.properties import Instance, String
from bokeh.models import ColumnDataSource, LayoutDOM
from bokeh.io import show
import numpy as np


JS_CODE = """
# This file contains the JavaScript (CoffeeScript) implementation
# for a Bokeh custom extension. The "surface3d.py" contains the
# python counterpart.
#
# This custom model wraps one part of the third-party vis.js library:
#
#     http://visjs.org/index.html
#
# Making it easy to hook up python data analytics tools (NumPy, SciPy,
# Pandas, etc.) to web presentations using the Bokeh server.

# These "require" lines are similar to python "import" statements
import * as p from "core/properties"
import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"

# This defines some default options for the Graph3d feature of vis.js
# See: http://visjs.org/graph3d_examples.html for more details.
OPTIONS =
  width:  '700px'
  height: '700px'
  style: 'dot-color'
  showPerspective: true
  showGrid: true
  keepAspectRatio: true
  verticalRatio: 1.0
  showLegend: false
  cameraPosition:
    horizontal: -0.35
    vertical: 0.22
    distance: 1.8

  dotSizeRatio: 0.01

  tooltip: true    #(point) -> return 'value: <b>' + point.z + '</b><br>' + point.data.extra




# To create custom model extensions that will render on to the HTML canvas
# or into the DOM, we must create a View subclass for the model. Currently
# Bokeh models and views are based on BackBone. More information about
# using Backbone can be found here:
#
#     http://backbonejs.org/
#
# In this case we will subclass from the existing BokehJS ``LayoutDOMView``,
# corresponding to our
export class Surface3dView extends LayoutDOMView

  initialize: (options) ->
    super(options)

    url = "https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"

    script = document.createElement('script')
    script.src = url
    script.async = false
    script.onreadystatechange = script.onload = () => @_init()
    document.querySelector("head").appendChild(script)

  _init: () ->
    # Create a new Graph3s using the vis.js API. This assumes the vis.js has
    # already been loaded (e.g. in a custom app template). In the future Bokeh
    # models will be able to specify and load external scripts automatically.
    #
    # Backbone Views create <div> elements by default, accessible as @el. Many
    # Bokeh views ignore this default <div>, and instead do things like draw
    # to the HTML canvas. In this case though, we use the <div> to attach a
    # Graph3d to the DOM.
    @_graph = new vis.Graph3d(@el, @get_data(), OPTIONS)

    # Set Backbone listener so that when the Bokeh data source has a change
    # event, we can process the new data
    @connect(@model.data_source.change, () =>
        @_graph.setData(@get_data())
    )

  # This is the callback executed when the Bokeh data has an change. Its basic
  # function is to adapt the Bokeh data source to the vis.js DataSet format.
  get_data: () ->
    data = new vis.DataSet()
    source = @model.data_source
    for i in [0...source.get_length()]
      data.add({
        x:     source.get_column(@model.x)[i]
        y:     source.get_column(@model.y)[i]
        z:     source.get_column(@model.z)[i]
        extra: source.get_column(@model.extra)[i]
        style: source.get_column(@model.color)[i]
      })
    return data

# We must also create a corresponding JavaScript Backbone model sublcass to
# correspond to the python Bokeh model subclass. In this case, since we want
# an element that can position itself in the DOM according to a Bokeh layout,
# we subclass from ``LayoutDOM``
export class Surface3d extends LayoutDOM

  # This is usually boilerplate. In some cases there may not be a view.
  default_view: Surface3dView

  # The ``type`` class attribute should generally match exactly the name
  # of the corresponding Python class.
  type: "Surface3d"

  # The @define block adds corresponding "properties" to the JS model. These
  # should basically line up 1-1 with the Python model class. Most property
  # types have counterparts, e.g. ``bokeh.core.properties.String`` will be
  # ``p.String`` in the JS implementatin. Where the JS type system is not yet
  # as rich, you can use ``p.Any`` as a "wildcard" property type.
  @define {
    x:           [ p.String           ]
    y:           [ p.String           ]
    z:           [ p.String           ]
    color:       [ p.String           ]
    extra:        [ p.String           ]
    data_source: [ p.Instance         ]
  }
"""

# This custom extension model will have a DOM view that should layout-able in
# Bokeh layouts, so use ``LayoutDOM`` as the base class. If you wanted to create
# a custom tool, you could inherit from ``Tool``, or from ``Glyph`` if you
# wanted to create a custom glyph, etc.
class Surface3d(LayoutDOM):

    # The special class attribute ``__implementation__`` should contain a string
    # of JavaScript (or CoffeeScript) code that implements the JavaScript side
    # of the custom extension model.
    __implementation__ = JS_CODE

    # Below are all the "properties" for this model. Bokeh properties are
    # class attributes that define the fields (and their types) that can be
    # communicated automatically between Python and the browser. Properties
    # also support type validation. More information about properties in
    # can be found here:
    #
    #    https://docs.bokeh.org/en/latest/docs/reference/core.html#bokeh-core-properties

    # This is a Bokeh ColumnDataSource that can be updated in the Bokeh
    # server by Python code
    data_source = Instance(ColumnDataSource)

    # The vis.js library that we are wrapping expects data for x, y, z, and
    # color. The data will actually be stored in the ColumnDataSource, but
    # these properties let us specify the *name* of the column that should
    # be used for each field.
    x = String
    y = String
    z = String
    extra = String
    color = String




X_data = np.random.normal(0,10,100)
Y_data = np.random.normal(0,5,100)
Z_data = np.random.normal(0,3,100)
color = np.asarray([0 for x in range(50)]+[1 for x in range(50)])
extra = np.asarray(['a' for x in range(50)]+['b' for x in range(50)])


source = ColumnDataSource(data=dict(x=X_data, y=Y_data, z=Z_data, color = color, extra=extra))

surface = Surface3d(x="x", y="y", z="z", extra="extra", color="color", data_source=source)

show(surface)

来自未来进口部的

从bokeh.core.properties导入实例，字符串
从bokeh.models导入ColumnDataSource、LayoutDOM
来自bokeh.io导入展
将numpy作为np导入
JS_代码=”“”
#此文件包含JavaScript（CoffeeScript）实现
#对于Bokeh自定义扩展，“surface3d.py”包含
#python对应物。
#
#此自定义模型封装了第三方vis.js库的一部分：
#
#     http://visjs.org/index.html
#
#使python数据分析工具（NumPy、SciPy、，
#使用Bokeh服务器进行web演示。
#这些“require”行类似于python的“import”语句
从“核心/属性”导入*作为p
从“模型/布局/布局”导入{LayoutDOM，LayoutDOMView}
#这为vis.js的Graph3d特性定义了一些默认选项
#见：http://visjs.org/graph3d_examples.html 更多细节。
选择权=
宽度：“700px”
高度：“700px”
样式：“点颜色”
showPerspective：正确
showGrid：对
keepasspectratio:true
垂直比：1.0
showLegend:错误
摄像机位置：
水平：-0.35
垂直线：0.22
距离：1.8
dotSizeRatio:0.01
工具提示：true#（point）->返回'value:'+point.z+'
'+point.data.extra
#创建将在HTML画布上呈现的自定义模型扩展
#或者进入DOM，我们必须为模型创建一个视图子类
#Bokeh模型和视图基于主干
#使用主干可以在以下位置找到：
#
#     http://backbonejs.org/
#
#在本例中，我们将从现有的BokehJS``LayoutDOMView``中创建子类，
#与我们的
导出类Surface3dView扩展了LayoutDOMView
初始化：（选项）->
超级（选项）
url=”https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"
script=document.createElement（'script'）
script.src=url
script.async=false
script.onreadystatechange=script.onload=（）=>@_init（）
document.querySelector（“head”）.appendChild（脚本）
_初始化：（）->
#使用vis.js API创建一个新的Graph3s
#已加载（例如，在自定义应用程序模板中）。将来
#模型将能够自动指定和加载外部脚本。
#
#主干视图默认创建元素，可作为@el.Many访问
#Bokeh视图忽略此默认值，而是执行类似于绘制的操作
#在本例中，我们使用
#图形3d到DOM。
@_graph=new vis.Graph3d（@el，@get_data（），OPTIONS）
#设置主干侦听器，以便在Bokeh数据源发生更改时
#事件，我们可以处理新数据
@连接（@model.data_source.change，（）=>
@_graph.setData（@get_data（））
)
#这是Bokeh数据发生更改时执行的回调
#功能是使Bokeh数据源适应vis.js数据集格式。
获取_数据：（）->
数据=新的vis.DataSet（）
source=@model.data\u source
对于[0…source.get_length（）]中的i
data.add({
x:source.get_列（@model.x）[i]
y:source.get_列（@model.y）[i]
z:source.get_列（@model.z）[i]
额外：source.get_列（@model.extra）[i]
样式：source.get_列（@model.color）[i]
})
返回数据
#我们还必须创建一个相应的JavaScript主干模型子类来
#对应于python Bokeh模型子类
#可以根据Bokeh布局在DOM中定位自身的元素，
#我们从``LayoutDOM中创建子类``
导出类Surface3d扩展了LayoutDOM
#这通常是样板。在某些情况下可能没有视图。
默认视图：Surface3dView
#“`type``类属性通常应该与名称完全匹配
#对应Python类的。
类型：“Surface3d”
#@define块将相应的“属性”添加到JS模型中
#基本上应该与Python模型类1-1对齐
#类型有对应的类型，例如，`bokeh.core.properties.String``将
#JS实现中的`p.String`，其中JS类型系统尚未
#作为富属性，您可以使用``p.Any``作为“通配符”属性类型。
@定义{
x:[p.字符串]
y:[p.字符串]
z:[p.字符串]
颜色：[p.字符串]
额外：[p.字符串]
数据来源：[p.实例]
}
"""
#此自定义扩展模型将具有一个DOM视图，该视图应可在中进行布局
#Bokeh布局，因此使用``LayoutDOM``作为基类。如果你想创造
#自定义工具，您可以从``tool``继承，或者从``Glyph``继承，如果您
#想要创建一个自定义字形等。
类Surface3d（LayoutDOM）：
#特殊类属性```实现``应该包含一个字符串
#实现JavaScript端的JavaScript（或CoffeeScript）代码
#自定义扩展模型的。
__实现=JS\u代码
#下面是所有的
tooltip: (point) -> return 'value: <b>' + point.z + '</b><br>' + 'extra: <b>' + point.data.extra

from __future__ import division
from bokeh.core.properties import Instance, String
from bokeh.models import ColumnDataSource, LayoutDOM
from bokeh.io import show
import numpy as np


JS_CODE = """
# This file contains the JavaScript (CoffeeScript) implementation
# for a Bokeh custom extension. The "surface3d.py" contains the
# python counterpart.
#
# This custom model wraps one part of the third-party vis.js library:
#
#     http://visjs.org/index.html
#
# Making it easy to hook up python data analytics tools (NumPy, SciPy,
# Pandas, etc.) to web presentations using the Bokeh server.

# These "require" lines are similar to python "import" statements
import * as p from "core/properties"
import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"

# This defines some default options for the Graph3d feature of vis.js
# See: http://visjs.org/graph3d_examples.html for more details.
OPTIONS =
  width:  '700px'
  height: '700px'
  style: 'dot-color'
  showPerspective: true
  showGrid: true
  keepAspectRatio: true
  verticalRatio: 1.0
  showLegend: false
  cameraPosition:
    horizontal: -0.35
    vertical: 0.22
    distance: 1.8
  dotSizeRatio: 0.01
  tooltip: (point) -> return 'value: <b>' + point.z + '</b><br>' + 'extra: <b>' + point.data.extra




# To create custom model extensions that will render on to the HTML canvas
# or into the DOM, we must create a View subclass for the model. Currently
# Bokeh models and views are based on BackBone. More information about
# using Backbone can be found here:
#
#     http://backbonejs.org/
#
# In this case we will subclass from the existing BokehJS ``LayoutDOMView``,
# corresponding to our
export class Surface3dView extends LayoutDOMView

  initialize: (options) ->
    super(options)

    url = "https://visjs.github.io/vis-graph3d/standalone/umd/vis-graph3d.min.js"

    script = document.createElement('script')
    script.src = url
    script.async = false
    script.onreadystatechange = script.onload = () => @_init()
    document.querySelector("head").appendChild(script)

  _init: () ->
    # Create a new Graph3s using the vis.js API. This assumes the vis.js has
    # already been loaded (e.g. in a custom app template). In the future Bokeh
    # models will be able to specify and load external scripts automatically.
    #
    # Backbone Views create <div> elements by default, accessible as @el. Many
    # Bokeh views ignore this default <div>, and instead do things like draw
    # to the HTML canvas. In this case though, we use the <div> to attach a
    # Graph3d to the DOM.
    @_graph = new vis.Graph3d(@el, @get_data(), OPTIONS)

    # Set Backbone listener so that when the Bokeh data source has a change
    # event, we can process the new data
    @connect(@model.data_source.change, () =>
        @_graph.setData(@get_data())
    )

  # This is the callback executed when the Bokeh data has an change. Its basic
  # function is to adapt the Bokeh data source to the vis.js DataSet format.
  get_data: () ->
    data = new vis.DataSet()
    source = @model.data_source
    for i in [0...source.get_length()]
      data.add({
        x:     source.get_column(@model.x)[i]
        y:     source.get_column(@model.y)[i]
        z:     source.get_column(@model.z)[i]
        extra: source.get_column(@model.extra)[i]
        style: source.get_column(@model.color)[i]
      })
    return data

# We must also create a corresponding JavaScript Backbone model sublcass to
# correspond to the python Bokeh model subclass. In this case, since we want
# an element that can position itself in the DOM according to a Bokeh layout,
# we subclass from ``LayoutDOM``
export class Surface3d extends LayoutDOM

  # This is usually boilerplate. In some cases there may not be a view.
  default_view: Surface3dView

  # The ``type`` class attribute should generally match exactly the name
  # of the corresponding Python class.
  type: "Surface3d"

  # The @define block adds corresponding "properties" to the JS model. These
  # should basically line up 1-1 with the Python model class. Most property
  # types have counterparts, e.g. ``bokeh.core.properties.String`` will be
  # ``p.String`` in the JS implementatin. Where the JS type system is not yet
  # as rich, you can use ``p.Any`` as a "wildcard" property type.
  @define {
    x:           [ p.String           ]
    y:           [ p.String           ]
    z:           [ p.String           ]
    color:       [ p.String           ]
    extra:       [ p.String           ]
    data_source: [ p.Instance         ]
  }
"""

# This custom extension model will have a DOM view that should layout-able in
# Bokeh layouts, so use ``LayoutDOM`` as the base class. If you wanted to create
# a custom tool, you could inherit from ``Tool``, or from ``Glyph`` if you
# wanted to create a custom glyph, etc.
class Surface3d(LayoutDOM):

    # The special class attribute ``__implementation__`` should contain a string
    # of JavaScript (or CoffeeScript) code that implements the JavaScript side
    # of the custom extension model.
    __implementation__ = JS_CODE

    # Below are all the "properties" for this model. Bokeh properties are
    # class attributes that define the fields (and their types) that can be
    # communicated automatically between Python and the browser. Properties
    # also support type validation. More information about properties in
    # can be found here:
    #
    #    https://docs.bokeh.org/en/latest/docs/reference/core.html#bokeh-core-properties

    # This is a Bokeh ColumnDataSource that can be updated in the Bokeh
    # server by Python code
    data_source = Instance(ColumnDataSource)

    # The vis.js library that we are wrapping expects data for x, y, z, and
    # color. The data will actually be stored in the ColumnDataSource, but
    # these properties let us specify the *name* of the column that should
    # be used for each field.
    x = String
    y = String
    z = String
    extra = String
    color = String




X_data = np.random.normal(0,10,100)
Y_data = np.random.normal(0,5,100)
Z_data = np.random.normal(0,3,100)
color = np.asarray([0 for x in range(50)]+[1 for x in range(50)])
extra = np.asarray(['a' for x in range(50)]+['b' for x in range(50)])


source = ColumnDataSource(data=dict(x=X_data, y=Y_data, z=Z_data, color = color, extra=extra))

surface = Surface3d(x="x", y="y", z="z", extra="extra", color="color", data_source=source)

show(surface)

import plotly.plotly as py
import plotly.graph_objs as go

import numpy as np

x, y, z = np.random.multivariate_normal(np.array([0,0,0]), np.eye(3), 200).transpose()
trace1 = go.Scatter3d(
    x=x,
    y=y,
    z=z,
    mode='markers',
    marker=dict(
        size=12,
        line=dict(
            color='rgba(217, 217, 217, 0.14)',
            width=0.5
        ),
        opacity=0.8
    )
)

x2, y2, z2 = np.random.multivariate_normal(np.array([0,0,0]), np.eye(3), 200).transpose()
trace2 = go.Scatter3d(
    x=x2,
    y=y2,
    z=z2,
    mode='markers',
    marker=dict(
        color='rgb(127, 127, 127)',
        size=12,
        symbol='circle',
        line=dict(
            color='rgb(204, 204, 204)',
            width=1
        ),
        opacity=0.9
    )
)
data = [trace1, trace2]
layout = go.Layout(
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0
    )
)
fig = go.Figure(data=data, layout=layout)
py.plot(fig, filename='simple-3d-scatter')