워드클라우드는 텍스트 데이터의 빈도를 시각적으로 표현하는 효과적인 방법입니다. 이번 글에서는 자바스크립트를 사용하여 JSON 데이터로 워드클라우드를 생성하는 방법을 알아보겠습니다.

JSON 데이터 불러오기

워드클라우드를 생성하기 위해 먼저 JSON 데이터를 불러와야 합니다. JSON 파일을 서버에서 불러오거나, 자바스크립트의 XMLHttpRequest나 fetch API를 사용하여 JSON 데이터를 동적으로 가져올 수 있습니다. 이 예제에서는 fetch API를 사용하도록 하겠습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터를 가지고 워드클라우드 생성하기
    createWordCloud(data);
  })
  .catch(error => console.error(error));

위 코드는 ‘data.json’ 파일을 불러와 JSON으로 변환한 후 데이터를 가지고 워드클라우드를 생성하는 함수인 createWordCloud()를 호출합니다.

워드클라우드 생성하기

워드클라우드를 생성하기 위해 createWordCloud() 함수를 구현해야 합니다. 이 함수에서는 JSON 데이터를 사용하여 워드클라우드를 생성하게 됩니다.

function createWordCloud(data) {
  // JSON 데이터에서 필요한 정보 추출하기
  const words = data.words;
  // 단어의 빈도수에 따라 크기 조절하기
  const fontSizeScale = d3.scaleLinear()
    .domain([0, d3.max(words, d => d.frequency)])
    .range([10, 80]);

  // 워드클라우드 생성
  d3.select("#wordcloud")
    .selectAll("span")
    .data(words)
    .enter()
    .append("span")
    .style("font-size", d => `${fontSizeScale(d.frequency)}px`)
    .text(d => d.word);
}

위 코드에서 data.words는 JSON 데이터에서 단어와 빈도수 정보를 가진 배열입니다. d3.scaleLinear() 함수를 사용하여 빈도수에 따라 단어의 크기를 조절하고, d3.select() 메소드를 사용하여 워드클라우드가 표시될 요소를 선택합니다. 그리고 data()와 append() 함수를 사용하여 단어를 생성하고, style() 함수를 사용하여 단어의 크기를 설정합니다.

워드클라우드 결과 확인하기

이제 워드클라우드를 동작시켜 결과를 확인해보겠습니다. HTML 파일에 워드클라우드가 표시될 <div> 요소를 추가하고, 그 요소에 id를 지정한 뒤, 자바스크립트 코드에서 해당 id를 선택하여 워드클라우드를 생성합니다.

<div id="wordcloud"></div>

위 코드에서 id가 “wordcloud”인 <div> 요소를 추가하였습니다. 이 요소에 워드클라우드가 표시될 것입니다.

이제 모든 코드를 작성하고 웹 브라우저에서 확인해보세요. JSON 데이터를 불러와서 워드클라우드가 정상적으로 생성되는지 확인할 수 있을 것입니다.

이처럼 자바스크립트를 사용하여 JSON 데이터로 워드클라우드를 생성할 수 있습니다. 워드클라우드는 텍스트 데이터의 시각화를 통해 더 나은 이해를 도울 수 있는 강력한 도구입니다.

#JavaScript #워드클라우드 #JSON #데이터