N bitブール代数をD3.jsのforce layoutで表示
前回、ブール代数の基本を確認したときに、ブール代数の束としての半順序構造をsvgを使って図で説明した。
せっかくなのでD3.jsを使って、Nビットのブール代数 ( N個の集合代数)をforce layoutのネットワーク図を使って表示してみる。
入力フォームにビット数(=集合代数のN個)を入力してVisualizeボタンを押せば、図が表示される。各ノードの操作の実装は以下のコードをほとんどそのまま。
ドラッグすることでノードが固定される(固定中のノードは赤枠)。固定されたノードはダブルクリックで元に戻る。
また、ドラッグのタイミングでノードが選択されると、Choice欄にノードの番号が選択される。これに対し、FilterやIdealボタンを押すと、選択されたノードで生成されるフィルターやイデアルが濃い太枠で表示される仕組みを追加している。
D3.jsすばらしい!!
