Plotlyで加速度時刻歴の値と時刻をアニメートでトレースする

画像をクリックするとインタラクティブに操作できるページに移動します。

Plotlyでブラウザ上にインタラクティブなグラフを表示する」のプログラムに加速度値と時刻をアニメーションでトレースする機能を追加してみました。

同様の方法で、時刻歴だけでなく非線形部材のループ挙動やオービットなどもトレースできます。

import plotly.offline as offline
import plotly.graph_objs as go

import numpy as np

load_data = np.loadtxt('EL_CENTRO_NS.csv', delimiter=',', skiprows=1)

x = load_data[:, 0]
y = load_data[:, 1]

#y=np.arange(100)     
fig=go.Figure(data=[
    go.Scatter(x=x, y=y, mode='lines', line=dict(width=1, color="blue")),
    go.Scatter(x=x, y=y, mode='lines', line=dict(width=1, color="blue"))
])
fig.update_layout(title="EL_CENTRO_NS Animation",
                  title_x=0.5,
                  width=1200, height=600, 
                  xaxis_title='Time(sec)', 
                  yaxis_title='Acceleration(m/s/s)',
                  yaxis_range=(-4,4),
                  xaxis_range=(0,25), 
                  
                  updatemenus=[dict(buttons = [
                                               dict(
                                               args = [None, {"frame": {"duration": 2, 
                                                                        "redraw": False},
                                                              "fromcurrent": True, 
                                                              "transition": {"duration": 0}}],
                                               label = "START",
                                               method = "animate"),
                                               dict(
                                               args = [[None], {"frame": {"duration": 0, 
                                                                        "redraw": False},
                                                              "mode": "immediate", 
                                                              "transition": {"duration": 0}}],
                                               label = "STOP",
                                               method = "animate")
                                               ],
                                type='buttons',
                                showactive=False,
                                y=1.05,
                                x=0.0,
                                xanchor='left',
                                yanchor='bottom')])
                                          
                    
frames= [go.Frame(data=[go.Scatter(x=[x[i]], y=[y[i]], mode="markers", marker=dict(color="red", size=10) )]) for i in range(0, len(x))]
fig.update_xaxes(rangeslider={"visible":True})
fig.update(frames=frames)
fig.show()
fig.write_html("el_centro_ns_Animation.html")

参考にしたサイトはPlotlyのアニメーション機能の説明サイトPlotlyのコミュニティサイトです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA