[Data-Driven Documents] D3.js & D3.js를 이용해 Tag Cloud 만들기

D3.js

- 웹 표준을 사용하여 데이터를 시각화하기위한 JavaScript 라이브러리
- SVG, Canvas, HTML을 사용하여 강력한 시각화 및 상호 작용 기술과 DOM 조작에 대한 데이터 기반 접근 방식을 결합하여 최신 브라우저의 모든 기능을 제공하고 데이터에 적합한 시각적 인터페이스를 자유롭게 설계 할 수 있다.

D3 API

• d3.select(element) : 문서에서 요소 1개 선택
• d3.selectAll(element) : 문서에서 여러 요소 선택
• d3.selector: 요소 1개 선택
• d3.selectorAll: 여러 요소 선택
• d3.data : data 바인딩

Tag cloud 예제

sample data
https://www.tiobe.com/tiobe-index 에 소개된 프로그래밍 언어 순위와 비율