? ? 這個(gè)周末是六一，筆者分享一下給孩子做的一個(gè)小程序，這樣的例子需要有趣、簡(jiǎn)單有動(dòng)畫效果，所以我就用python的dash_bio給孩子展示了DNA的分子結(jié)構(gòu)，效果不錯(cuò)：）

? ? ? ? ? ? dash_bio庫(kù)的安裝·

? ? ? 首先是安裝dash_bio庫(kù)，他的例程是基于python2.7的，不過(guò)python3應(yīng)該也行，稍微改一下代碼即可。執(zhí)行下列語(yǔ)句即可完成安裝。這其中沒(méi)遇到什么坑。

            
              pip install dash-bio==0.0.10
pip install dash_html_components 
            
          

? ? ? ? ? 運(yùn)行DNA模型展示程序

執(zhí)行下面的程序

            
              import json
import urllib2 as urlreq

import dash
import dash_bio as dashbio
import dash_html_components as html


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/model_data.js').read()
styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/styles_data.js').read()
model_data = json.loads(model_data)
styles_data = json.loads(styles_data)
dashbio.Molecule3dViewer(
    styles=styles_data,
    modelData=model_data,
    selectionType='Chain'
)
app.layout = html.Div([
    dashbio.Molecule3dViewer(
        id='my-dashbio-molecule3d',
        styles=styles_data,
        modelData=model_data
    ),
    "Selection data",
    html.Hr(),
    html.Div(id='molecule3d-output')
])


@app.callback(
    dash.dependencies.Output('molecule3d-output', 'children'),
    [dash.dependencies.Input('my-dashbio-molecule3d', 'selectedAtomIds')]
)
def show_selected_atoms(atom_ids):
    if atom_ids is None or len(atom_ids) == 0:
        return 'No atoms have been selected. Click somewhere on the molecular structure to select an atom.'
    return [html.Div([
        html.Div('Element: {}'.format(model_data['atoms'][atm]['element'])),
        html.Div('Chain: {}'.format(model_data['atoms'][atm]['chain'])),
        html.Div('Residue name: {}'.format(model_data['atoms'][atm]['residue_name'])),
        html.Br()
    ]) for atm in atom_ids]


if __name__ == '__main__':
    app.run_server(debug=True)
            
          

? ? ? 如果是在python3環(huán)境上運(yùn)行，需要把?import urllib2 as urlreq改為import urllib.request as urlreq即可，不過(guò)我沒(méi)親自試，理論上講應(yīng)該沒(méi)問(wèn)題。

? ? 過(guò)一會(huì)兒，服務(wù)器中加載完成后會(huì)出現(xiàn)以下揭示

? ? ?查看運(yùn)行效果

打開http://127.0.0.1:8050/稍等一會(huì)load狀態(tài)過(guò)去

就可以看到動(dòng)態(tài)的圖了

? ? ?孩子看起來(lái)非常感興趣，給他講解的過(guò)程我也連同復(fù)習(xí)了雙螺旋結(jié)構(gòu)了。

? ?后記 ??

? ? ?如果不想自己搭python運(yùn)行也可以直接用官方的demo:https://dash-bio.plotly.host/Portal/,而且這個(gè)庫(kù)所帶的數(shù)據(jù)應(yīng)該都非常有價(jià)值，后面我也要再研究一下。

?

? ? 好了這也是個(gè)非常簡(jiǎn)單的類庫(kù)介紹，可以深入研究生物數(shù)據(jù)結(jié)構(gòu)，也能給孩子做個(gè)啟蒙：）好了祝各位程序員六一快樂(lè)！