Hatena::Grouplifesciencedb

ゲノム周辺 このページをアンテナに追加 RSSフィード

2010-05-26

Trackstar を試してみた

| 01:31 |  Trackstar を試してみた - ゲノム周辺 を含むブックマーク はてなブックマーク -  Trackstar を試してみた - ゲノム周辺  Trackstar を試してみた - ゲノム周辺 のブックマークコメント

Galaxy の最近の新機能のひとつ、UCSC ゲノムブラウザライクにゲノム座標データの可視化 Trackstar を試してみた。自分のデータを手軽に可視化できるのがポイント。

Trackstar はゲノム座標系データの可視化機能

ゲノム座標系データをそのゲノム配列のうえに表示する。表示する形は UCSC ゲノムブラウザのフィーチャーと似ている。表示範囲のスケールにあわせてうまく描画の粒度をかえている。

WIG 形式の数値データも表示できる。折れ線グラフ、ヒストグラム、密度表示の三種類の可視化の形をもっている。色の指定が可能。

ゲノム上の表示は、マウスでの左右上下ドラッグによるスクロール、ホイールによるスクロール、ダブルクリックによる拡大が可能。表示するデータは、ゲノム配列(dbkey)が一致すれば自動的に選択リストにはいるようになっている。このへんのデータのメタデータによるマッチングは Galaxy の得意なところ。

座標系データは、その特性にあわせたインデクス化がおこなわれているので、比較的高速に動作する。さらに、表示に必要なデータだけをとりだすように非同期通信を利用している。

表示は、HTML5 Canvas エレメントと Javascript を利用したブラウザサイドレンダリングで実装。データはJSONで交換されている。

screenshot

インストール

Trackstar の設定は galaxy / galaxy-central / wiki / Visualization — Bitbucket をなぞる。Galaxy のインストール galaxy / galaxy-central / wiki / GetGalaxy — Bitbucket を参照。

ソースの取得。

hg clone http://bitbucket.org/galaxy/galaxy-central

python 2.5 を使うように設定。ここでは Mac OS X 10.6 での場合。

ln -s /usr/bin/python2.5 python
export PATH=./:$PATH

セットアップ。

sh setup.sh

universe_wsgi.ini を編集。最低限必要なのは enable_tracks = True を有効にすること。

$ diff universe_wsgi.ini universe_wsgi.ini.sample
28c28
< enable_tracks = True
---
> # enable_tracks = True

トラック用のデータをUCSCから取得。hg18 などの buildの名前(dbkey)や長さが含まれる。

mkdir ./tool-data/shared/ucsc/chrom/
python ./cron/build_chrom_db.py ./tool-data/shared/ucsc/chrom/

起動確認。

sh run.sh

ブラウザhttp://localhost:8080/ を開いて、ヘッダに Visualization メニューが追加されていることを確認。


つかってみる

ブラウザの動作確認。

  1. ヘッダの Visualization → New Track Browser を選択。
  2. 出て来たダイアログの「Reference genome build (dbkey):」メニューで「Human Mar. 2006 (NCBI36/hg18) (hg18)」を選択。
  3. Continue ボタンをクリック。
  4. ゲノムブラウザが表示される。
  5. 下の染色体選択メニューで「chr1」を選択。
  6. データセットをたしてみる。Add Tracks ボタンをクリック。でもいまは選択できるデータがない。
  7. とりあえず、ここまでの状態を保存するために、右のConfigurationペインの Save ボタンをクリック。

データをとってくる。

  1. ヘッダの Analyze Data を選択。
  2. 左ペインの Tools → Get Data → UCSC Main を選択。
  3. NCBI36/hg18 アッセンブリのデータをなにか取得。たとえば group: Genes ... で table: knownGene
  4. output format: の Galaxy チェックボックスを有効にする。
  5. get output ボタンをクリック。つぎの画面で Send query to Galaxy ボタンをクリック。しばし待つ。
  6. UCSC Main on Human: knownGene (genome)」のようなタイトルのヒストリが追加される。

ブラウザにもどる。

  1. ヘッダの Visualization → Saved Visualizations を選択。
  2. さっき作ったもの(おそらく Unnamed)を選択。
  3. ゲノムブラウザが表示される。
  4. 下の染色体選択メニューで「chr1」を選択。
  5. データセットをたしてみる。Add Tracks ボタンをクリック。
  6. データセットを選択して、insert ボタンをクリック。
  7. インデクスがはじまる。しばし待つ。
  8. スクロールや縮小拡大をためしてみる。
  9. 最後にここまでの状態を保存するために、右のConfigurationペインの Save ボタンをクリック。

うごかないときには

  1. galaxy / galaxy-central / wiki / Visualization — Bitbucket を読み直す。
  2. ソースは正しくて、手順がまちがっていると信じてもう一度ソースから入れ直してみる。

まとめ

  1. Trackstar を有効にしてみた。
  2. gbrowse や UCSC ゲノムブラウザなどのローカルのセットアップ無しに、手前の座標系データを可視化するための新しい方法。わりと簡単。
  3. Trackstar はモダンな実装。
  4. テキストでGUIを説明するのは難しい。状態に名前が無いと特に難しい。
トラックバック - http://lifesciencedb.g.hatena.ne.jp/nakao_mitsuteru/20100526

2010-01-30

TogoWS REST API JSON 形式の利用例

|  TogoWS REST API JSON 形式の利用例 - ゲノム周辺 を含むブックマーク はてなブックマーク -  TogoWS REST API JSON 形式の利用例 - ゲノム周辺  TogoWS REST API JSON 形式の利用例 - ゲノム周辺 のブックマークコメント

TogoWS REST APIJSON 形式の出力形式に対応しています。これを利用するとかんたんにウェブページにデータを追加表示できます。この利用例では、HTML書類にレンダリング時にAjaxで取得したPubMedアブストラクトのデータを表示します。

REST APIJSON 形式

PubMed アブストラクトのタイトルの取得 URI は次のようになります。ti フィールドがタイトルです。

その返り値

["From genomics to chemical genomics: new developments in KEGG."]

この返り値JSONJavaScriptで値としてつかうには eval を使用します。TogoWS REST APIJSON 形式を利用する際に配列の一個目の要素を取り出す必要があります。

var data = eval(ti_in_json)[0]

図はイメージ

次のようなウェブページを、TogoWS からデータ取得し作成できます。JavaScript による Ajax でデータは JSON 形式としてクロスドメインに取得されて、そのまま DOM 操作で表示しています。表示しているデータは、タイトル(ti)、著者(au)、書誌情報(so)、アブストラクト(ab)、MeSHターム(mh)です。

http://img.skitch.com/20100130-1xar76tyru7m6waqssdxmw2h3m.jpg


HTML ソース

Ajaxprototype.js をつかいます。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<title></title>
<script src="http://genome.kazusa.or.jp/javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>
<div id='ti'></div>
<div id='au'></div>
<div id='so'></div>
<hr/>
<div id='ab'></div>
<hr/>
<div id='mh'></div>
<hr/>
<script type="text/javascript">
var ti = function(transport) {
  if (transport.responseText !== undefined) {
    $('ti').innerHTML = "<h1>" + eval(transport.responseText)[0] + '</h1>'
}
}
var so = function(transport) {
  if (transport.responseText !== undefined) {
    $('so').innerHTML = eval(transport.responseText)[0]
  }
}
var au = function(transport) {
  if (transport.responseText !== undefined) {
    $('au').innerHTML = eval(transport.responseText)[0].replace(/\n/g, ', ')
  }
}
var ab = function(transport) {
  if (transport.responseText !== undefined) {
    $('ab').innerHTML = eval(transport.responseText)[0];
  }
}
var mh = function(transport) {
  if (transport.responseText !== undefined) {
    var data = eval(transport.responseText)[0]
    data.each(function(e, i) {
      $('mh').innerHTML = $('mh').innerHTML + '<li>' + e + '</li>'
    })
  }
}
function failure(transport) {  alert(transport.responseText); }

new Ajax.Request("http://togows.dbcls.jp/entry/ncbi-pubmed/16381885/ti.json", { onSuccess: ti,  onFailure: failure})
new Ajax.Request("http://togows.dbcls.jp/entry/ncbi-pubmed/16381885/so.json", { onSuccess: so,  onFailure: failure})
new Ajax.Request("http://togows.dbcls.jp/entry/ncbi-pubmed/16381885/ab.json", { onSuccess: ab,  onFailure: failure})
new Ajax.Request("http://togows.dbcls.jp/entry/ncbi-pubmed/16381885/au.json", { onSuccess: au,  onFailure: failure})
new Ajax.Request("http://togows.dbcls.jp/entry/ncbi-pubmed/16381885/mh.json", { onSuccess: mh,  onFailure: failure})
</script>
</body> </html>

まとめ

  • TogoWS REST APIJSON 形式を Ajax で利用する例です。
  • 返り値は配列がいっこ余分にみえます。
  • PubMed アブストラクトから書誌情報とMeSHタームだけを表示するページをつくりました。
  • PMID だけを持っているページに、その文献のタイトルを表示追加するのは簡単なお仕事です。
トラックバック - http://lifesciencedb.g.hatena.ne.jp/nakao_mitsuteru/20100130