初めに

相関図を作成する機会があり簡単に描画できるライブラリはないかと探した所、
vis.js の vis-network が良さそうでした。
サンプルを参考に自分の好きな飲み屋徳田酒店の店舗と利用頻度を描画してみます。

ソースコード

tokuda.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>
<script>
    // create an array with nodes
    const nodes = new vis.DataSet([
        {id:1 , label: '徳田酒店', shape: 'box', color:'#C2FABC'},
        {id:'1-1',  label:'京橋本店', size:25},
        {id:'1-2',  label:'片町店', size:25},
        {id:'1-3',  label:'プロムナード店', size:10},
        {id:'1-4',  label:'西梅田店', size:15},
        {id:'1-5',  label:'御肉', size:20},
        {id:'1-6',  label:'第3ビルB1店', size:30},
        {id:'1-7',  label:'第3ビルB2店', size:20},
        {id:'1-8',  label:'第4ビルB2店', size:5},
        {id:'1-9',  label:'瓦町店', size:15},
        {id:'1-10', label:'ルクア大阪店', size:5},
        {id:'1-11', label:'京阪高架下店', size:5},
        {id:'1-12', label:'ホワイティうめだ店', size:5},
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: '1-1' },
        {from: 1, to: '1-2' },
        {from: 1, to: '1-3' },
        {from: 1, to: '1-4' },
        {from: 1, to: '1-5' },
        {from: 1, to: '1-6' },
        {from: 1, to: '1-7' },
        {from: 1, to: '1-8' },
        {from: 1, to: '1-9' },
        {from: 1, to: '1-10' },
        {from: 1, to: '1-11' },
        {from: 1, to: '1-12' },
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
        }
    };
    // initialize your network!
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

表示結果

第3ビルB1店の利用頻度が高いことが可視化できました。

最後に

今回は簡単なものを表現してみましたが大量のノード表示や画像に変更するなども可能です。
どのような表現ができるかはサンプルをご確認下さい。