macでインフォマティクス

macでインフォマティクス

HTS (NGS) 関連のインフォマティクス情報についてまとめています。

インタラクティブな出版品質の合成 Figure作成webツール canvasDesigner2

 

 Scalable Vector Graphics (SVG) は、拡張可能なマークアップ言語 (XML) ベースのベクトル画像フォーマットであり、png, gif, jpg のような他の一般的な画像フォーマットのようにぼやけたピクセル化をすることなく、任意の解像度に拡張可能である。この形式は、計算生物学分野の多くのデータ解析ツール、特にR (R Core Team , 2014) や ggplot2 (Wickham, H, 2016) で採用されている最も広く使用されている画像出力の一つとなっている。さらに、SVGは、通常、D3(Bostock, M. et al. , 2011)やCoral(Metz KS. et al. , 2019)のようなバイオインフォマティクスツールのような多くのJavaScriptベースのプロットライブラリによってデフォルトの画像出力として設定されており、ChromeFirefoxSafari、MS Edgeのような最新のWebブラウザによって自然にレンダリングできる。
 論文図1に示されているようなマルチパネル高解像度プロットを構成することは、通常、様々なソースから個々のプロットを収集した後、控えめなプログラミングスキルを持つ科学者にとって課題となる。Microsoft Power Point のようなユーザーフレンドリーな商用ツールは、このようなプロットを配置するための実行可能なオプションとなり得るが、これらのツールは、SVG 形式の複雑なパスウェイマップを扱うことができないか、またはこの形式を
のように、低解像度でありながら、ときには不格好になることもある。
Web ベースのインタラクティブな図形設計ツールの試み(Zhang, B., 2018)に引き続き、ゲル画像のスキャニングなどの状況によっては、SVG 形式の取得が困難な場合があるため、canvasDesigner2 の入力形式を SVG のみから拡張した(論文Fig s1)。

 

help

canvasDesigner Demo Video

helpに用意されている2分程度の短い動画を見れば基本的な使い方はわかるようになっています。

 

Github

 

webサービス

https://baohongz.github.io/canvasDesigner2/ にアクセスする。 

f:id:kazumaxneo:20210223164540p:plain

 

3つのDemoが用意されている。

f:id:kazumaxneo:20210223165509p:plain

 

Demo1

f:id:kazumaxneo:20210223165533p:plain

左上のボタンを押すとサイズの調整ができるようになる。

f:id:kazumaxneo:20210223165851p:plain

 

それぞれの図の右上の青いマークをクリックすると、図全体を移動できる。

f:id:kazumaxneo:20210223170107p:plain

 

リンクがあるオブジェクトは、クリックしてリンク先にジャンプできる。

f:id:kazumaxneo:20210223170255p:plain

EphA2をクリックするとUniprotにジャンプした。

f:id:kazumaxneo:20210223170330p:plain

 

図1つの表示範囲を変えるには、コーナーにポインタを移動すると矢印アイコンに形が変化するので、その状態でドラッグする。

f:id:kazumaxneo:20210223170657p:plain

Eの図の表示範囲を大きくして、それから+マークで図を拡大表示した。

 

Demo2

f:id:kazumaxneo:20210223165549p:plain

 

Violin plot

f:id:kazumaxneo:20210223165607p:plain

インタラクティブに操作可能。

 

引用

canvasDesigner2: An enhanced interactive publication-quality composite figure designing tool

Kejie Li, Jessica Hurt, Christopher D. Whelan, Ravi Challa, Dongdong Lin, Baohong Zhang

BioRxiv, Posted March 05, 2020