회사에서 개발하고 있는 토폴로지에 대해 탐구하던 도중, D3를 알게 되었습니다.
매우 흥미로운 라이브러리이기에 이에 대해 알아보려고 합니다.
1. D3
D3란 무엇일까요? (D3 공식 홈페이지 바로가기)
D3.js는 데이터를 시각적으로 표현하기 위한 JavaScript 라이브러리입니다.
D3는 Data-Driven Documents의 약자입니다.
이는 웹 브라우저에서 데이터를 기반으로 동적이고 인터랙티브한 시각화 및 애니메이션을 생성하는 데 사용됩니다.
HTML, SVG, CSS와 같은 웹 표준 기술을 사용하여 데이터 시각화를 구축해요.
2. 특징
D3의 특징은 다음과 같습니다.
1) 데이터 바인딩
D3는 데이터를 DOM(Document Object Model) 요소에 바인딩할 수 있어요.
이로 인해 데이터에 기반한 그래프, 차트, 맵 등을 쉽게 생성할 수 있답니다.
2) 유연성
D3는 데이터를 시각화하기 위한 다양한 방법을 제공해요.
D3를 사용할 개발자는 데이터를 어떻게 표현할지에 대한 완전한 제어권을 가지며, 커스텀한 시각화도 가능합니다.
3) 애니메이션 및 상호작용
D3는 데이터 변화에 따라 애니메이션을 적용할 수 있어요.
또한, 사용자가 마우스를 올리거나 클릭하는 등의 상호작용도 쉽게 구현할 수 있습니다.
4) 광범위한 지원
D3는 라인 차트, 막대 그래프, 파이 차트, 트리맵, 클러스터 다이어그램, 포스 레이아웃, 지리적 맵 등등 다양한 시각화 유형을 지원해요.
3. 사용방법
그럼 바로 사용해 봅시다!
우선 먼저 HTML 파일에 라이브러리를 로드해 줍니다.
<script src="https://d3js.org/d3.v7.min.js"></script>
그 다음 body 태그 안에 다음과 같이 데이터와 스타일을 지정해 주세요.
<script>
const data = [10, 20, 30, 40, 50];
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => d + "px")
.style("background-color", "steelblue")
.style("margin", "5px")
.style("color", "white")
.text(d => d);
</script>
이렇게 하면 간단한 막대 그래프 형태로 데이터 배열을 시각화할 수 있습니다!
전체 코드
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
const data = [30, 40, 50, 60, 70];
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => d + "px")
.style("background-color", "steelblue")
.style("margin", "5px")
.style("color", "white")
.text(d => d);
</script>
</body>
</html>4. 정리하며
지금까지 D3에 대해 알아보았습니다.
이를 활용하여 다양한 데이터 시각화 기능을 구현하면 좋을 것 같아요!
참고
'Front-End Study > JavaScript' 카테고리의 다른 글
| 엑셀 다운로드 기능 구현하기 (1) | 2024.10.07 |
|---|---|
| 즉시 실행 함수(IIFE) (0) | 2024.09.19 |
| 웹팩(Webpack)이란? (0) | 2024.06.29 |
| 데이터 포맷 (0) | 2024.03.25 |
| 웹 스토리지 (0) | 2024.03.25 |