Plotly 그림을 블로그에 삽입(Embedding)시키기.

---

안녕하세요~ 꽁냥이에요.

 

Plotly는 시각화 특히 상호작용할 수 있는(Interactive) 시각화를 제공하는 강력한 라이브러리입니다. 여기서 상호작용할 수 있다는 말은 사용자가 버튼을 누르면 그에 따라서 시각화가 움직인다는 뜻입니다.

 

하지만 내가 만든 시각화 결과를 나만 이용한다면 사용자에게 Plotly의 강력한 기능을 제대로 공감시킬 수 없겠지요(자랑한다는 뜻은 아니고 Plotly가 정말 좋다는 것을 알린다는 취지).

 

따라서 Plotly를 이용하여 만든 시각화 결과를 블로그 같은 곳에 포스팅하여 사용자가 직접 체험할 수 있다면 Plotly의 유용함을 알고 많이 이용할 거예요.

 

이번 포스팅에서는 Plotly를 이용하여 만든 시각화 결과를 블로그에 포스팅하는 방법을 소개합니다.

 

1. chart studio 회원가입

2. chart studio 모듈 설치

3. 시각화 결과 준비

4. chart studio에 업로드

5. html 텍스트 가져오기 및 붙여넣기

 

LIST

---

   1. chart studio 회원가입

Plotly 시각화 결과를 삽입(Embedding)하는 것은 먼저 chart studio에 업로드 한 다음, 그 그림을 삽입할 블로그에 공유하는 방식으로 이루어집니다.

 

즉, chart studio가 제공하는 기능을 사용하는 것이지요.

 

따라서 chart studio에서 회원가입을 해야 합니다.

 

아래 사이트에 접속하여 회원가입을 먼저 해주세요.

 

https://chart-studio.plotly.com/

Plotly | Make charts and dashboards online

 

회원가입이 완료되었다면 (회원가입을 하기 위해 입력했던) 이메일로 인증메일이 발송됩니다. 반드시 인증해주세요.

---

   2. chart studio 모듈 설치

다음으로 chart studio 모듈을 설치할 차례입니다. 아래 코드를 통해 설치해주세요.

 

pip install chart_studio

 

---

   3. 시각화 결과 준비

이제 삽입할 그림(또는 시각화 결과)을 만들어야 됩니다. 꽁냥이는 지난 시간에 만들었던 모션 버블 차트를 이용할 거예요.

 

import pandas as pd
import plotly.express as px

data = pd.read_csv('./gapminder.csv')

fig = px.scatter(data,x="lifeExp", y="gdpPerCap",
                 animation_frame="year",animation_group="country",
                 size="population",color="continent",
                 hover_name="country", 
                 log_y=True, size_max=45, range_y=[200,150000], range_x=[10,100]
 )

fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 500

---

   4. chart studio에 업로드

이제 앞에서 만들어진 그림을 chart studio에 업로드해야 합니다. 업로드는 파이썬 코드를 통해 할 수 있습니다. 이를 위해 필요한 것이 있는데요. 아이디와 chart studio에서 제공하는 Key가 필요합니다.

 

아이디는 회원 가입할 때 사용한 아이디를 말하고요. Key를 얻는 방법은 다음과 같습니다.

 

1) 먼저 chart studio 사이트 우측 상단에 아이디를 클릭 -> Settings 클릭합니다.

2) 다음으로 좌측 탭에서 API Keys 클릭 -> Regenerate Key를 클릭-> 비밀번호 입력하면 Key가 생성됩니다.

 

이제 준비가 끝났습니다. chart_studio.tools.set_credentials_file을 이용하여 계정을 인증하고 py.plot을 이용하여 그림을 업로드합니다. py.plot에는 업로드할 그림(fig), 업로드 파일 이름(filename)을 입력합니다. 꽁냥이는 그림이 열린 상태로 블로그에 포스팅하기 위하여 auto_open을 True로 설정했습니다.

 

import chart_studio
import chart_studio.plotly as py
import chart_studio.tools as tls

username = 'username'
api_key = 'api_key'
chart_studio.tools.set_credentials_file(username=username, api_key=api_key)

py.plot(fig, filename='motion_bubble_chart', auto_open=True)

 

위 코드를 실행하면 아래와 같이 업로드 주소가 출력됩니다. 잘 기억해주세요.

 

실제로 chart studio에 제대로 업로드가 됐는지 확인해보겠습니다. 사이트 우측 상단에 아이디를 클릭 -> My Files 클릭합니다.

 

 

해당 경로로 들어가면 아래와 같이 시각화 결과가 제대로 업로드된 것을 알 수 있습니다. 이런식으로 자기가 만든 시각화 결과를 갤러리처럼 모을 수 있습니다.

 

---

   5. html 텍스트 가져오기 및 붙여넣기

이제 html 텍스트를 가져와서 블로그에 삽입해보도록 하겠습니다.

 

먼저 html 텍스트를 가져오는 방법은 2가지가 있는데요. 코딩을 이용한 방법과 chart studio 사이트를 이용하는 방법이 있습니다.

 

5.1 코딩을 이용한 방법

먼저 get_embed를 함수에 앞에서 출력한 url 주소를 입력한 후 코드를 실행합니다.

 

tls.get_embed('url')

 

 

처음과 마지막 홑따옴표를 제외하고 html 텍스트를 복사합니다.

5.2 chart studio 사이트를 이용하는 방법

1) 먼저 업로드 파일에 마우스를 갖다 댄 후 Viewer를 클릭합니다.

2) 다음으로 화면 아래쪽에 클립 모양(Sharing Link) 클릭 -> Embed 클릭 -> iframe 으로 시작하는 텍스트를 복사합니다.

 

5.3 블로그 삽입

이제 블로그에 삽입합니다. 삽입할 위치를 정한 다음 티스토리 에디터에서 더보기( · · · ) -> HTML블럭 클릭 -> 텍스트 붙여넣기를 합니다.

여기서는 티스토리를 기준으로 합니다만 다른 블로그에서도 비슷한 방법으로 할 수 있습니다.

 

위 과정이 끝나면 아래와 같이 앞에서 만들어준 시각화 결과가 삽입된 것을 알 수 있으며 재생 버튼을 누르면 움직이는 것도 확인할 수 있습니다.

 

 

---

이번 포스팅에서는 Plotly를 이용해 만든 시각화 그림을 블로그에 포스팅하는 방법을 알아보았습니다. 데이터 시각화 내용을 다루는 블로그 유저들에게 이 기능은 정말 유용하다고 생각해요. 

 

이상으로 포스팅 마치고 다음에도 좋은 내용으로 찾아뵙겠습니다. 안녕히 계세요.

 

---