[plotly] 티스토리/웹페이지에 반응형 그래프 올리기
티스토리에 글을 쓰다보니 반응형 그래프를 올려보고 싶어졌다. 컴알못+영알못이지만 구글을 열심히 뒤져서 힘들게 찾아낸 방법이다!
내가 그래프를 올리고자 한 티스토리 위주로 이번 글을 작성해보았는데 각자 잘 활용하시길 :)
Interactive한 데이터 시각화를 위해 Plotly를 사용해보았는데
Plotly : 온라인 개발, 데이터 분석 및 시각화 도구. Plotly는 Python, R, MATLAB, Perl, Julia, Arduino 및 REST에 대한 과학적 그래프 라이브러리 뿐만 아니라 개인 및 협업을 위한 온라인 그래프, 분석 및 통계 도구를 제공한다. (위키백과)
뭐.. 그렇다고 합니다..
우선 plotly.js를 넣어줘야하는데 두가지 방법이 있다.
1. <head></head>에 넣어주기
2. 포스팅할 글 상단에 넣어주기
1. <head></head>에 넣어주기
티스토리 관리자페이지 > 스킨편집 > html편집
이곳에서 <head></head> 사이에 plotly.js CDN 링크(아래)를 넣어준다. ↓
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
js파일을 직접 다운로드 해서 올리는 방법도 있었다. 근데 링크 올리는게 편한 것 같다.
혹시 모르니 js파일도 올려놓겠다.
(오른쪽 마우스 > 다른 이름으로 링크 저장)
이때는 <head></head>에 ↓를 입력해주면 된다.
<script src="plotly-latest.min.js"></script>
아주 쉽쥬?
plotly를 이용한 그래프를 자주 올릴 것 같으면 매번 스크립트를 넣어주기 귀찮으니 이 방법이 좋은 것 같다.
2. 포스팅할 글 상단에 넣어주기
티스토리 글쓰기 > 상단 기본모드 > HTML
일반적으로 글을 작성하는 기본모드말고 HTML에 ↓이 스크립트를 붙여넣으면 된다.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
1번 방법이 안된다거나 무언가 충돌이 있다면 이 방법을 쓰면 될 것 같다.
둘 중 하나의 방법으로 스크립트를 붙여넣으면 웹페이지에서 plotly를 사용할 준비가 끝난 것이다.
다음으로는 웹페이지에 올린 그래프를 준비해야한다. 이 또한 방법이 다양한 것 같은데 나는 python으로 plotly 그래프를 그렸다.
< Python으로 Plotly 그래프 그리기 >
데이터 : 네이버 데이터랩 '애플'&'삼성' 검색 결과 비교 (2020.01.17 ~ 2020.04.17)
import cufflinks as cf
plot = data.iplot(asFigure=True, xTitle='Date', yTitle='Keyword')
plot.to_json()
python으로 plotly 그래프를 그린 후 to_json()으로 그래프를 json형식으로 만들어준다.
'{"data":[{"line":{"color":"rgba(255, 153, 51, 1.0)","dash":"solid","shape":"linear","width":1.3},"mode":"lines","name":"\\uc560\\ud50c","text":"","type":"scatter","x":["2020-01-17","2020-01-18","2020-01-19","2020-01-20","2020-01-21","2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17"],"y":[16.95251,15.87548,16.10914,17.21105,17.07418,16.36146,16.586129999999997,15.419229999999999,18.92684,19.67343,20.97789,22.18489,22.733079999999998,20.80507,18.268729999999998,17.72814,17.87054,19.70385,19.657529999999998,19.70385,18.70355,18.78443,18.1837,18.52727,20.41242,19.8428,20.734560000000002,19.75431,18.44432,17.09215,17.583660000000002,19.59186,21.49083,19.91884,17.82907,16.33173,16.15338,15.83815,17.97147,19.45222,19.3188,19.11279,19.58287,17.898889999999998,19.20819,20.63571,22.21807,21.8821,21.176289999999998,20.40758,19.96585,19.37479,22.38191,23.37322,22.59621,22.56233,22.619020000000003,21.62079,22.589979999999997,26.20198,25.02609,33.48057,52.83048,31.356240000000003,24.269820000000003,22.3902,25.87361,24.90719,24.18825,24.42605,22.44274,20.89217,20.32255,23.45686,25.47543,26.55177,24.72815,28.149340000000002,27.487090000000002,23.4541,25.730520000000002,25.2314,23.68084,23.201079999999997,23.5253,21.423779999999997,21.22883,24.54081,25.63581,32.8432,100.0,43.383309999999994]},{"line":{"color":"rgba(55, 128, 191, 1.0)","dash":"solid","shape":"linear","width":1.3},"mode":"lines","name":"\\uc0bc\\uc131","text":"","type":"scatter","x":["2020-01-17","2020-01-18","2020-01-19","2020-01-20","2020-01-21","2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17"],"y":[7.5005,5.681019999999999,5.86698,10.65555,7.1997800000000005,6.71173,5.9347199999999996,4.88673,6.42761,5.974819999999999,6.95092,8.23741,9.142999999999999,8.24986,6.32254,5.64231,5.61466,7.044239999999999,6.616339999999999,6.856210000000001,6.35918,5.73148,5.49022,5.743930000000001,6.966130000000001,8.12335,44.74515,16.88891,12.79302,9.272269999999999,8.834,9.459610000000001,8.78422,8.60725,12.579410000000001,13.96406,7.612489999999999,6.4767,8.86787,8.567160000000001,17.046529999999997,17.57951,14.15555,8.93285,8.00099,12.595999999999998,9.83222,10.48272,10.715,12.76882,7.486669999999999,7.2779,17.11635,11.0959,12.54208,15.137179999999999,21.49982,9.547410000000001,8.807039999999999,13.42071,15.81741,16.0801,26.75708,18.971770000000003,12.876660000000001,10.142610000000001,21.99202,20.111710000000002,18.35445,14.91735,13.06677,9.24255,8.685369999999999,12.77712,12.25035,12.78265,10.74265,9.557780000000001,7.43275,6.906680000000001,10.98183,12.40105,9.743039999999999,9.794889999999999,9.64488,7.10162,7.1921800000000005,9.163739999999999,7.93394,6.19119,8.29133,9.08286]}],"layout":{"legend":{"bgcolor":"#F5F6F9","font":{"color":"#4D5663"}},"paper_bgcolor":"#F5F6F9","plot_bgcolor":"#F5F6F9","template":{"data":{"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5}},"type":"bar"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5}},"type":"barpolar"}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"choropleth":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"choropleth"}],"contour":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"contour"}],"contourcarpet":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"contourcarpet"}],"heatmap":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"heatmap"}],"heatmapgl":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"heatmapgl"}],"histogram":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"histogram"}],"histogram2d":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"histogram2d"}],"histogram2dcontour":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"histogram2dcontour"}],"mesh3d":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"mesh3d"}],"parcoords":[{"line":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"parcoords"}],"pie":[{"automargin":true,"type":"pie"}],"scatter":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatter"}],"scatter3d":[{"line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatter3d"}],"scattercarpet":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattercarpet"}],"scattergeo":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattergeo"}],"scattergl":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattergl"}],"scattermapbox":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattermapbox"}],"scatterpolar":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterpolar"}],"scatterpolargl":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterpolargl"}],"scatterternary":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterternary"}],"surface":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"surface"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}]},"layout":{"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]],"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]},"colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"geo":{"bgcolor":"white","lakecolor":"white","landcolor":"#E5ECF6","showlakes":true,"showland":true,"subunitcolor":"white"},"hoverlabel":{"align":"left"},"hovermode":"closest","mapbox":{"style":"light"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"bgcolor":"#E5ECF6","radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"ternary":{"aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"bgcolor":"#E5ECF6","caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"title":{"x":0.05},"xaxis":{"automargin":true,"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","zerolinewidth":2},"yaxis":{"automargin":true,"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","zerolinewidth":2}}},"title":{"font":{"color":"#4D5663"}},"xaxis":{"gridcolor":"#E1E5ED","showgrid":true,"tickfont":{"color":"#4D5663"},"title":{"font":{"color":"#4D5663"},"text":"Date"},"zerolinecolor":"#E1E5ED"},"yaxis":{"gridcolor":"#E1E5ED","showgrid":true,"tickfont":{"color":"#4D5663"},"title":{"font":{"color":"#4D5663"},"text":"Keyword"},"zerolinecolor":"#E1E5ED"}}}'
to_json()을 한 후 생성된 json을 티스토리에 올리기 전에 두가지 기본적인 사항이 있다.
1. 양 끝에 있는 작은 따옴표를 제거해준다.
2. 한글일 경우 "name": 변경해주기
소스의 맨 처음에는 내가 사용한 데이터(data)에 대해 나와있는데 두개의 라인 그래프이기 때문에 리스트에 두 개의 데이터가 들어있다. line에 대한 옵션이나 데이터 등은 python 코드로도 설정이 가능하다. 하지만 미쳐 설정하지 못했다거나 json에서 고치는게 더 편하다면 json에서 직접 고쳐도 된다.
만약 열 이름이 나처럼 한글이었다면 "name": 부분을 변경해주어야한다. 그렇지 않으면 한글이 제대로 나타나지 않는다.
첫번째 라인은 변경한 상태이고 두번째 라인이 변경하지 않은 모습이다.
이외에도 json 소스를 하나하나 뜯어서 나만의 스타일로 그래프를 만들 수 있다.
그 아래에는 template이라는 것이 있는데 여러 그래프들이 들어있다. 아마 이것을 활용해서 그래프를 만들라는 것 같은데,, 나중에 활용해봐야겠다!(아직 잘 모르겠음)
< 포스팅에 그래프 넣기 >
여튼 각자 작성한 json을 복사해서 아래 코드↓와 함께 티스토리 글에 붙여넣으면 된다. (기본모드말고 HTML 모드)
<div id="graph">
<script>
Plotly.plot('graph',
### 여기에 json 넣기 ###
, {});
</script>
</div>
아주 쉽고 깔끔하게 그래프가 불러와진다!
'정보수집' 카테고리의 다른 글
| [Hadoop] HDP 설치하기 & 실행하기 :: Hortonworks Data Platform (0) | 2021.01.15 |
|---|---|
| [R] 데이터 csv파일로 내보내기 / 저장하기 :: write.csv (0) | 2020.12.03 |
| [R] 내장 데이터 & 패키지 데이터 모음 (0) | 2020.09.06 |
| [R] 데이터 구조와 기본 (0) | 2020.07.21 |
| [ML] 앙상블(Ensemble) :: 배깅(Bagging) & 부스팅(Boosting) (0) | 2020.04.24 |
Comments