D3.js プラグイン – d3-electrophoresisでデジタルDNA電気泳動

d3-electrophoresisは、DNA電気泳動をシミュレーションするd3プラグインです。

これは入力したテキスト(DNA配列など)を、単語(制限酵素の配列など)で切断し、その断片を長いものから縦に流すデータビジュアライゼーションの一種です。
たとえば不均衡に分布している単語でテキストを切断した場合、長い断片と短い断片の両方ができます。均一に分布する単語の場合は同じような長さの断片ができます。

 

リンク：

• github：　d3-electrophoresis。
• 本体jsファイル：　d3-electrophoresis.js。

 

例：

元ページ：　トランプ就任演説の電気泳動。コード。

turn onボタンを押すと泳動が始まります。テキストボックスに別の文字を入れれば、それを使った電気泳動を実行できます。
実際のDNA配列と制限酵素配列を使って電気泳動をシミュレーションすることもできます。
下の画像は、日本国憲法の全文をいくつかの単語で切断して、出現率と不均衡さを可視化したものです。

 

簡単なコード例：

1. まずバージョン4のd3.js本体とd3-electrophoresis.jsを入手し、htmlの<script>タグ内でd3.jsとd3-electrophoresis.jsを読み込みます。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js" charset="utf-8"></script>
   <script src="d3-electrophoresis.js"></script>

2. javascript本文では、var gel=electrophoresis()でインスタンス化します。その後、svgタグのメソッドチェーンの最後に、call(gel.makeGel)で黒いゲルの背景をsvgタグ内に作ります。
3. gel = electrophoresis().DNA(text).enzymes(words).names(names)のように、メソッドチェーンを使ってデータや設定を入れます。例えばDNA()にテキスト、enzymes()にレーンごとの切断用単語リスト、name()に単語の名前などです。他にもスケールやアニメーション調節などのメソッドチェーンがありますが、githubの公式APIに詳しく書いてあります。
4. 最後に、再びsvgのメソッドチェーンを呼び出し、svg.call(gel);で電気泳動のアニメーションが始まります。

このコードでは、turn onボタンを押すとアニメーションが始まるようにするために、function render(){}で囲んで、ボタンをクリックしたときにその関数が実行されるようにしています。

上のコードの結果はこちらから。