D3やReactを用いたナレッジグラフ(関係データ)の可視化

機械学習技術人工知能技術自然言語処理技術セマンティックウェブ技術オントロジー技術ウェブ技術検索技術データベース技術アルゴリズムデジタルトランスフォーメーション技術 Visualization & UX ワークフロー&サービスグラフデータ処理知識情報処理本ブログのナビ

Javascriptをベースとしたデータ可視化ツール

グラフデータ等の関係データを可視化するツールとしてJavascriptをベースとしたD3.jsやReactを利用したものを用いることができる。

D3.js

D3.js(Data-Driven Documents Javascript)は、2011年に開発が始まったウェブブラウザで動的コンテンツを描画するJavaScriptライブラリである。 World Wide Web Consortium準拠のデータ可視化ツールとして、Scalable Vector Graphics（SVG）、JavaScript、HTML5、Cascading Style Sheets (CSS) を最大限に活用している。その他多くのライブラリとは対照的に、最終的に出力された結果に視覚的な調整ができるものとなる。

公式ページのgalleryではさまざまなサンプルを確認することができる。

D3を利用するためには公式ページよりライブラリをダウンロードする。このときsourceでgitのページにアクセスするのではなく、トップページの「Download the latest version (7.3.0) here:」の最新バージョンからライブラリをダウンロードし。以下のようなhtmlのテンプレートファイル(index.html)を準備して、同じフォルダー内にjsフォルダーを作ってd3.min.jsファイルを格納すればよい。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/d3.min.js"></script>
</head>
<body>
<svg id="MyGraph"></svg>
<script src="js/sample.js"></script>
</body>
</html>

次に、jsフォルダー内にsample.jsファイルを作成して、以下のようなコードを書く。

var width = 200;
var height = 50;

d3.select("#MyGraph")
.append("rect")
.attr("x",10)
.attr("y",10)
.attr("width", width+"px")
.attr("height", height+"px")
.style("stroke","#000000")
.style("fill","#ffffff");

ウェブブラウザで、index.htmlファイルを開くと以下のような長方形が表示される。

これらの動作としては、基本的には上記の.jsファイルでSVG図形の属性を指定し、指定された形状をd3.SVG(“#MyGraph”)で描画するという流れとなる。

このD3.jsを使ってナレッジグラフ(関係データ)の可視化を行う典型的な手法としてはforce-graphを用いるものがある。これは以下のようなグラフ型のデータを表示するものとなり

ノードとエッジのデータをJSONデータで形成し表示するものとなる。D3以外のアプローチとしてはHTML5でのアプローチや更にシンプルなものではJavaのライブラリであるgraph-vizを用いたものもある。

更に関係性の可視化という観点ではヒートマップ(関係データの2次元表示)によるアプローチもある。以下の例は、レミゼラブルの登場人物の相関を示したものとなり、丁度対称的な2部グラフを行列で表したものに相当する。

実用的な知識グラフではデータ間の関係が複雑になり、2次元的な表示では、煩雑になって表示しきれなくなったり、データ数が多くなると通常のJavascriptでは処理が重くなるケースが出てくる。

Reactを用いたデータ可視化

それらに対応する為のアプローチとしてReact等の仮想DOMを用いたアプローチもある。D3をReactで利用する方法も紹介されているが、ここでは純粋にReactを用いた手法について述べる。

Reactを利用するためには、まずJavascriptのサーバーフレームワークであるNode.jsをインストールする必要がある。NodeをインストールするにはNodeの公式ページに行き、

それぞれのOS用のLTSをダウンロードしてインストールする。インストール時はそれほど細かい設定不必要で、指示に従っていくことでインストールは完了する。(インストールが完了したかどうかはコマンドラインで「node -v」と入力してバージョンが表示することで確認できる)

ここで企業内ネットワーク(Proxy環境に繋がっている場合は以下のnpmに別途proxy設定を行う必要がある。ここでproxyサーバーのアドレスをhttp://proxyserver:8080として設定している。企業内でネットワークを利用している場合は、環境設定からそれらのproxyサーバー名は確認できる。(proxy内にいない場合は不要)

npm -g config set proxy http://proxyserver:8080 
npm -g config set https-proxy http://proxyserver:8080 
npm -g config set registry http://registry.npmjs.org/ 
npm config list

さらにパッケージ管理ツールとして「npm」と「yarn」をインストールする。(-gはグローバルで利用する為の設定)

// npm のインストール
sudo npm install -g npm

//yarnのインストール
npm install -g yarn

さらに、reactの標準テンプレートを作成する為のツール「create-react-app」をインストールする。

npm install -g create-react-app

この段階でreactの標準テンプレートを任意のフォルダー下に作成するとReactアプリのテンプレートが作成できる。

create-react-app test-sample01
cd test-sample01
npm start

ブラウザが自動的に立ち上がり(立ち上がらない場合は「http://localhost:3000」にアクセス)以下の画面が見えていれば成功。

Reactでのforce-graphの公式ページにアクセスすると、react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-arの3つのライブラリがある事が記載されている。通常の2次元表示、3次元表示、VR、AR対応のライブラリがあることがわかる。

必要に応じてそれぞれをyarnでインストールする。

yarn install react-force-graph-2d
yarn install react-force-graph-3d
yarn install react-force-graph-vr
yarn install react-force-graph-ar

て2Dのexampleに関するページにアクセスして、簡単なサンプルを作成してみる。たとえば「Force Graph 2D Charge」のコードを参考に先ほどのテンプレートのコードを修正する。

テンプレートのフォルダーの構成は以下のようになる。

これらの中で「Index.html」がメインのHTMLファイル。「Index.js」がメインのjavascriptファイルとなり、「App.js」のファイル(と「App.css」)を変更することでReactを構築することができる。今回はそれぞれを

//App.js
import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import ForceGraph2D from "react-force-graph-2d";
import "./App.css";

var data = {
  nodes: [{ id: "A" }, { id: "B" }, { id: "C" }, { id: "D" }],
  links: [
    { source: "B", target: "C", value: 8 },
    { source: "C", target: "D", value: 10 },
    { source: "D", target: "A", value: 6 },
    { source: "B", target: "A", value: 6 },
    { source: "B", target: "D", value: 6 },
    { source: "D", target: "D", value: 6, curvature: 0.3 }
  ]
};

function App() {
  const forceRef = useRef(null);
  useEffect(() => {
    forceRef.current.d3Force("charge").strength(-400);
  });
  return (
    
  );
}

と

//App.css
.App {
  font-family: sans-serif;
  text-align: center;
}

に変更する。「npm start」させると以下のようなシンプルな2次元force-graphが表示されることが確認できる。

さらにそれらを改良する方向性としてはノードに文字列を使ったもの

ノード自体を更に複雑な構造にしたもの

がある。(それぞれのリンク先のコードを参照)

次に3D表現のシンプルな例を示す。サンプルコードとしては「force-graph-transparent-background」を利用する。

先ほどのテンプレートのApp.jsに対して

//App.js
import "./App.css";

import ForceGraph3d from "react-force-graph-3d";

// Random data
const N = 30;
const gData = {
  nodes: [...Array(N).keys()].map((i) => ({ id: i })),
  links: [...Array(N).keys()]
    .filter((id) => id)
    .map((id) => ({
      source: id,
      target: Math.round(Math.random() * (id - 1))
    }))
};

export default function App() {
  return (
     "red"}
      linkColor={() => "blue"}
      graphData={gData}
    />
  );
}

と