[python] PyYAML로 YAML 파일을 읽어와서 그래프로 시각화하기 (d3.js, vis.js 등 사용)

30 Nov 2023

python

이번 블로그 포스트에서는 Python에서 PyYAML 라이브러리를 사용하여 YAML 파일을 읽고, 그래프로 시각화하는 방법에 대해 알아보겠습니다. 이후에는 d3.js, vis.js와 같은 JavaScript 라이브러리를 사용하여 시각화된 그래프를 웹 페이지에 표시할 수 있습니다.

PyYAML 설치하기

먼저, PyYAML 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

pip install pyyaml

YAML 파일 읽기

YAML 파일은 계층 구조로 이루어져 있으며, PyYAML을 사용하여 이러한 구조를 쉽게 읽을 수 있습니다. 예를 들어, 다음과 같은 YAML 파일이 있다고 가정해 봅시다.

- name: John
  age: 25
  occupation: developer
- name: Alice
  age: 30
  occupation: designer

이 YAML 파일을 Python에서 읽기 위해서는 다음과 같은 코드를 사용할 수 있습니다.

import yaml

with open('data.yaml') as file:
    data = yaml.load(file, Loader=yaml.FullLoader)

위 코드에서 data는 YAML 파일의 내용을 포함하는 Python 객체입니다.

그래프 시각화하기

YAML 파일을 그래프로 시각화하기 위해서는 d3.js, vis.js와 같은 JavaScript 라이브러리를 사용할 수 있습니다. 이 라이브러리들은 웹 페이지에서 다양한 그래프를 그릴 수 있는 기능을 제공합니다. 이 포스트에서는 vis.js를 사용하여 그래프를 그리는 예시를 살펴보겠습니다.

먼저, HTML 파일에 vis.js 라이브러리를 포함시키고, 그래프를 표시할 div 엘리먼트를 생성합니다. 이후에는 JavaScript 코드에서 YAML 데이터를 읽고, vis.js를 사용하여 그래프를 생성하는 로직을 추가하면 됩니다. 아래는 이러한 로직을 포함한 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Graph Visualization with YAML Data</title>
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style type="text/css">
        #graph {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="graph"></div>

    <script src="main.js"></script>
</body>
</html>

// main.js
fetch('data.yaml')
    .then(response => response.text())
    .then(yamlStr => {
        const data = jsyaml.load(yamlStr);

        const nodes = new vis.DataSet(data.map((item, index) => ({
            id: index,
            label: item.name,
        })));

        const edges = new vis.DataSet(data.map((item, index) => ({
            from: index,
            to: index + 1,
        })));

        const container = document.getElementById('graph');
        const network = new vis.Network(container, { nodes, edges }, {});
    });

위 코드에서 data.yaml 파일을 읽고, YAML 데이터를 JavaScript 객체로 변환한 후, vis.js의 DataSet을 사용하여 그래프의 노드와 엣지를 생성합니다. 그 이후에는 vis.js의 Network 클래스를 사용하여 그래프를 생성하고, HTML 페이지에 표시합니다.

결론

이 포스트에서는 PyYAML 라이브러리를 사용하여 YAML 파일을 읽어오고, 그래프로 시각화하기 위해 d3.js, vis.js와 같은 JavaScript 라이브러리를 사용하는 방법에 대해 알아보았습니다. 이러한 접근 방식을 사용하면 YAML 파일의 정보를 시각화하여 데이터를 더 쉽게 이해하고 분석할 수 있습니다.

더 많은 자세한 내용을 확인하려면 아래 참고 자료를 참고하십시오.