javascript

JavaScript SVG로 된 Word Cloud 소개

소화자/ editor

  • 0 comments
  • 2,357 views
  • 2017년 7월 10일

JavaScript d3.js와 SVG를 이용하여 만들어진 Word Cloud 샘플 페이지(템플릿) 제공

시작하기 전에


아마  뉴스같은 방송에서 빅데이터 분석결과를 워드 클라우드(Word Cloud) 형태로  보여주는  것을
한번 쯤은 보신 적이 다들 계실 겁니다.

오늘 소개해 드릴 Word Cloud는 https://github.com/jasondavies/d3-cloud
(출처만 밝히면 상업용 사용도 무방한 라이센스를 가지고 있습니다.)

Flexible하고 기능이 너무 많아서 사용하기에 쉽지 않다는 평을 가진 d3.js 
점점 뜨고 있는  2차원 벡터 그래픽인 SVG(Scalable Vector Graphics) 를 활용하여,
단순 텍스트를 활용한 Word Cloud보다 좀 더 화려하고, 멋져서 시선을 끌 수 있는 장점이 있습니다.

d3.js 와 svg를  직접 공부해서 만들려면, 시간이 많이 너무 걸리고, 잘못하면 홧병에 걸릴 수 있으니,
오늘 보여 드리는 HTML 소스를 바로 템플릿으로 사용하시면 좋을 것 같습니다.
(사실 d3.js는 아직 저도  직접 사용해 본적이 없습니다.)

만일 좀더 기능적으로 풍부한 Word Cloud를 만드시려 하신다면, SVG로 되어 있진 않지만  ,
설명이 잘 되어 있는  jQCloud를 활용해 보시길 추천 드립니다.

그럼 후다닥 달려 볼까요~~
 

 실행 모습 확인하기


아래 JS BIn에 보이는 실행 모습은 http://www.jasondavies.com/wordcloud/ 의 샘플 소스를 제가
바로 사용 가능하도록 정리 및 스크립트를 조금 추가한 것입니다.
컨트롤 판넬 부분  이것 저것 눌러 보시면  어떤 기능인지 감이 오실 겁니다.
TextArea에 충분히 긴 뉴스를 긁어다 붙이시고, Go! 버튼도 눌러 보세요~

모든 소스는 HTML탭에 있고, CSS,  JavaScript 탭에는 아무것도 없습니다.
(HTML탭 소스 다 긁어 가셔서 페이지 만드시면 됩니다. TextArea안의 글은 소스 아닙니다.^^)

Word Cloud 그릴  때의 계산 때문에 함수 init 안에 있는 w와 h 변수의 값을 수정하시면,
소스에 변화가 생기면, 바로 실행하려는 JS Bin의 특성상  멈출 수도 있으니, 이 부분 수정및 테스트는
Auto-run JS 체크를 해제 후 -> 수정 -> 다시 체크 식으로 해 보시면 좋습니다.
(화면이 안 나타나면 스크롤을 조금만 더 내려 주세요! ^^)

Word Cloud 생성페이지 on html5around.com

실행 모습이 꽤 쓸만하죠 ~~
 

스크립트 추가 부분


원래 샘플소스의필요없는 부분 삭제 및  Word Cloud  디스플레이 부분의 사이즈가 고정 되어 있어서,
화면 사이즈가 변경 될 때나, 작은 디바이스등에서 안 맞기 때문에,    window.onload 와
window.onresize 이벤트때,  사이즈 변경에 대응 되도록 init이란 함수를 만들어 연결 시켰습니다.

HTML 소스 부분도 삭제 하시거나, id를 바꾸거나 하시면, 에러가 발생합니다.
script src에 연결된 자바스크립트가 이해 될 때까지는 HTML탭의 소스 전체를 템플릿으로 활용하시고,
id=”text” 인 textarea에  데이타베이스를 이용하건, 직접 텍스트를 입력하든지 방법에 상관없이,
Word Cloud로 표현하고픈 문장이 오기만 하면 됩니다.

컨트롤 판넬 토글 소스 부분은 단지 보이기, 안 보이기 이니, 이해 되시리라 생각됩니다.
 

 마무리


단지 Word Cloud 표현으로의 디스플레이만 필요하다면,  이 만큼 좋은 소스가 없는 것 같습니다.

그리고 제가 원 소스인 https://www.jasondavies.com/wordcloud/cloud.min.js 를 건들지 않고, JS Bin에
문제 되지 않게 자바스크립트를 만들다 보니, 추가된 스크립트가 초보자분들에겐 조금 이상한 모습이 되었는데요,

링크 소스를 직접 다운 받아서, 수정하여 사용하실 경우에는 소스의 w와 h가 정의 된 부분에
w = parseInt(0.7 * window.innerWidth); h =parseInt(0.3 * window.innerHeight);
식으로 수정하시고,  추가로 스크립트 태그에 window.onresize 이벤트에 location.reload() 를 연결 시키는 것을
추가 하는 것 만으로 간단히 윈도우 화면 사이즈 변경에 대응할 수도 있습니다.

아!  한가지  중요한게 있습니다.

위 링크 소스에 보시면 stopWords라고 영어만 제외시킬 단어 리스트가 정의 되어 있어, 한글인 경우
제외시킬 단어(조사, 대명사등) 별도 추가가 필요합니다.

 

이 글이 누군가에겐 조금이나마 도움이 되었으면 하는 바램입니다.

소화자

존재를 드러내지 않고 무림의 배후를 조정하는 전설로만 전해지는 무엇이든 소화하는... 갑 오징어~^-^

Leave a Reply

avatar