[웹] 워드클라우드 그리기 (javascript, anyChart)

인트로

안녕하세요. 오늘은 워드클라우드를 HTML/CSS 로 그리는 방법에 대해서 포스팅하겠습니다 :D 

워드 클라우드는 '단어 구름'이라는 뜻으로, 핵심 단어를 시각화하는 기법입니다. 문자의 빈도 수를 직관적으로 나타내어 문서의 키워드/개념들을 빠르게 파악할 수 있는 기법인데요. AnyChart라는 라이브러리를 사용해 html/css/js 로 손쉽게 그릴 수 있습니다. 

 

목차
1. Wordcloud & AnyChart
2. anyChart URL
3. 커스터마이징 및 구현

 

1. Wordcloud & AnyChart

워드클라우드란 빅데이터에서 자주 쓰는 용어로, 문서의 자주 사용되는 단어 집합을 구름처럼 나타낸 시각화 기법입니다.  AnyChart는 워드 클라우드를 그려주는 자바스크립트 라이브러리로, 사용하기 매우 편리합니다. 또한 기존 워드클라우드는 이미지로 그려 반응형에 최적화되어 있지 않지만, anychart 라이브러리는 html,css,javascript로 동작하기 때문에 반응형웹 에 최적화되어 있습니다.

링크 : https://docs.anychart.com/Basic_Charts/Tag_Cloud

 

2. anyChart URL

헤더에 anychart-base.min.js, anychart-tag-cloud.min.js 등 외부 스크립트 URL(anyChart URL)를 명시합니다.  

<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

 

3. 커스터마이징 및 구현

1) div container 선언

- 내가 그려주고자 하는 div 에 다음과 같이 선언해줍니다. 

<div class="chart-area">
	<div id="container" style="width:100%; height:100%;"></div>
</div>

 

2) anychart script 구현 

기본 변수

x : 워드 

value : 빈도 

category : 카테고리 

 

커스터마이징 

1. 색상

chart.normal().fill("색상코드") : 글씨 색 지정

chart.selected().fill("#1f66ad"); 클릭했을 때 글씨 색 지정 

chart.normal().fontWeight(600); 글씨 두께 지정 

chart.hover().fill("색상코드") : hover 했을 때(마우스 가져다 댔을 때) 글씨 색 지정

2. 각도 : chart.angles([0, 30, 90]); 각도 지정 (0,30,90도 안에서만 나타남) 

3. 간격 : chart.textSpacing(15); 글자 간격 지정 

4. 범위 표현 : chart.colorRange().enabled(true);

 

구현 코드

- 다음과 같이 anychart 를 그리는 스크립트를 선언합니다.

<script>
anychart.onDocumentReady(function () {
    var data = [
        {
            "x": "IT",
            "value": 590000000,
            category: "Sino-Tibetan"
        },
        {
            "x": "Python",
            "value": 283000000,
            category: "Indo-European"
        },
        {
            "x": "소프트웨어",
            "value": 544000000,
            category: "Indo-European"
        },
        {
            "x": "JAVA",
            "value": 527000000,
            category: "Indo-European"
        }, {
            "x": "C++",
            "value": 422000000,
            category: "Afro-Asiatic"
        }, {
            "x": "HTML",
            "value": 620000000,
            category: "Afro-Asiatic"
        }
    ];
    var chart = anychart.tagCloud(data);
    chart.angles([0]);
    chart.container("container");
    // chart.getCredits().setEnabled(false);
    chart.draw();
});
</script>

 

구현 모습

- 다음과 같이 결과 이미지가 출력되는 것을 볼 수 있습니다.

기존 wordcloud로 그리면 이미지로 저장되나,

anychart 라이브러리는 html/css 로 그리는 것으로 반응형에 최적화된 것을 볼 수있습니다. 

 

* 체험판 문구 삭제 관련 

chart.getCredits().setEnabled(false); 를 선언하면 아래 'AnyChart Trial Version' 문구가 사라진다고 하는데, 

저는 사라지질 않네요.. 아시는 분은 댓글 부탁드립니다. 

 

그럼 워드 클라우드 포스팅을 마치겠습니다.

감사합니다 :D