Jupyter notebook에서 vis.js를 사용하여 그래프 그리기

소개

그래프를 이용하여 분석한 결과를 즉시 확인하기 위해,
Jupyter notebook에서 vis.js을 사용하여 그래프를 그립니다.
이하 사이트에 설정 방법이 실려 있었기 때문에 해 보았다.

참고 : htps //w w. 코멘과 r. 이오/이사이 b. 시코우레 l/ゔぃsjsゔぃ스아아자치온-인-쥬py

본 내용의 Notebook은 여기

실행 환경

mac OS
Jupyter notebook 4.4.0
파이썬 3.6.6
vis.js 4.21.0

-

준비

vis.js 다운로드

vis.js 다운로드하여 적절한 장소에서 unzip

Jupyter notebook config 파일 변경

./jupyter/jupyter_notebook_config.py에서 vis.js 경로 설정

## Extra paths to search for serving static files.
#
#  This allows adding javascript/css to be available from the notebook server
#  machine, or overriding individual files in the IPython

c.NotebookApp.extra_static_paths = ['/Users/miotakei/Applications/vis-4.21.0/dist']

** ./jupyter/jupyter_notebook_config.py가 없으면 다음 명령을 실행하십시오.

$ jupyter notebook --generate-config

-Jupyter notebook 시작

실행

그래프의 데이터를 작성해, JSON 형식으로 변경 후 Javascript 를 생성

from IPython.display import Javascript
import json

nodes = [
        {'id': 1, 'label': 'Beyonce', 'group': 'United States'},
        {'id': 2, 'label': 'Barak Obama', 'group': 'United States'},
        {'id': 3, 'label': 'Miley Cyrus', 'group': 'United States'},
        {'id': 4, 'label': 'Pope Francis', 'group': 'Vatican'},
        {'id': 5, 'label': 'Vladimir Putin', 'group': 'Rusia'}
]

edges = [
        {'from': 1, 'to': 2},
        {'from': 1, 'to': 3},
        {'from': 2, 'to': 4},
        {'from': 2, 'to': 5}
]

# Transform the graph into a JSON graph
data = {"nodes":nodes, "edges":edges}
jsonGraph = json.dumps(data, indent=4)

# Send to Javascript
Javascript("""window.jsonGraph={};""".format(jsonGraph))

HTML 만들기

%%html
<div id="mynetwork"></div>

방금 작성한 그래프 데이터의 변수를 받는 Javascript 코드 작성

%%javascript
requirejs.config({
    paths: {
        vis: 'vis'
    }
});

require(['vis'], function(vis){

    // create a network
    var container = document.getElementById('mynetwork');
    var options = {
        width: '800px',
        height: '400px'
    };

    // We load the JSON graph we generated from input
    var graph = window.jsonGraph;

    // Display Graph
    var network = new vis.Network(container, graph, options);
});

결과