2

D3 でシーケンス ロゴを描画するにはどうすればよいですか?

ウィキペディアより

シーケンス ロゴは、ヌクレオチド (DNA/RNA 鎖内) またはアミノ酸 (タンパク質配列内) の配列保存をグラフィカルに表現したものです。シーケンス ロゴは、各位置の文字のスタックで構成されます。文字の相対的なサイズは、シーケンス内の頻度を示します。文字の高さの合計は、位置の情報内容をビット単位で表します。

例：

ここに画像の説明を入力

通常、データは行列の形式で取得され、行列の行名はアミノ酸/DNA 配列であり、列は配列の位置を示します。

したがって、文字スペースA B Cと長さ 4 のシーケンスがある場合、行列は次のようになります。

  1     2     3     4
A 0.1   0.8   0.2   0.1
B 0.3   0.2   0.3   0.05
C 0     0.1   0.4   0.4

マトリックスの値は、キャラクターの相対的な高さに対応します

4

2 に答える 2

5

インスピレーションとして、積み上げ棒グラフから始めました：http: //bl.ocks.org/3886208

大まかな実装はここにあります：http： //jsfiddle.net/QcPZ9/

より紛らわしい部分の1つは次のとおりです。

data.forEach(function(d) {
    var y0 = 0;
    d.bits = d.map( function( entry ) { 

        return { bits: entry.bits, letter: entry.letter, y0: y0, y1 : y0 += +entry.bits };          
    } )
    d.bitTotal = d.bits[d.bits.length - 1].y1; 
});

基本的には、各シーケンスエントリ（最終的には列になる）のビットの総数を計算することを意味します。また、前のビットを維持するため、yオフセット（スタッキング）を計算できます。

全体として、これは、フォントハックの代わりに、文字に定義された記号またはグラフィックを使用することで改善できます。

于 2013-01-15T22:37:57.677 に答える