Plotly - 티스토리에 상호작용 그래프 가져오기

저는 평소에 matplotlib을 자주 사용합니다 .쉽고 빠르지만 가끔 뭔가 부족하다는 생각이 듭니다.

matplotlib은 그림의 확장이나 변형이 불가능합니다. 상호작용하는 그래프 오브젝트가 아닌 그림을 그려주는 라이브러리이기 때문입니다. 스케일을 바꾸거나 보는 방향을 바꾸는 등의 상호작용이 불가능합니다.

 

Plotly를 사용하면 상호작용이 가능한 그래프를 만들 수 있습니다. plotly는 파이썬 뿐만 아니라 javascript으로도 사용가능합니다. 이 기능을 활용하면 python에서 그린 그래프를 웹페이지로 들고오는 것도 가능합니다. (혹은 javascript에서 직접 그릴 수도 있습니다. )

 

마우스호버링, 확대 축소, 방향 전환 등의 여러가지 상호작용이 가능합니다.

 

간단하게 만든 iris 그래프를 티스토리에서 열어보겠습니다.

 

 

 

마우스를 이용해서 움직일 수 있습니다.

간단한 그래프 (산점도, 선 그래프, 막대그래프, 3d 그래프) 그리는법과 제일 마지막에는 티스토리에 연동하는 법까지 하겠습니다.

 

산점도 그리기

 

scatter method에 x와 y의 배열을 넣으면 산점도를 만들어줍니다.   

import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.show()

 

데이터프레임을 사용해서도 만들 수 있습니다. x와  y에 column 이름을 기입하면 됩니다.

df = px.data.iris() # iris is a pandas DataFrame
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()

 

 

 

 

 

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
                 size='petal_length', hover_data=['petal_width'])
fig.show()

 

 

 

 

 

scatter 함수 이외에 histogram, line, bar 등 다양한 함수를 사용해서 그릴 수 있습니다.

 

JSON으로 반환 후 티스토리로 가져오기.

 

import plotly
graph_json=plotly.io.to_json(fig)
print(graph_json)

 

다음과 같이 매우 간단하게 그래프를 json으로 가져올 수 있습니다. write_json을 사용하면 파일로도 저장 가능합니다.

 

JSON을 티스토리에 적용하기

티스토리에서 HTML편집을 켜고 다음과 같이 작성합니다. 복사한 JSON을 넣어주면 됩니다.

JSON은 길기 때문에 만약 본인의 서버가 있다면 fetch해서 오는 것도 좋을 것 같습니다.

<div id="pyplotDiv" sytle="width : 800px; height: 600px;"></div>
<script>
 const figure = JSON.parse('복사한 JSON');
 Plotly.newPlot('pyplotDiv', figure.data, figuree.layout || {});
</script>

 

 

스크립트 가져오기

이제 plotly js를 긁어올 차례입니다. 티스토리 관리- 꾸미기-스킨 편집-html 편집에서 스크립트 사이에 다음 한 줄을 추가하면 됩니다.

 

<script src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>

  

 

 

https://plotly.com/python/