junn avatar

데이터 시각화용 라이브러리 d3.js 에 대해서 알아봤습니다.

junn

Published: 18 Feb 2018 › Updated: 18 Feb 2018데이터 시각화용 라이브러리 d3.js 에 대해서 알아봤습니다.

데이터 시각화용 라이브러리 d3.js 에 대해서 알아봤습니다.

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

Leave 데이터 시각화용 라이브러리 d3.js 에 대해서 알아봤습니다. to:

Written by

이비인후과의사 Otorhinolaryngologist | junn.in (&junn.net)

Read more #kr posts


Best Posts From junn

We have not curated any of junn's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From junn