読者です 読者をやめる 読者になる 読者になる

N bitブール代数をD3.jsのforce layoutで表示

D3.js ブール代数

前回、ブール代数の基本を確認したときに、ブール代数の束としての半順序構造をsvgを使って図で説明した。

 

せっかくなのでD3.jsを使って、Nビットのブール代数 ( N個の集合代数)をforce layoutのネットワーク図を使って表示してみる。

入力フォームにビット数(=集合代数のN個)を入力してVisualizeボタンを押せば、図が表示される。各ノードの操作の実装は以下のコードをほとんどそのまま。

Sticky Force Layout

ドラッグすることでノードが固定される(固定中のノードは赤枠)。固定されたノードはダブルクリックで元に戻る。

 また、ドラッグのタイミングでノードが選択されると、Choice欄にノードの番号が選択される。これに対し、FilterやIdealボタンを押すと、選択されたノードで生成されるフィルターやイデアルが濃い太枠で表示される仕組みを追加している。

D3.jsすばらしい!!