[javascript] D3.js를 이용한 트랜디 구조 시각화
D3.js는 데이터 시각화를 위한 JavaScript 라이브러리로, 웹 상에서 동적이고 대화형으로 데이터를 시각화하는 것을 가능하게 해줍니다. 이번 포스트에서는 D3.js를 사용하여 트랜디 구조를 시각화하는 방법에 대해 알아보겠습니다.
트랜디 구조란?
트랜디 구조는 관계형 데이터의 네트워크로 표현되는 구조입니다. 일반적으로 노드와 링크로 구성되며, 노드는 데이터를 나타내고, 링크는 데이터 간의 상호 작용을 나타냅니다.
D3.js를 사용한 트랜디 구조 시각화
- D3.js 라이브러리를 로드합니다.
<script src="https://d3js.org/d3.v6.min.js"></script>
- 시각화할 데이터를 준비합니다. 예를 들어, 다음과 같이 데이터를 생성합니다.
const data = {
nodes: [
{ id: 1, name: "Node 1" },
{ id: 2, name: "Node 2" },
{ id: 3, name: "Node 3" },
],
links: [
{ source: 1, target: 2 },
{ source: 1, target: 3 },
{ source: 2, target: 3 },
],
};
- SVG 요소를 생성하여 시각화를 표현할 영역을 지정합니다.
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
- 노드를 생성하고 그리기 위한 함수를 작성합니다.
function drawNodes(nodes) {
const node = svg.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 10)
.attr("fill", "blue")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
}
- 링크를 생성하고 그리기 위한 함수를 작성합니다.
function drawLinks(links) {
const link = svg.append("g")
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", "gray")
.attr("stroke-width", 2)
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);
}
- 시각화 함수를 호출하여 트랜디 구조를 그립니다.
function visualize(data) {
drawNodes(data.nodes);
drawLinks(data.links);
}
visualize(data);
마무리
D3.js를 사용하면 간단하게 트랜디 구조를 시각화할 수 있습니다. 이를 통해 데이터의 관계를 직관적으로 이해할 수 있고, 사용자와 상호 작용할 수 있는 동적인 시각화를 구현할 수 있습니다. D3.js를 이용하여 다양한 시각화 프로젝트에 도전해보세요!