자바스크립트에서 JSON 데이터를 사용하여 동적으로 그래프를 생성하는 방법

10 Sep 2023

javascript

소개

그래프는 데이터 시각화의 강력한 도구입니다. 자바스크립트를 사용하여 JSON 데이터를 이용해 그래프를 동적으로 생성하고 업데이트하는 방법을 알아보겠습니다. 이를 통해 사용자에게 더 명확하고 직관적인 데이터 시각화를 제공할 수 있습니다.

JSON 데이터 구조

그래프를 생성하기 위해서는 먼저 JSON 데이터 구조를 정의해야 합니다. 일반적으로 그래프 데이터는 노드와 엣지로 구성됩니다. 노드는 데이터 포인트를 나타내고, 엣지는 노드 간의 관계를 나타냅니다.

예를 들어, 아래와 같은 JSON 데이터를 사용해보겠습니다:

{
  "nodes": [
    { "id": 1, "label": "Node 1", "value": 10 },
    { "id": 2, "label": "Node 2", "value": 15 },
    { "id": 3, "label": "Node 3", "value": 20 }
  ],
  "edges": [
    { "from": 1, "to": 2, "label": "Edge 1" },
    { "from": 1, "to": 3, "label": "Edge 2" },
    { "from": 2, "to": 3, "label": "Edge 3" }
  ]
}

위의 예시에서, nodes 배열은 3개의 노드를 포함하고 있습니다. 각 노드에는 id, label, value와 같은 속성이 정의되어 있습니다. 또한, edges 배열은 3개의 엣지를 포함하고 있으며, from과 to 속성은 노드들 사이의 관계를 나타냅니다.

그래프 라이브러리 선택

그래프를 생성하기 위해서는 그래프 라이브러리를 선택해야 합니다. 자바스크립트에서는 다양한 그래프 라이브러리가 있습니다. 그 중에서 vis.js라이브러리를 사용하여 그래프를 생성하고 관리하는 방법을 알아보겠습니다.

vis.js를 이용하여 그래프 생성하기

먼저, vis.js를 HTML 파일에 추가합니다. CDN을 사용하는 방법은 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
  <title>Graph Visualization</title>
  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style type="text/css">
    #graph-container {
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <div id="graph-container"></div>

  <script>
    // JSON 데이터
    var data = {
      "nodes": [
        { "id": 1, "label": "Node 1", "value": 10 },
        { "id": 2, "label": "Node 2", "value": 15 },
        { "id": 3, "label": "Node 3", "value": 20 }
      ],
      "edges": [
        { "from": 1, "to": 2, "label": "Edge 1" },
        { "from": 1, "to": 3, "label": "Edge 2" },
        { "from": 2, "to": 3, "label": "Edge 3" }
      ]
    };

    // vis.js 그래프 옵션 설정
    var options = {
      nodes: {
        shape: "dot",
        size: 30,
      },
      edges: {
        width: 2,
      },
    };

    // vis.js 그래프 객체 생성
    var container = document.getElementById("graph-container");
    var network = new vis.Network(container, data, options);
  </script>
</body>
</html>

위의 예시 코드에서, data 변수에 우리가 정의한 JSON 데이터를 할당합니다. 그리고 options 변수에는 그래프의 모양과 크기, 엣지의 스타일 등을 설정합니다.

마지막으로, vis.Network 생성자를 호출하여 그래프를 생성합니다. 생성된 그래프는 container 요소에 표시됩니다.

그래프 업데이트하기

그래프는 동적으로 업데이트될 수 있습니다. 예를 들어, 새로운 노드를 추가하거나 엣지를 제거하는 등의 작업을 수행할 수 있습니다.

// 새로운 노드 추가
data.nodes.push({ "id": 4, "label": "Node 4", "value": 25 });

// 엣지 제거
data.edges.splice(2, 1);

// 그래프 업데이트
network.setData(data);

위의 예시에서, data 객체를 업데이트하고 network.setData 함수를 사용하여 그래프를 업데이트합니다.

마무리

이와 같이 자바스크립트에서 JSON 데이터를 사용하여 동적으로 그래프를 생성하고 업데이트하는 방법을 알아보았습니다. 그래프는 데이터 시각화에 중요한 역할을 하며, vis.js와 같은 그래프 라이브러리를 활용하여 더욱 멋진 그래프를 구현할 수 있습니다.