파이썬 그래프 그리기, 동적으로 움직이는 그래프 그리는 방법은?!

plotly와 dash는 쉽게 인터랙티브가 가능한 그래프를 만들 수 있어 유용합니다. 여러 가지 입력 요소들도 추가할 수 있습니다. dash가 plotly에 텍스트 박스나 슬라이더 등의 입력 요소를 넣기 편합니다. 하지만, plotly를 이용해서 그래프를 만들어야 하는 경우가 생겨 작업해 본 내용을 남겨두고자 삽니다. plotly그래프에 슬라이더를 넣고, 수정하는 방법에 대해서 알아보겠습니다.

 

 

plotly express문법을 사용하면, animation_frame에 칼럼명을 넣어서 쉽게 슬라이더바를 만들 수 있습니다. 하지만, 그리려는 그래프의 데이터를 매번 바꿔져야 하기 때문에 슬라이더를 별도로 넣기로 했습니다.

슬라이더는 아래와 같이 좌우로 값을 선택할 수 있는 긴 바입니다. 이 바를 움직이는 것에 따라 그래프가 변해야 합니다.

 

구조는 figure에 add_trade함수를 이용해서, 슬라이더의 값만큼 그래프를 추가해줍니다. 슬라이더를 옮길 때 나타나야 하는 그래프를 모두 그려서 figure에 넣어 놓는다고 생각하면 되겠습니다. 개별로 그래프를 추가해도 되고 아래와 같이 for문을 이용해서 넣어도 됩니다.

 

fig=go.Figure()
step_list = list(range(0,50))
add_number=854
fig.update_layout(yaxis=dict(dtick=1, autorange="reversed"))
for step in step_list:
    temp, y_tickvals, y_ticktext=lotto.get_number(step+add_number)
    temp["level_0"].loc[temp["level_0"]==0] = None
    fig.add_trace(
        go.Heatmap(x=temp["val"], y=temp["level_0"], z=temp["is"], zmid=0.5,
                    colorscale=[(0,"white"), (1,"blue")],
                    colorbar=dict(tickmode="array", tickvals=[0,1], ticktext=["","win"])))
    fig.update_layout(xaxis=dict(dtick=1,tick0=0.5,tickmode="array",
                      tickvals=x_tick_vals, ticktext=t, tickangle=0))

 

다음에는 슬라이더에 들어가야 하는 값을 리스트 자료형으로 만듭니다. 이 때 각각의 값에 원하는 문자나 스타일을 딕셔너리 형태로 넣어야 합니다. 그런데 이게 공식 튜토리얼에도 잘 정리되어 있지 않아 찾기가 애매합니다.

 

 

visible은 위에서 그린 그래프 중에서 몇 번째 그래프를 보여줘야 하는지 나타냅니다. 보여줘야 하는 그래프의 위치에 해당하는 값에는 True, 나머지는 False로 넣으면 됩니다. title.text에 값을 넣으면 그래프 위에 제목이 나타납니다. annotations.text는 어떤 값인지 확인을 하지 못했습니다. label은 슬라이더 바에 나타나는 값입니다.

 

steps=[]

for idx, i in enumerate(step_list):

    step=dict(

        method="update",

        args=[{"visible":[False]*len(step_list)},

              {"title.text":"{}~{}th".format((i+add_number-20),(i+add_number))},

              {"annotations.text":"External %d" % i}

             ],

        label="{}~{}th".format((i+add_number-20),(i+add_number))

    )

    step["args"][0]["visible"][idx]=True

    steps.append(step)

 

슬라이더에 들어가야 하는 값을 리스트 자료형으로 만들었으면, 한 번 더 리스트에 딕셔너리 자료형으로 필요한 내용들을 추가하여 설정하였습니다.

 

sliders=steps

sliders=[dict(active=10, currentvalue={"prefix":"game round:"}, steps=steps)]

 

마지막으로 update_layout함수를 이용하여 슬라이더를 추가하면 됩니다.

 

fig.update_layout(sliders=sliders)

 

plotly-그래프-슬라이더바-추가

 

슬라이더 값에 따라 y축이 변경되는 그래프를 그렸습니다. 그런데 처음에 그래프가 나타날 때 y축의 범위가 전체로 그래프가 그려집니다. 이를 수정하고자 했으나, 생각보다 쉽지는 않았습니다. 큰 문제는 아니어서 일단 두기로 했습니다. 오늘은 파이썬 그래프 그리기, 동적으로 움직이는 그래프 그리는 방법에 대해서 알아보았습니다.