Front 라이브러리 - 워드클라우드 jQCloud/차트Chart.js

 

오늘은 프론트에서 쓰이는 간단한 라이브러리를 소개하려고한다.

 

 

 

jQCloud

var words = [
  {text: "Lorem", weight: 13},
  {text: "Ipsum", weight: 10.5},
  {text: "Dolor", weight: 9.4},
  {text: "Sit", weight: 8},
  {text: "Amet", weight: 6.2},
  {text: "Consectetur", weight: 5},
  {text: "Adipiscing", weight: 5},
  /* ... */
];

$('#demo').jQCloud(words);

jQCloud

평소에 많이 볼 수 있는 '워드클라우드'

많이 언급된 키워드를 중점으로 보여주는 라이브러리이다.

키워드 크기가 클수록 언급이 많이 된 키워드이다.

 

js와 JQuery를 사용하여 코드에 넣어준다.

키워드 클릭시 이동할 수 있게 링크를 넣어줄 수 있고, 

직사각형 배치나 글자색을 바꿔줄 수도 있다.

 

 

 

 

 

Chart.js

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

 

Chart.js | Chart.js

내부에 데이터를 넣어서 그것을 그래프로 시각화해주는 라이브러리이다.

꺾은선, 바, 원형 등 다양한 그래프가 있고 마우스를 갖다대면 상세비율을 표시해준다.

마찬가지로 라벨과 색깔을 임의로 설정해줄 수 있다.

 

 

 

 

프론트엔드 데이터 시각화에 사용할 수 있는 오픈소스 라이브러리를 알아보았다.