在 python 中实现带有散景的完整 3d 散点图
Implementing a full 3d scatter with bokeh in python
我目前正在做一个项目，我想使用 Bokeh 输出 3D 交互式散点图。我想根据 2 或 3 个类别给点着色，我想在悬停后显示与点对应的基因。我知道 Bokeh 没有完全实现 3D 图这一事实，我发现了以下脚本，它允许使用 python (original code).
生成这样的 3D 图
虽然原始代码生成了 3D 表面，但通过阅读 documentation 我已经设法生成了 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)
鉴于此，我理想化的项目输出应该是：
- 生成正确的工具提示，基因对应于值。
- 作为补充，在工具提示中添加点所属的类别（如果 1. 可以完成，我做这一个没有问题）。
- 以某种方式删除我不需要的颜色栏（图例）。将 showLegend 值设置为 false 时它不会消失。
提前致谢。
所以有两个小的调整来实现你想要的。
我认为最重要的是使用的visjs版本。
将 url 更改为 url = "https://visjs.github.io/vis-graph3d/standalone/umd/vis-graph3d.min.js"
其次，工具提示的函数声明应更改为：
tooltip: (point) -> return 'value: <b>' + point.z + '</b><br>' + 'extra: <b>' + point.data.extra
不是 coffeescript 用户，但这似乎更正了使用自定义工具提示的语法 html。
如果需要，这里是更新的示例。 （注意，这是针对散景版本 0.12.9）
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)
虽然不是最佳答案，但现在可以使用 plotly 获得完全实现的 3D 散点图。
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')
代码将生成一个 html 文件，并允许完全个性化。
我目前正在做一个项目，我想使用 Bokeh 输出 3D 交互式散点图。我想根据 2 或 3 个类别给点着色，我想在悬停后显示与点对应的基因。我知道 Bokeh 没有完全实现 3D 图这一事实，我发现了以下脚本，它允许使用 python (original code).
生成这样的 3D 图虽然原始代码生成了 3D 表面，但通过阅读 documentation 我已经设法生成了 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)
鉴于此，我理想化的项目输出应该是：
- 生成正确的工具提示，基因对应于值。
- 作为补充，在工具提示中添加点所属的类别（如果 1. 可以完成，我做这一个没有问题）。
- 以某种方式删除我不需要的颜色栏（图例）。将 showLegend 值设置为 false 时它不会消失。
提前致谢。
所以有两个小的调整来实现你想要的。
我认为最重要的是使用的visjs版本。
将 url 更改为 url = "https://visjs.github.io/vis-graph3d/standalone/umd/vis-graph3d.min.js"
其次，工具提示的函数声明应更改为：
tooltip: (point) -> return 'value: <b>' + point.z + '</b><br>' + 'extra: <b>' + point.data.extra
不是 coffeescript 用户，但这似乎更正了使用自定义工具提示的语法 html。
如果需要，这里是更新的示例。 （注意，这是针对散景版本 0.12.9）
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)
虽然不是最佳答案，但现在可以使用 plotly 获得完全实现的 3D 散点图。
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')
代码将生成一个 html 文件，并允许完全个性化。