D3.js는 데이터 시각화를 위한 자바스크립트 라이브러리로, 네트워크 시각화를 구현하기에 매우 유용합니다. 네트워크 시각화란, 다양한 노드(node)와 엣지(edge)로 구성된 그래프를 시각적으로 표현하는 것을 말합니다. D3.js를 사용하면 다양한 시각화 효과와 상호작용을 추가할 수 있습니다.
1. D3.js 라이브러리 추가하기
D3.js를 사용하기 위해 먼저 라이브러리를 웹 페이지에 추가해야 합니다. HTML 파일의 <head> 태그 내에 다음과 같이 스크립트 태그를 추가합니다.
<script src="https://d3js.org/d3.v6.min.js"></script>
2. 네트워크 데이터 준비하기
네트워크 시각화를 위해 데이터를 준비해야 합니다. 데이터는 일반적으로 JSON 형식으로 제공됩니다. 다음은 예시 데이터의 형태입니다.
{
"nodes": [
{"id": "node1"},
{"id": "node2"},
{"id": "node3"}
],
"links": [
{"source": "node1", "target": "node2"},
{"source": "node2", "target": "node3"}
]
}
3. 네트워크 요소 생성하기
D3.js를 사용하여 네트워크 시각화를 생성하기 위해 다음과 같은 요소를 생성해야 합니다.
1) SVG 요소 생성하기
네트워크를 표현할 SVG 요소를 생성합니다.
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
2) 노드 요소 생성하기
네트워크의 노드를 표현할 원(circle) 요소를 생성합니다.
const nodes = svg.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("r", nodeRadius)
.attr("fill", "blue");
3) 엣지 요소 생성하기
네트워크의 엣지를 표현할 선(line) 요소를 생성합니다.
const links = svg.selectAll("line")
.data(data.links)
.enter()
.append("line")
.attr("stroke", "gray")
.attr("stroke-width", 2);
4. 시각화 스타일 설정하기
생성한 네트워크 요소의 스타일을 설정합니다. 예를 들어, 노드들의 색상을 구분하기 쉽게 설정하거나, 엣지의 굵기를 조절할 수 있습니다.
nodes.attr("fill", (d, i) => colors[i]);
links.attr("stroke-width", (d) => d.weight * 2);
5. 시각화 애니메이션 추가하기
D3.js를 이용하면 시각화 요소에 애니메이션을 추가할 수 있습니다. 예를 들어, 노드가 화면에 나타나거나 사라지는 애니메이션을 추가할 수 있습니다.
nodes.attr("r", 0)
.transition()
.duration(1000)
.attr("r", nodeRadius);
6. 상호작용 추가하기
D3.js를 사용하면 네트워크 시각화에 상호작용을 추가할 수 있습니다. 예를 들어, 노드를 클릭하면 연결된 엣지의 색상을 변경하는 등의 상호작용을 구현할 수 있습니다.
nodes.on("click", (event, d) => {
links.attr("stroke", (linkData) => {
if (linkData.source === d.id || linkData.target === d.id) {
return "red";
} else {
return "gray";
}
});
});
위와 같은 방법으로 D3.js를 이용하여 네트워크 시각화를 구현할 수 있습니다. 다양한 기능과 스타일을 추가하여 원하는 시각화를 구현해보세요!