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ベースのプロットライブラリによってデフォルトの画像出力として設定されており、Chrome、Firefox、Safari、MS Edgeのような最新のWebブラウザによって自然にレンダリングできる。
論文図1に示されているようなマルチパネル高解像度プロットを構成することは、通常、様々なソースから個々のプロットを収集した後、控えめなプログラミングスキルを持つ科学者にとって課題となる。Microsoft Power Point のようなユーザーフレンドリーな商用ツールは、このようなプロットを配置するための実行可能なオプションとなり得るが、これらのツールは、SVG 形式の複雑なパスウェイマップを扱うことができないか、またはこの形式を
のように、低解像度でありながら、ときには不格好になることもある。
Web ベースのインタラクティブな図形設計ツールの試み(Zhang, B., 2018)に引き続き、ゲル画像のスキャニングなどの状況によっては、SVG 形式の取得が困難な場合があるため、canvasDesigner2 の入力形式を SVG のみから拡張した(論文Fig s1)。
help
helpに用意されている2分程度の短い動画を見れば基本的な使い方はわかるようになっています。
https://baohongz.github.io/canvasDesigner2/ にアクセスする。
3つのDemoが用意されている。
Demo1
左上のボタンを押すとサイズの調整ができるようになる。
それぞれの図の右上の青いマークをクリックすると、図全体を移動できる。
リンクがあるオブジェクトは、クリックしてリンク先にジャンプできる。
EphA2をクリックするとUniprotにジャンプした。
図1つの表示範囲を変えるには、コーナーにポインタを移動すると矢印アイコンに形が変化するので、その状態でドラッグする。
Eの図の表示範囲を大きくして、それから+マークで図を拡大表示した。
Demo2
Violin plot
インタラクティブに操作可能。
引用
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