[javascript] D3.js를 이용한 워드 클라우드 그리기

07 Dec 2023

javascript

소개

D3.js는 데이터 시각화를 위한 자바스크립트 라이브러리로, 강력한 기능과 다양한 시각화 옵션을 제공합니다. 이번에는 D3.js를 이용하여 간단한 워드 클라우드를 그려보겠습니다. 워드 클라우드는 텍스트 데이터에서 단어의 빈도를 시각적으로 표현하는 방법으로, 자주 등장하는 단어일수록 크게 표시됩니다.

준비물

D3.js 라이브러리
텍스트 데이터 파일

코드 예시

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v6.js"></script>
  <style>
    .word-cloud {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="word-cloud"></div>

  <script>
    // 텍스트 데이터
    const data = [
      { text: "apple", size: 20 },
      { text: "banana", size: 16 },
      { text: "orange", size: 12 },
      // 데이터 추가
    ];

    // 워드 클라우드 생성
    const wordCloud = d3.select(".word-cloud")
      .append("svg")
      .attr("width", 600)
      .attr("height", 400)
      .append("g")
      .attr("transform", "translate(300,200)");

    // 워드 클라우드 레이아웃 설정
    const layout = d3.layout.cloud()
      .size([600, 400])
      .words(data)
      .padding(5)
      .rotate(() => (Math.random() > 0.5 ? 0 : 90))
      .fontSize(d => d.size)
      .on("end", draw);

    // 워드 클라우드 그리기
    layout.start();

    // 그리기 함수
    function draw(words) {
      wordCloud
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("font-size", d => d.size + "px")
        .style("fill", "steelblue")
        .attr("text-anchor", "middle")
        .attr("transform", d => `translate(${d.x},${d.y}) rotate(${d.rotate})`)
        .text(d => d.text);
    }
  </script>
</body>
</html>

실행 방법

위의 코드를 복사하여 HTML 파일을 생성합니다.
<script src="https://d3js.org/d3.v6.js"></script> 부분에서 D3.js 라이브러리를 불러옵니다.
const data = [...] 부분에서 텍스트 데이터를 적절하게 변경합니다.
웹 브라우저에서 HTML 파일을 열어 실행합니다.

소개

준비물

코드 예시

실행 방법

참고 자료