ElpisMap (Scatter Plot application)
HTSデータの視覚化により、GO, No-Go, No-Needを判断しやすくする意思決定支援ツール
ElpisMapの起 動
メインメニューよりElpisMapをクリックしてください

操作の開始
ElpisMapをクリックすると、以下のような、メインページが表示されます。
以下のいずれかの操作を行い。次に移行してください。
-
準備した入力ファイルを、メイン画面にドラッグ&ドロップで入力
-
保存済みファイル一覧から選択してダウンロードする

データファイルからの読み込み
入力ファイルをドラッグ&ドロップで入力し、正常 に読み込まれると、以下のような画面が表示されます。

データファイルのファイルフォーマット
-
タブ区切りテキストファイル
(タブ文字でデータ項目が分離されており、一行一レコードの形で構成されているデータファイル)-
先頭行には各列のデータ項目名をタブ区切りで入力
-
UTF-8を推奨(「Byte Order Mark(BOM)あり」のファイルの入力にも対応)
-
入力ファイル名は英数字のみのファイル名を推奨
-
注:タブ以外の区切り文字のファイル、化合物構造を保持しているSDファイル等には対応しておりません
-
ファイル保存機能を使って保存したデータファイル
上記のファイルフォーマットとは異なりますが、タブ区切りファイルと同様にドラッグ&ドロップで入力できます。
ファイルフォーマット例

一行目:タブ区切りで列タイトルを記入します。英数字で、空白の入らない形で指定します。
この行のタイトル個数がデータファイル中の列数となります。
二行目以降:タブ区切りで、データが格納されています。
この中の、数値データだけが入っている列が描画用データ列として利用されます。
描画エリアでのマウスカーソルの操作
グラフ表示を切り替え、マウスカーソルの操作を行います。
表示されたグラフの表示を変えるには、Control Panelダイアログボックスを呼び出します。
サンプルデータファイル (PPAR_activities_2.tsv)を利用して、表示を調整する操作方法は本ビデオと同じ操作を行なってください。

ElpisMap用ワークフローの使い方

Control Panelダイアログボックスの設定を紹介ビデオを参照に設定を変更すると、上図のようにMWとAlogPを利用してグラフを表示することができます。このとき、グラフ中にマウスカーソルが置かれた状態であれば、以下のような動作が行われます。
-
マウスカーソルに追従する十字カーソルがグラフ上に表示されます
-
マウスカーソル位置に対応する、横軸及び縦軸の値が、グラフ左下に数値として表示されます
この状態で、マウス操作で以下の機能が利用できるようになっています。
-
マウスカーソルを静止させて約1秒待機すると、その周囲のプロット点が選択状態になります
(選択された点の情報はSelected Itemsダイアログボックスで確認できます) -
任意の位置でマウスの左ボタンを押してドラッグ操作を行うと、マウスボタンを離してドラッグ操作を終了した位置と開始位置を結ぶ矩形範囲内のプロット点が選択状態になります
(選択された点の情報はSelected Itemsダイアログボックスで確認できます) -
任意の位置でマウスの左ボタンでクリック操作を行うと、Annotation機能を呼び出すことができます
操作アイコンパネルとメニュー
起動直後及び操作中に表示されるメニューのアイコンは、下図のとおりです。

グラフ追加ボタン

一つの画面を最大4分割してグラフを操作できるようになります。

二分割画面
ブラウザの表示領域を左右に分割して、独立した2つのグラフが操作できるようになります。
グラフ毎の操作に利用するアイコンが各々に付随して表示されます。

三分割画面
ブラウザの表示領域を上下・左右で分割して、独立した3つのグラフが操作できるようになります。
個々のグラフ表示サイズは四分割表示時と同じです。
グラフ毎の操作に利用するアイコンが各々に付随して表示されます。

四分割画面
ブラウザの表示領域を上下・左右で分割して、独立した4つのグラフが操作できるようになります。
個々のグラフ表示サイズは三分割表示時と同じです。
グラフ毎の操作に利用するアイコンが各々に付随して表示されます。
一画面で表示できるグラフは4つまでなので、グラフ追加ボタンが利用不可状態(灰色)になります。
Selected Itemsダイアログボックス呼び出しボタン

マウスカーソル近隣の、もしくはマウスカーソルで選択した範囲中のグラフ上のプロット点を一覧表示するダイアログボックスを呼び出すことができます。この中に表示されている項目は、 Select&Copy ボタンを押すことで表のデータ(テーブルのヘッダ行および表示中のデー タ項目)コピー操作が行われます。

Selected itemとするプロット点選択方法
グラフ上でプロット点を選択するには、2つの方法があります。
-
マウスカーソル近隣プロット点の認識
グラフ上で、選択したいプロット点近傍でマウスカーソルを約1秒停止させると、自動的に近隣の点が選択状態になります。マウスカーソルを別の位置で停止させるまで選択状態が続きます。もしくは、選択状態になった直後にマウスカーソルを移動させて、表示中のダイアログボックス上で停止させた場合、グラフ上にマウスカーソルが戻って次の点を選択状態とするまで前の選択状態が継続します。 -
範囲選択でのプロット点の認識
グラフ上にマウスカーソルがある場合にドラッグ操作を行うと、ドラッグ開始点と終了点を結ぶ矩形が表示され、その中のプロット点が選択状態になります。
上記いずれの場合であっても、Categorize controlセクションで表示するカテゴリを選んでいる場合、表示中のカテゴリに対応するプロット点のみが選択状態となります。
フォント切り替えダイアログボックス呼び出しボタン

フォント切り替えダイアログボックスが表示されます。このダイアログボックスでは、以下の箇所のフォント切り替えが可能です。

-
X軸 選択済み項目名ラベル
-
Y軸 選択済み項目名ラベル
-
X軸 グリッド表示値ラベル
-
Y軸 グリッド表示値ラベル
-
Annotationとして表示するテキスト
選択可能なフォントは、Webブラウザで標準的に使われる以下のフォントから選ぶことができます。
-
Sans Serif 標準スタイル(12px、14px、17px、22px)
-
Sans Serif 太字スタイル(12px、14px、17px、22px)
-
Serif 標準スタイル(12px、14px、17px、22px)
-
Serif 太字スタイル(12px、14px、17px、22px)
※日本語などの表示の際には日本語対応代替フォント(明朝・ゴシック)が自動的に割り当てられます
フォント設定は、変更時に即座に反映されます。このダイアログボックスでの操作が終了したら、ダイアログボックス右上の×をクリックすることで閉じることができます。
注意:
フォント設定は、表示中のグラフすべてに影響します。複数のグラフを表示している場合に個々のグラフで利用しているフォントを個別に指定することはできません。
Annotationについては、個々のテキストごとのフォント変更はできません。
フィルターダイアログボックス呼び出しボタン

データとして入力された行を、各列の値で絞り込むなどの操作を行う「フィルタ機能」にアクセスできます。フィルターダイアログボックスには以下のものが表形式で表示されます

-
Column Name
入力ファイル中の先頭行記載の、各列の名称が表示されます. -
Minimum
データとして有効な値域の、最小値を指定します. -
Maximum
データとして有効な値域の、最大値を指定します. -
Invert
チェックボックスが表示されています.チェックボックスにチェックを入れると、フィルタ条件が反転して、「その列の値が、その値域に入っているものは無効」という動作になります。
使用時の注意:
-
フィルタの入力欄に値を入力する場合、
-
入力したい値をマウス操作でクリックしてください
-
数値を入力した上で「タブキー」にて入力欄を移るか、マウス操作で他の値などをクリックすることで確定します.
確定後、即座にフィルタ条件が適用されます.
-
入力欄は、未入力の場合「デフォルト値」が表示されます.
その値はそのまま上書きできます.
-
入力済みの値をすべて削除すると、「デフォルト値」が再度表示されます
-
-
数値として不適切な値や文字列、入力データの値域を外れた値を入力して確定すると、警告が表示されて、その値は取り消されます
(入力途中に「数値として不適当な文字」などが入力された場合にも、入力欄の色が変わって異常を知らせるようになっています)
-
フィルタに複数の条件を設定した場合、「すべての条件を満たす行に関係するプロット点だけ」が表示されるようになります
-
最大・最小何れかのみを入力した場合には、その値を上限もしくは下限とする値を有効とします
-
フィルタ条件は、画面上のグラフすべてに、同様に作用します.(何れか一つだけに作用させることはできません)
データの保存と読み込み
ファイル保存ボタン

「画面を表示するための設定値と、入力したデータすべて」をまとめて保存することができます。保存先ファイル名を指定するダイアログボックスが表示されますので、任意のファイル名で任意のディレクトリに保存 できます。
-
保存するファイル名は、デフォルトで「data.dat」となっていますが、任意のファイル名・拡張子に変更しても差し支えありません
保存したファイルは、4ページ記載の「ドラッグ&ドロップでのファイル入力」操作で本アプリケーションに入力できます。
この機能で保存したファイルには、JSON形式のテキストでデータや設定が記載されており、もとの入力ファイルの形式とは異なります。この点はご注意ください。(内容を直接書き換えるなどした場合の再利用可否などは保障できません)
サーバ保存・呼び出し操作ボタン

LSKBサーバに現在表示中の散布図を保存し、もしくは呼び出して再利用するためのファイル操作ダイアログボックスを表示します。(すでに表示されている場合には、ダイアログボックスを非表示にします)
サーバ保存機能では、保存するデータに名前を付けると同時にグループ名を付与して、ファイル操作ダイアログボックスでの一覧表示 でグループ毎に整理して表示させることも可能です。

ファイル操作ダイアログボックスには、4つの「操作ボタン」があります。
ダウンロードボタン

保存済みデータを手元のブラウザにダウンロードします。画面上に一覧表示されている保存済みデータから一つをクリックして選択し、このボタンをクリックします。
アップロードボタン

表示している散布図をサーバ上に保存するための操作ボタンです。保存の際、グループ名とデータ名称を与えるためのダイアログボックスが表示されます。
データ名称と紐づけるグループを指定(既存グループを選択肢から選ぶ、もしくは新規グループを選択した場合にはその名称を入力)して Save ボタンをクリックします。

名称・グループ名変更ボタン

サーバ上で保存する場合、データ名とグループ名を付与できますが、保存した後でそれらを変更する際に利用する機能です。画面上に一覧表示されている保存済みデータから一つをクリックして選択してこの機能を呼び出すと、ダイアログボックスが表示されます。
新規保存 時と同様に、データ名称と紐づけるグループを指定(既存グループを選択肢から選ぶ、もしくは新規グループを選択した場合にはその名称を入力)して Rename ボタンを押すことで、既存データの名称等を変更します。

データ削除ボタン

サーバ上で保存しているデータから、選択したものを削除するボタンです。画面上に一覧表示されている保存済みデータから一つをクリックして選択してこの機能を呼び出すと、削除してもよいか確認するメッセージが表示され、承諾するとサーバ上のデータを削除します。
Control Panelダイアログボックス呼び出しボタン

グラフの設定を行うControl Panelが開きます。

ScatterPlot control
グラフの表示状態を制御するセクションで、軸およびカテゴリ分類、プロット点サイズを制御する項目です。
-
X axis
-
Y axis
X軸・Y軸に割り当てるデータ項目と、プロットする値域を指定します。X軸/Y軸項目右端の
アイコンをクリックし、追加の設定項目の表示・非表示を切り替え可能で、以下メニューが新たに表示されます。


-
Invert min/max along this axis
この項目のチェックボックスをチェックすると、軸の最大・最小値の配置を反転させます -
Show grid with min/max/step below
この項目のチェックボックスをチェックすると、グラフ上に指定した範囲の値でグリッド線を描画します
-
Category
カテゴリ分類に利用するデータ項目と、プロットする値域を指定します。次の項目である「Categorize Control」とあわせて、カテゴリ分類数と表示色などを設定します。
-
Size
プロットを行う点のサイズを、データ項目の値に比例させる場合に指定する項目で、データ項目とプロットする値域を指定します。指定した値域で、サイズ1px~20pxで描画します。
Categorize control
カテゴリ分類を制御するセクションで、分類数とカテゴリ範囲及び表示色を制御する項目です。
-
#Categories
分類分割数を2~9の範囲で設定します。デフォルトは「3」です。 -
カテゴリ分類詳細設定
カテゴリごとの表示・非表示、値域および表示色設定を行います。-
チェックボックス
カテゴリごとの表示・非表示を切り替えるもので、即座に反映されます -
Range
カテゴリに編入するレコードの値域を最小・最大で設定します
(値域全体の最小値と最大値は変更できません) -
-
カテゴリ毎の表示色を任意の色に変更するための、色指定ダイアログボックスを表示します
(変更は即座にグラフに反映されます)
-
カテゴリ分類詳細設定の最下部にある「Show/Hide center of mass, and arrow」のチェックボックスにて、対応するグラフ上の重心点・矢印表示の有無を設定できます

注意:
カテゴリ分類数・カテゴリ番号と表示色の対応関係は、ウィンドウ中で一意に管理されており、同じ分割数を設定した複数のグラフでは同じ色設定が利用されます(複数のグラフを同じ分割数に設定した状態で、「何れかのグラフのみ表示色を変える」ことはできません)
Appearance control
グラフの表示イメージを制御するセクションで、透明度とプロット点サイズのサイズ変更が可能です。
-
Transparency
プロット点の表示時の透明度を変更することができます -
Size
プロット点の表示時のサイズを拡大することができます
Annotation機能の利用
Annotation機能呼び出しボタン


以下のような任意の「追加マーカー」配置機能が利用可能で、これをAnnotation機能と呼びます。
-
任意座標の水平線
-
任意座標の垂直線
-
任意位置に置く文字列
Annotation機能は、上記三つの機能をボタンもしくはグラフ上でのマウス操作で呼び出すことができます。マウス操作で呼び出す場合、グラフ上のAnnotationを追加したい位置にマウスカーソルを置き、マウス左ボタンをクリックしてメニューを呼び出します。
任意座標に水平線を追加する

本アイコン、またはHorizontal Lineメニューを選択
グラフ上の任意の座標で水平線を追加描画することができます。呼び出し時、垂直軸方向のパラメータ値を設定するダイアログが表示されるので、Enterキーを押して確定してください。 (Escキーを押すと、水平線追加そのものが取り消しになります)
任意座標に垂直線を追加する

本アイコン、またはVertical Lineメニューを選択し
グラフ上の任意の座標で垂直線を追加描画することができます。呼び出し時、水平軸方向のパラメータ値を設定するダイ アログが表示されるので、Enterキーを押して確定してください。(Escキーを押すと、垂直線追加そのものが取り消しになります)
任意位置にテキストを配置する

Textメニューを選択する
グラフ上の任意の座標に任意文字列を記載することができます。テキストの位置は、メニュー呼び出し字のマウスの座標が基準となります。呼び出し時、内容の文字列を入力するダイアログが表示されますので、入力してEnterキーを押して確定してください。(複数行のテキストは入力できません;この際にEscキーを押すと、テキスト配置そのものが取り消しになります)
Annotationの削除

追加したのとは逆順でAnnotationが一件ずつ削除されます。
Annotationの全削除

すべてのAnnotationが削除されます。
Annotation機能の特性と注意点
-
水平線・垂直線ならびにテキストの配置位置は、水平軸・縦軸として選択されている列および値と紐付いています
-
水平線は縦軸の列選択変更に追従します(追加時点と異なる縦軸が選択されると非表示となります)
-
垂直線は横軸の列選択変更に追従します(追加時点と異なる横軸が選択されると非表示となります)
-
テキストは、その座標が横軸・縦軸双方の列選択と紐付いています
-
テキスト追加時点と異なる軸が横軸・縦軸何れかで選択されると非表示となります
-
水平線・垂直線及びテキストの表示座標は、各軸の値として保持しているので、Control PanelでMin/Maxを変更するとそれに追従して表示位置が変わります
-
Annotationメニューは、そのメニュー上からマウスカーソルが離れたあと約2秒後に消えます