[javascript] D3.js를 이용한 권력 구조 시각화

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 인기 있는 자바스크립트 라이브러리입니다. 이 글에서는 D3.js를 사용하여 권력 구조를 시각화하는 방법에 대해 알아보겠습니다.

D3.js란?

D3.js는 데이터 주도 문서(D3 - Data-Driven Documents)를 생성하기 위한 자바스크립트 라이브러리입니다. D3.js는 SVG, HTML, CSS 등을 사용하여 동적이고 인터랙티브한 데이터 시각화를 구현할 수 있습니다.

데이터 준비

권력 구조 시각화를 위해 먼저 데이터를 준비해야 합니다. 이 예시에서는 JSON 형태의 데이터를 사용하겠습니다. 데이터에는 권력 구조에 대한 정보가 포함되어야 합니다. 예를 들어, 조직의 계층 구조, 관계, 인원 수 등이 포함될 수 있습니다.

const data = [
  { name: "CEO", parent: null },
  { name: "CTO", parent: "CEO" },
  { name: "CFO", parent: "CEO" },
  { name: "Engineer 1", parent: "CTO" },
  { name: "Engineer 2", parent: "CTO" },
  { name: "Accountant", parent: "CFO" },
];

시각화 구현

D3.js를 사용하여 데이터를 시각화하는 과정에는 여러 단계가 포함됩니다. 먼저 SVG 요소를 생성하고 위치를 설정합니다. 그런 다음 데이터를 바탕으로 원하는 모양의 그래프를 그립니다.

// SVG 요소 생성
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 그래프 구현
const nodes = d3.stratify()
  .id(function(d) { return d.name; })
  .parentId(function(d) { return d.parent; })
  (data)
  .descendants();

const links = nodes.slice(1);

const node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node");

node.append("circle")
  .attr("r", 5)
  .style("fill", "#ff5722");

node.append("text")
  .attr("dx", 12)
  .attr("dy", 4)
  .text(function(d) { return d.data.name; });

const link = svg.selectAll(".link")
  .data(links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", function(d) {
    return "M" + d.y + "," + d.x
      + "C" + (d.y + d.parent.y) / 2 + "," + d.x
      + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
      + " " + d.parent.y + "," + d.parent.x;
  });

위의 코드는 간단한 권력 구조를 시각화하기 위한 예시 코드입니다. 데이터를 바탕으로 노드와 링크를 생성하여 SVG 요소에 추가합니다.

결과 확인

위의 코드를 실행하면 권력 구조를 시각화한 결과를 확인할 수 있습니다. 생성된 그래프는 SVG 요소에 렌더링됩니다.

시각화 결과

결론

D3.js는 강력한 데이터 시각화 도구로서 다양한 형태의 시각화를 구현할 수 있습니다. 이 글에서는 D3.js를 사용하여 권력 구조를 시각화하는 예시를 살펴보았습니다. D3.js를 활용하여 데이터 시각화에 도전해보세요!