[javascript] D3.js를 이용한 네트워크 시각화

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 JavaScript 라이브러리입니다. 이를 이용하여 네트워크 시각화를 구현할 수 있습니다.

D3.js란?

D3.js는 “Data-Driven Documents”의 약자로, 데이터에 기반하여 문서를 생성하고 조작하는 데 사용되는 JavaScript 라이브러리입니다. 데이터와 HTML, SVG, CSS를 결합하여 동적이고 상호작용하는 시각화를 생성할 수 있습니다.

네트워크 시각화

네트워크 시각화는 노드(node)와 엣지(edge)로 이루어진 그래프를 시각적으로 표현하는 것을 말합니다. 이는 복잡한 데이터 관계를 직관적으로 이해하기 쉽게 만들어줍니다.

D3.js의 force 모듈은 네트워크의 물리적인 특성을 모방하여 시각화를 생성하는 데 사용됩니다. 이 모듈은 각 노드에 대한 위치, 속도, 가속도를 계산하여 시각화를 업데이트합니다.

// 예시 코드
const width = 800;
const height = 600;

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const nodes = [
  { id: 1, name: "Node 1" },
  { id: 2, name: "Node 2" },
  { id: 3, name: "Node 3" },
];

const links = [
  { source: 1, target: 2 },
  { source: 2, target: 3 },
  { source: 3, target: 1 },
];

const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

const link = svg.selectAll("line")
  .data(links)
  .enter()
  .append("line")
  .style("stroke", "black");

const node = svg.selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .style("fill", "blue");

simulation.on("tick", () => {
  link
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);
});

위의 코드는 3개의 노드와 3개의 엣지를 갖는 네트워크를 시각화하는 예시입니다. 각 노드는 원으로 표현되며, 각 엣지는 선으로 표현됩니다. forceSimulation을 통해 네트워크의 물리적인 특성을 모방하여 시각화를 생성합니다.

결론

D3.js를 이용하면 네트워크 시각화를 구현할 수 있습니다. force 모듈을 활용하여 노드와 엣지의 위치 및 연결 관계를 시각화할 수 있으며, 상호작용성과 동적 효과를 추가할 수도 있습니다. D3.js는 데이터 시각화에 유용한 라이브러리로 널리 사용되고 있으므로, 네트워크 시각화를 구현할 때 D3.js를 고려해보세요.