파이썬에서 보케로 전체 3D 스 캐터 구현하기

Question

현재 Bokeh를 사용하여 3D 대화 형 분산 플롯을 출력하려는 ​​프로젝트를 진행 중입니다. 나는 2 개 또는 3 개의 카테고리에 기초하여 도트를 색칠하고 싶습니다. 그리고 그것을 점령 한 후 도트에 해당하는 유전자를 보여주고 싶습니다. Bokeh가 3D 플롯을 완벽하게 구현하지 못한다는 사실을 알고 있고 파이썬 (original code)과 같은 3D 플롯을 제작할 수있는 다음 스크립트를 발견했습니다.

원래 코드는 documentation을 읽음으로써 3D 표면을 생성하지만, 3D 플롯을 생성 할 수있었습니다. 나는 또한 범주에 따라 점들을 색칠했습니다. 그러나 파이썬 (또는 다른 어떤 것)의 '추가'변수에 정보가 인코딩되는 툴팁을 만들려고하면 그 정보를 생성 할 수 없습니다. 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://bokeh.pydata.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. 이 값에 대응하는 유전자, 올바른 툴팁을 생성합니다.
2. 보완 적으로, 점이 속한 카테고리를 툴팁에 추가하십시오 (1. 수행 할 수 있다면,이 작업을 수행하는 데 아무런 문제가 없습니다).
3. 아무튼, 내가 필요로하지 않는 컬러 바 (전설)를 제거하십시오. showLegend 값을 false로 설정하면 사라지지 않습니다.

감사합니다.

Answer 1

그래서 원하는 것을 얻기 위해 두 가지 작은 조정이 있습니다.

가장 중요한 점은 사용되는 visjs의 버전입니다.

변경 url = "http://visjs.org/dist/vis.js" 둘째

의 URL은 툴팁의 함수 선언은 변경되어야합니다

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

아니 커피 스크립트 사용자,하지만 사용자 지정 도구 설명 HTML을 사용하는 구문을 수정하는 것 .

다음은 필요한 경우 업데이트 된 예제입니다.

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 = "http://visjs.org/dist/vis.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://bokeh.pydata.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)