<p style="text-align: center;"><img class="alignnone size-large wp-image-2430" src="https://junn.in/wp-content/uploads/2018/02/스크린샷-2018-02-18-오후-11.01.30-1024x940.png" alt="" width="840" height="771" /><a href="https://mediteam.us/statistics.php"> https://mediteam.us/statistics.php</a></p>
&nbsp;

통계와 프로그래밍은 점차 '데이터 사이언스'라는 이름 하에 뗄래야 뗄수 없는 것 같습니다. 그리고 같은 데이터를 가지고도 인포그래픽스(시각화)를 어떻게 하느냐에 따라 완전히 다르게 받아드려질 수 있습니다.
<p style="text-align: center;"><img class="alignnone wp-image-2432 size-medium" src="https://junn.in/wp-content/uploads/2018/02/shutterstock_102147817-286x300.jpg" alt="" width="286" height="300" /></p>
<p style="text-align: center;">(인포그래픽스)</p>
&nbsp;

요새는 의대생들도 점차 프로그래밍에 관심을 갖는 것 같고, 제 모교에서는 본과 수업 중에 딥러닝에 대한 내용이 포함되기 시작했다고 합니다.
한 때, 의사로서 컴퓨터를 잘 안다는 것이 나름 강점으로 인식되었던 때가 있었는데, 잠깐 군대에 와있는 몇 년 사이에 엑셀을 잘 못다루던 동료들이 어느새 R을 활용해서 논문을 쓰고 있었습니다. 정체된다는 것이 참 무서운 시점입니다.

각설하고, 오늘은 최근 페이스북에서 광고로 보았던 D3.JS에 대해 잠깐 소개해보고자 합니다. 데이터 시각화에서 아주 훌륭한 기능을 갖고 있습니다. (사실 라이브러리가 나온지는 꽤 된 것 같습니다.  구글링을 해보니 2012년에도 꽤 많은 글들이 검색이 됩니다.)
이전에 R을 처음 접했을 때의 충격같은 느낌이랄까요. sql에 저장된 데이터를 바로 인터넷상에서 바로 시각화가 가능하니만큼, 활용도가 매우 높을 것으로 생각됩니다. js라고 붙은 것에서 알 수 있듯이 기본적으로 자바스크립트를 통해 개발이 가능합니다.

공식 주소는 https://d3js.org 입니다. 아래는 그 실제 예제들입니다. 이 것은 빙산의 일각이죠.

<img class="alignnone size-large wp-image-2429" src="https://junn.in/wp-content/uploads/2018/02/스크린샷-2018-02-18-오후-11.10.20-808x1024.png" alt="" width="808" height="1024" />

새로운 것은 한번 써봐야하는 법.

Mediteam.us의 자료를 이용해서 간단하게 예제를 조합해봤습니다.

주소 : <a href="https://mediteam.us/statistics.php" target="_blank" rel="noopener">https://mediteam.us/statistics.php</a>

몇줄만 수정해서 작성된 코드라 GitHub에 예제는 아직 올리지 않았습니다.

구성은 간단합니다.

<strong>SQL에서 자료를 받아서 &gt; CSV로 출력(JSON으로도 가능) &gt; JS파일에서 로딩 &gt; 출력</strong>

mediteam.us에서 언어별로 해당 저자가 쓴 분율을 보여주는 인포그래픽입니다.

<strong>Sunburst</strong> 라는 이름으로 예제는 다음과 같습니다.

<a href="https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8">https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8</a>

그리고 아래 달력은 한 칸이 해당 날짜로, 마우스를 대면 몇개의 글이 쓰였는지 보이게 해봤습니다.

<img class="alignnone size-large wp-image-2430" src="https://junn.in/wp-content/uploads/2018/02/스크린샷-2018-02-18-오후-11.01.30-1024x940.png" alt="" width="840" height="771" />

아래와 같습니다.

<img class="alignnone size-large wp-image-2431" src="https://junn.in/wp-content/uploads/2018/02/스크린샷-2018-02-18-오후-11.01.42.png" alt="" width="512" height="318" />

<strong>Calendar View</strong> 라는 이름으로 예제는 <a href="https://bl.ocks.org/mbostock/4063318">https://bl.ocks.org/mbostock/4063318</a> 에서 보시면 됩니다.

<hr />

D3.JS를 통해서 데이터 시각화에 많은 이점을 얻을 수 있을 것 같습니다.  웹을 통해 받아진 데이터(크롤링을 통해서든지)를 처리할 때 javascript, nodeJS에서 d3.js 를 이용해서 보여주면, 중간에 뭔가 다른 언어로 시각화 처리를 할 필요가 없게되어버리니까요. 아무래도 파이썬 처럼 플라스크나 장고를 이용하지 않고 가장 기본적으로 설치하는 아파치 서버로 돌릴 수 있다는 장점이 가장 큰 것 같습니다.

제가 처음 R을 접했던 2012년도 경 쯤에만 해도 뭔가 파이썬은 파이썬대로, R은 R대로의 강점이 있었던 것 같은데, 요새는 점점 한가지 언어만 잘 해도 모든 것은 구현할 수 있어지는 것 같습니다.


<hr/>

<개발 관련 글 목록>
| <center>No.</center> |  <center>Title</center> | <center>Author</center> | <center>Created</center> |
|:-------:|:-------:|:--------:|:-------:|
| <center>25</center> | [Make your Steemit Blog Post 업데이트 (이미지 제외 추가)](https://steemit.com/kr/@junn/make-your-steemit-blog-post) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-17</center> |
| <center>24</center> | [Make your Steemit Blog Post List / Introduction](https://steemit.com/steemit/@junn/make-your-steemit-blog-post-list-or-menual) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-13</center> |
| <center>23</center> | [Make your Steemit Blog Post List / 내 블로그 리스트 만들기 (예시 페이지)](https://steemit.com/kr-dev/@junn/make-your-steemit-blog-post-list-or) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-13</center> |
| <center>22</center> | [Steem 글을  HTML 및 HTML 소스로 보여주는 페이지를 만들었습니다.(Steem to HTML page, source code)](https://steemit.com/kr/@junn/steem-html-html-steem-to-html-page-source-code) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-10</center> |
| <center>21</center> | [Steem Markdown to HTML <업데이트> Table, Linebreak(줄바꿈) 및 기타 오류 문제](https://steemit.com/kr/@junn/steem-markdown-to-html-table-linebreak) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-09</center> |
| <center>20</center> | [[개발] Node & Steem - 6편 리스팀 알림 봇을 만들어볼까? #2 whitelist 데이터 수집](https://steemit.com/kr-dev/@nhj12311/node-and-steem-6-2-whitelist) | <center>[nhj12311](https://steemit.com/@nhj12311)</center> | <center>2018-02-09</center> |
| <center>19</center> | [맥(Mac)에서 이해하는 도커(Docker) #2. Hyperledger Sawtooth 연결까지](https://steemit.com/kr/@junn/mac-docker-2-hyperledger-sawtooth) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-08</center> |
| <center>18</center> | [# 4 - 머클트리(Merkle Tree) 및 머클루트(Merkle Root)에 관한 정의](https://steemit.com/kr/@yahweh87/4-merkle-tree-merkle-root) | <center>[yahweh87](https://steemit.com/@yahweh87)</center> | <center>2018-02-08</center> |
| <center>17</center> | [스팀커넥트2 강좌 :: OAuth Redirect 후 처리, 로그아웃](https://steemit.com/kr-dev/@morning/2-oauth-redirect) | <center>[morning](https://steemit.com/@morning)</center> | <center>2018-02-07</center> |
| <center>16</center> | [맥(Mac)에서 이해하는 도커(Docker) #1](https://steemit.com/kr/@junn/mac-docker-1) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-02-05</center> |
| <center>15</center> | [Hyperledger Sawtooth (private blockchain) 실습하기 #1. 맥북에서 Docker를 이용한 설치](https://steemit.com/kr/@junn/hyperledger-sawtooth-private-blockchain-1-docker) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-25</center> |
| <center>14</center> | [Hyperledger Sawtooth(private blockchain)의 합의 알고리즘 PoET에 대하여](https://steemit.com/kr/@junn/hyperledger-sawtooth-private-blockchain-poet) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-22</center> |
| <center>13</center> | [Hyperledger (Private blockchain), Composer(Fabric), Sawtooth 에 대하여](https://steemit.com/kr/@junn/hyperledger-private-blockchain-hyperledger-composer) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-15</center> |
| <center>12</center> | [[Git 활용하기 #2] Github와 Hexo를 통해 기술 블로그 만들기](https://steemit.com/kr-newbie/@stunstunstun/git-2-github-hexo-30) | <center>[stunstunstun](https://steemit.com/@stunstunstun)</center> | <center>2018-01-14</center> |
| <center>11</center> | [Mediteam.us 개발 - 워드프레스를 바깥(외부)에서 이용하기(PHP), 요약문(Excerpt)](https://steemit.com/kr/@junn/mediteam-us-php-excerpt) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-14</center> |
| <center>10</center> | [Mediteam.us 개발 - Python & Selenium을 이용한 구글검색 크롤링](https://steemit.com/kr/@junn/mediteam-us-python-and-selenium) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-13</center> |
| <center>9</center> | [Mediteam.us 개발 - 이 글은 어느 나라 말로 적혀있는 문서인가? (한글, 영어, 일본어 형태소 분석)](https://steemit.com/kr/@junn/mediteam-us) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-09</center> |
| <center>8</center> | [Steemit 포스트를  Naver 블로그로 보내기 #2 - 비출력 문자 에러 처리](https://steemit.com/kr/@junn/steemit-naver-2) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-08</center> |
| <center>7</center> | [Steemit 포스트를 OpenAPI로 Naver 블로그로 보내기(export) using PHP](https://steemit.com/kr/@junn/steemit-openapi-naver-export-using-php) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-07</center> |
| <center>6</center> | [Mediteam.us 개발 - Mecab (Python library)를 이용한 일본어, 한글 형태소 분석](https://steemit.com/kr/@junn/mediteam-us-mecab-python-library) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-05</center> |
| <center>5</center> | [Mediteam.us 개발 - nodeJS와 python 상호 간 통신(using python-shell, synchronize)](https://steemit.com/kr/@junn/mediteam-us-nodejs-python-using-python-shell-synchronize) | <center>[junn](https://steemit.com/@junn)</center> | <center>2018-01-03</center> |
| <center>4</center> | [[Python] Mediteam.us 개발 - 관련글 찾기 (TF-IDF, konlpy)](https://steemit.com/kr/@junn/python-mediteam-us-tf-idf-konlpy) | <center>[junn](https://steemit.com/@junn)</center> | <center>2017-12-31</center> |
| <center>3</center> | [[Python] CNN10 에서 특정 내용이 포함된 Script 찾기 (Crawling, 크롤링 예제)](https://steemit.com/kr/@junn/python-cnn10-script-crawling) | <center>[junn](https://steemit.com/@junn)</center> | <center>2017-12-29</center> |
| <center>2</center> | [Mediteam.us - Puppeteer 사용기](https://steemit.com/kr/@junn/mediteam-us-puppeteer) | <center>[junn](https://steemit.com/@junn)</center> | <center>2017-12-28</center> |
| <center>1</center> | [SteemJS API 타임아웃 해결 방법](https://steemit.com/kr/@asbear/steemjs-api) | <center>[asbear](https://steemit.com/@asbear)</center> | <center>2017-10-01</center> |