「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のコミュニティサイトです。