JavaScriptの有向グラフ描画ライブラリー
JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。
有向グラフとは?
グラフ理論におけるグラフ (Graph)とは、頂点(node)と辺(edge)により構成された図形のことである。
グラフは主に、有向グラフ (directed graph)と無向グラフ (undirected graph)の2つに分類される。
有向グラフとは、頂点と向きを持つ辺(矢印)により構成されたグラフであり、無向グラフとは、頂点と辺により構成されたグラフである。
マインドマップとは?
マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。
描き方は、表現したい概念の中心となるキーワードやイメージを中央に置き、そこから放射状にキーワードやイメージを広げ、つなげていく。
JavaScriptのマインドマップのライブラリー
JavaScript マインドマップ ライブラリー - Google 検索
sigma.js
arbor.js
mindmup
js-mindmap
GoJS - MindMap
GoJS(HTML5 Canvas を使ったJSライブラリー)のMindMap見本
TOCfEの作画ツール
実際に使いたいのは、マインドマップの作画ツールではなく、TOCfEの図を作画するツールです。
TOCとは?
制約条件の理論(制約理論、もしくは TOC (theory of constraints) とも)は、主にサプライチェーン・マネジメントで用いられる理論の1つである。
物理学者であるエリヤフ・ゴールドラットが1984年に執筆、出版した小説『ザ・ゴール』で理論体系が公開された。
- 作者: エリヤフ・ゴールドラット/ジェフ・コックス,岸良裕司,蒼田山,青木健生
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2014/12/05
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (6件) を見る
TOCfE(Theory of Constraints for Education)とは?
教育のためのTOCは、世界20か国以上の教育の場で活用されている、とてもシンプルな考えるための道具です。
この道具は、ものごとのつながりを考える「ブランチ」、意見の対立について考える「クラウド」、目標を達成する方法を考える「アンビシャス・ターゲット・ツリー」の3つで構成されています。
教育のためのTOCの3つの道具は、イスラエルの物理学者、エリヤフ・ゴールドラット博士によって開発されました。
この道具のベースには、ゴールドラット博士が作り上げた「制約理論(TOC:Theory of Constrains)」という理論があります。
世界で800万人が実践! 考える力の育て方――ものごとを論理的にとらえ、目標達成できる子になる
- 作者: 飛田基
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2017/07/13
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
TOCfEではこんなかんじの図を描きます。
http://w.tocforeducation.com/roadmap.html
ブランチ
クラウド
ターゲットツリー
ブランチ、クラウド、ターゲットツリーなどの図がササっと描けるツールがあると良いのですが、探してもすぐに見つからないので、みんな手書きでやってるのかな?と思いました。
HTML5 Canvas
もしも、TOCfEの図をデジタルデータ化するなら、HTML5+JavaScriptで作図できないかな?と思いました。
プログラミング HTML5 Canvas ―ウェブ・モバイル・ゲーム開発者のためのアプリケーション開発ガイド
- 作者: David Geary,永井勝則
- 出版社/メーカー: オライリージャパン
- 発売日: 2014/07/19
- メディア: 大型本
- この商品を含むブログ (1件) を見る
上記のグラフ関係のライブラリーを改造すれば、TOCfEの作画ツールも作れるような気がしました。
とりあえず、手書きでやってみて、デジタルツールが必要になったら作ってみたいです。