Graphviz:概念地図を作ってみよう - suto3の大福帳

Graphviz:概念地図を作ってみよう

概念地図とは

概念地図は、ノード（node）とリンク（link）から構成される

ノードは概念をあらわし、ノードとリンクで概念の関係をあらわす

すなわち命題をあらわしている。

個人の持っている不完全な見解を説明する

どのように主題の意味を解釈するのか

よりよく理解する

概念地図に使用する記号

概念地図の作成手順

概念を見つけるためのヒント

関係を見つけるためのヒント

概念地図のテンプレート

code:d3.js

const digraph = ` digraph g {

// ノード左から右に向かって配置する

rankdir = LR;

ratio=auto;

overlap=false;

ranksep=1.1;

code:d3.js

// ノード（ボックス）の設定

node fontsize = 12, shape = box;

edge fontsize = 10;

code:d3.js

// メインテーマ（主題）を決める

MainThemalabel="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2

code:d3.js

// メインテーマから派生するキーワードを書く

MainThema -> "上位概念"label="関係をここに書く";

code:d3.js

// 更にキーワードから派生するキーワードを書く

"上位概念"->"下位概念"label="被包括";

// さらに派生したキーワードを繋げていく

code:d3.js

}

`

d3.select("#graph").graphviz()

.fade(false)

.renderDot(digraph);

レンダリングしてみます→

概念地図を使った情報検索

code:before.js

const before = ` digraph g {

rankdir = LR;

ratio=auto;

overlap=false;

ranksep=1.1;

node fontsize = 12, shape = box;

edge fontsize = 10;

MainThemalabel="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2

MainThema -> "上位概念"label="関係をここに書く";

"上位概念"->"下位概念"label="被包括";

"上位概念"->"テスト";

}

`

d3.select("#graph").graphviz()

.fade(false)

.renderDot(before);

実行

code:after.js

const after = ` digraph g {

rankdir = LR;

ratio=auto;

overlap=false;

ranksep=1.1;

node fontsize = 12, shape = box;

edge fontsize = 10;

MainThemalabel="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2

MainThema -> "上位概念"label="関係をここに書く";

"上位概念"->"下位概念"label="被包括";

"上位概念"->"テスト";

"上位概念"->"テスト2";

"テスト"->"テスト2";

}

`

d3.select("#graph").graphviz()

.fade(false)

.renderDot(after);

実行

概念地図、概念マップ、コンセプトマップ（concept map）

概念地図法、概念マッピング、コンセプトマッピング（concept mapping）

code:d3.css

/* */