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

? ? ? ? ? ? dash_bio庫的安裝·

? ? ? 首先是安裝dash_bio庫，他的例程是基于python2.7的，不過python3應該也行，稍微改一下代碼即可。執行下列語句即可完成安裝。這其中沒遇到什么坑。

            
              pip install dash-bio==0.0.10
pip install dash_html_components 
            
          

? ? ? ? ? 運行DNA模型展示程序

執行下面的程序

            
              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環境上運行，需要把?import urllib2 as urlreq改為import urllib.request as urlreq即可，不過我沒親自試，理論上講應該沒問題。

? ? 過一會兒，服務器中加載完成后會出現以下揭示

? ? ?查看運行效果

打開http://127.0.0.1:8050/稍等一會load狀態過去

就可以看到動態的圖了

? ? ?孩子看起來非常感興趣，給他講解的過程我也連同復習了雙螺旋結構了。

? ?后記 ??

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

?

? ? 好了這也是個非常簡單的類庫介紹，可以深入研究生物數據結構，也能給孩子做個啟蒙：）好了祝各位程序員六一快樂！