https://mediteam.us/statistics.php
통계와 프로그래밍은 점차 '데이터 사이언스'라는 이름 하에 뗄래야 뗄수 없는 것 같습니다. 그리고 같은 데이터를 가지고도 인포그래픽스(시각화)를 어떻게 하느냐에 따라 완전히 다르게 받아드려질 수 있습니다.
(인포그래픽스)
요새는 의대생들도 점차 프로그래밍에 관심을 갖는 것 같고, 제 모교에서는 본과 수업 중에 딥러닝에 대한 내용이 포함되기 시작했다고 합니다.
한 때, 의사로서 컴퓨터를 잘 안다는 것이 나름 강점으로 인식되었던 때가 있었는데, 잠깐 군대에 와있는 몇 년 사이에 엑셀을 잘 못다루던 동료들이 어느새 R을 활용해서 논문을 쓰고 있었습니다. 정체된다는 것이 참 무서운 시점입니다.
각설하고, 오늘은 최근 페이스북에서 광고로 보았던 D3.JS에 대해 잠깐 소개해보고자 합니다. 데이터 시각화에서 아주 훌륭한 기능을 갖고 있습니다. (사실 라이브러리가 나온지는 꽤 된 것 같습니다. 구글링을 해보니 2012년에도 꽤 많은 글들이 검색이 됩니다.)
이전에 R을 처음 접했을 때의 충격같은 느낌이랄까요. sql에 저장된 데이터를 바로 인터넷상에서 바로 시각화가 가능하니만큼, 활용도가 매우 높을 것으로 생각됩니다. js라고 붙은 것에서 알 수 있듯이 기본적으로 자바스크립트를 통해 개발이 가능합니다.
공식 주소는 https://d3js.org 입니다. 아래는 그 실제 예제들입니다. 이 것은 빙산의 일각이죠.
새로운 것은 한번 써봐야하는 법.
Mediteam.us의 자료를 이용해서 간단하게 예제를 조합해봤습니다.
주소 : https://mediteam.us/statistics.php
몇줄만 수정해서 작성된 코드라 GitHub에 예제는 아직 올리지 않았습니다.
구성은 간단합니다.
SQL에서 자료를 받아서 > CSV로 출력(JSON으로도 가능) > JS파일에서 로딩 > 출력
mediteam.us에서 언어별로 해당 저자가 쓴 분율을 보여주는 인포그래픽입니다.
Sunburst 라는 이름으로 예제는 다음과 같습니다.
https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8
그리고 아래 달력은 한 칸이 해당 날짜로, 마우스를 대면 몇개의 글이 쓰였는지 보이게 해봤습니다.
아래와 같습니다.
Calendar View 라는 이름으로 예제는 https://bl.ocks.org/mbostock/4063318 에서 보시면 됩니다.
D3.JS를 통해서 데이터 시각화에 많은 이점을 얻을 수 있을 것 같습니다. 웹을 통해 받아진 데이터(크롤링을 통해서든지)를 처리할 때 javascript, nodeJS에서 d3.js 를 이용해서 보여주면, 중간에 뭔가 다른 언어로 시각화 처리를 할 필요가 없게되어버리니까요. 아무래도 파이썬 처럼 플라스크나 장고를 이용하지 않고 가장 기본적으로 설치하는 아파치 서버로 돌릴 수 있다는 장점이 가장 큰 것 같습니다.
제가 처음 R을 접했던 2012년도 경 쯤에만 해도 뭔가 파이썬은 파이썬대로, R은 R대로의 강점이 있었던 것 같은데, 요새는 점점 한가지 언어만 잘 해도 모든 것은 구현할 수 있어지는 것 같습니다.
<개발 관련 글 목록>
| No. | Title | Author | Created |
|---|
| 25 | Make your Steemit Blog Post 업데이트 (이미지 제외 추가) | junn | 2018-02-17 |
| 24 | Make your Steemit Blog Post List / Introduction | junn | 2018-02-13 |
| 23 | Make your Steemit Blog Post List / 내 블로그 리스트 만들기 (예시 페이지) | junn | 2018-02-13 |
| 22 | Steem 글을 HTML 및 HTML 소스로 보여주는 페이지를 만들었습니다.(Steem to HTML page, source code) | junn | 2018-02-10 |
| 21 | Steem Markdown to HTML <업데이트> Table, Linebreak(줄바꿈) 및 기타 오류 문제 | junn | 2018-02-09 |
| 20 | [개발] Node & Steem - 6편 리스팀 알림 봇을 만들어볼까? #2 whitelist 데이터 수집 | nhj12311 | 2018-02-09 |
| 19 | 맥(Mac)에서 이해하는 도커(Docker) #2. Hyperledger Sawtooth 연결까지 | junn | 2018-02-08 |
| 18 | # 4 - 머클트리(Merkle Tree) 및 머클루트(Merkle Root)에 관한 정의 | yahweh87 | 2018-02-08 |
| 17 | 스팀커넥트2 강좌 :: OAuth Redirect 후 처리, 로그아웃 | morning | 2018-02-07 |
| 16 | 맥(Mac)에서 이해하는 도커(Docker) #1 | junn | 2018-02-05 |
| 15 | Hyperledger Sawtooth (private blockchain) 실습하기 #1. 맥북에서 Docker를 이용한 설치 | junn | 2018-01-25 |
| 14 | Hyperledger Sawtooth(private blockchain)의 합의 알고리즘 PoET에 대하여 | junn | 2018-01-22 |
| 13 | Hyperledger (Private blockchain), Composer(Fabric), Sawtooth 에 대하여 | junn | 2018-01-15 |
| 12 | [Git 활용하기 #2] Github와 Hexo를 통해 기술 블로그 만들기 | stunstunstun | 2018-01-14 |
| 11 | Mediteam.us 개발 - 워드프레스를 바깥(외부)에서 이용하기(PHP), 요약문(Excerpt) | junn | 2018-01-14 |
| 10 | Mediteam.us 개발 - Python & Selenium을 이용한 구글검색 크롤링 | junn | 2018-01-13 |
| 9 | Mediteam.us 개발 - 이 글은 어느 나라 말로 적혀있는 문서인가? (한글, 영어, 일본어 형태소 분석) | junn | 2018-01-09 |
| 8 | Steemit 포스트를 Naver 블로그로 보내기 #2 - 비출력 문자 에러 처리 | junn | 2018-01-08 |
| 7 | Steemit 포스트를 OpenAPI로 Naver 블로그로 보내기(export) using PHP | junn | 2018-01-07 |
| 6 | Mediteam.us 개발 - Mecab (Python library)를 이용한 일본어, 한글 형태소 분석 | junn | 2018-01-05 |
| 5 | Mediteam.us 개발 - nodeJS와 python 상호 간 통신(using python-shell, synchronize) | junn | 2018-01-03 |
| 4 | [Python] Mediteam.us 개발 - 관련글 찾기 (TF-IDF, konlpy) | junn | 2017-12-31 |
| 3 | [Python] CNN10 에서 특정 내용이 포함된 Script 찾기 (Crawling, 크롤링 예제) | junn | 2017-12-29 |
| 2 | Mediteam.us - Puppeteer 사용기 | junn | 2017-12-28 |
| 1 | SteemJS API 타임아웃 해결 방법 | asbear | 2017-10-01 |
오랜만에 보는 d3.js네요. 작년까진 많이 썼었는데 ^^
일단은 오픈소스 라이브러리이고 도큐먼트도 한글화가 잘 되어있으며 json parser를 내장하고 있다는 점에서 훌륭한 시각화 라이브러리라고 볼 수있습니다. 저는 forced directed graph를 주로 많이 사용했던 것 같군요.
특히나 활용하고 계시는대로 생명공학, 의학쪽에 잘 맞게 만들어져있구요.
저도 레퍼런스를 찾다보니 이미 몇년전부터 이걸 활용한 유전학적 분석 레이아웃을 만든 사례가 꽤 되더라구요.
다만 염려가 되는 부분이 주요 개발자가 재작년에 오픈소스 커뮤니티를 이탈한 것으로 기억하고 있어서...
데이터 시각화에 대한 내용에 관심을 두지 않다 보니 이런 라이브러리가 있는 줄도 몰랐습니다ㅎ 향후에 논문 쓸 것을 생각하다보니 관심이 가더라고요. 나온지는 5~6년 되는 것 같던데요, 말씀주신것 처럼 생명공학이나 의학쪽에서 활용도가 높을 것 같습니다ㅎ
첨언 감사드립니다^^
오..저도 프로그래밍에 관심이 있는데 좋은 글 감사합니다!
감사합니다~ 좋은 글들 부탁드립니다 ㅎㅎ
d3 써보려고 잠깐 사이트에서 떠들어보다가 볼만하게 만드려면 손이 많이 가는것 같아서 포기했었던 d3 군요. 역시 대단하십니다. ㅎㅎㅎ
input 데이터만 바꾼 것이라서요, 세부적인 소스는 엄두가 안나더라고요ㅎㅎ 당장 써먹을일이 없어서 그냥 맛만 봤습니다ㅎ
넴 템플릿대로만 사용 가능하다면 괜찬을것같은데 템플릿을 만드는건 너무 어려워보이더라구요ㅜㅜ
제대로 쓰려면 결국 템플릿을 직접 만들줄 알아야겠죠 ㅠ
헉 개발도 하시는군요..!!
대단하십니다 +_+
개발자 분들이 얼마나 많으신데요 ㅎ저는 개발까지는 아니고, 그냥 관심있는 분야만 조금씩 손대보는 정도입니다ㅎ;;
의사분들이 데이타 시각화에 관심이 많으시더라구요~ㅎㅎ
D3.js는 몇년전에 책 사다 쭉 한번 따라해보고 지금은 그냥 주구장창 R이랑 파이썬만 쓰고 있어요.
그래도 자바스크립트 기반이라, 접근성도 높고 웹에서 쉽고 깔끔하게 보여주기는 d3.js가 정밀 좋은 것 같아요. 프론트만 만져서 보여줄 수 있으니 논문에서 보여주기도 정말 좋죠. 저같은 브라우저 덕후들이 좋아할만한 라이브러리입니당~:)
네ㅎ자바스크립트라는 것이 가장 큰 장점인 듯 합니다. 보여주고 싶은 것을 바로 보여준다는 점! 웹개발이랑 무관하게 R로 통계만 하는 분들은 그냥 R로 해버리지뭐..하실수 있은 부분이지만요 ㅎ