操作対象

散布図ビュー上でドラッグ

&

ドロップやクリックのような直接操作の対象となる可視化オブ ジェクトは

,

以降に示すノード・軌跡・凸包の

3

^{種類に分類される}

.

インタフェース起動時には

,

直接操作対象の可視化オブジェクトとして軌跡が指定されている

.

^{操作対象は}

4.9.2

^{節に示すよ} うに

,

ナビゲーションボタンより変更できる

.

時系列データのアニメーションによる可視化と

,

^軌 跡や凸包を組み合わせることで

,

可視化手法間のトレードオフを緩和できる

.

^そのため

, 3.3

^節の 要件

7

^{を満たせると考える}

.

操作対象となる可視化オブジェクトの種類によって

,

^{調整されるパラ} メータの時間・空間的な領域は異なる

.

^{これによって}

,

^要件

3

を満たす時間的・空間的範囲につい て柔軟にパラメータを調整できると考える

.

4.7.1

ノード

ノードは

,

散布図上の点として可視化されている各データに対応し

,

再生時点におけるデータオ ブジェクトの座標上に描画される

. 2.2.1

節で示した次元削減手法の特性により

,

^{散布図上のノー} ドの近接関係は多次元空間で対応するデータの類似性に対応する

.

ノードの操作に基づくパラ メータ調整は

,

それが表現するアニメーションの再生時点にのみ適用される

.

^{ノードの直接操作} は

,

特定の時点でのみ外れ値を含むなど

,

時点ごとに傾向が異なるデータに対して

,

^{それらの傾向} を抑制するようにパラメータを調整したい場合に有効と考える

.

4.7.2

軌跡

軌跡は

,

^ノード

(

^{可視化オブジェクト}

)

の各時点における空間的座標Ptnを曲線で結んだ表現で あり

,

散布図上のデータの変化を表現する

.

^図

14

^に

,

^{軌跡の描画例を示す}

.

^軌跡は

,

^{各時点におけ} る座標に対応するノードと

,

ノード間を曲線補完するパスから構成される

.

^{提案インタフェースで} は

,

^時点tごとのデータオブジェクト座標より軌跡を描画する

.

時系列データの変化傾向を表現す るためには

,

サンプリングされた時点間を直線で補完するのではなく

,

^{曲線で補完した方が}

,

^時系 列データの時間的特性を反映した軌跡を描画できると考える

.

^{この考えに基づき}

,

^{スムーズな形} 状の軌跡を描画するために時点間の補間手法に

cubic Catmull-Rom Spline

^曲線

[98]

^{を採用した}

.

軌跡は

,

^図

15(1)

^のように

,

散布図ビュー内に表示された任意のノードへのマウスオーバー操作に

よって描画される

.

アニメーションが再生済みの時点におけるノードの枠線は赤色で表示される

.

これによって

,

分析者にアニメーションが再生済みの時点を通知し

,

^{データ探索を促進する}

.

^同一 座標に複数のノードが存在する場合

,

全てのノードに対応する軌跡を同時に表示する

.

ノードやパスの色などのような

,

軌跡が持つ視覚的属性に対するデータ属性の割り当てに関す る比較実験の結果

,

各時点を軌跡のセグメントとして

,

付与されるデータ属性値を色の濃度に対応 づける場合に

,

精度とタスクに関する有効性が確認されている

[65].

提案インタフェースではこ の結果を参考に

,

セグメントを軌跡のノード

,

パス色の濃度をアニメーションの再生位置に対応付 ける

.

^{パスの色が濃いほど}

,

アニメーションの再生時点に近いことを意味する

.

^{軌跡を構成するパ} スの先頭を

0,

^末尾を

1

とした際のパス上の相対位置を

(0

≤ p ≤

1)

^{と定義すると}

,

^{パスやノード} の色と透明度に対応する値

(0

≤ v≤

1)

^は

Algorithm 1

^{により決定される}

.

^ここで

, threshold

^は現 在時点Tcに対応する

,

パス上の位置に対応する閾値を意味し

,

その部分が最も濃い色で描画され

る

. threshold

の値は時系列データの時点数T ^{と現在の時点}Tcより

,

^式

(10)

^{を用いて決定される}

.

Algorithm 1

^{で得られた}v^に基づき

,

ノードやパスの色は灰色

(v

=

0)

^{と軌跡の色}

(v

=

1)

^を線形補 間して決定される

.

^{パスの透明度も}

,

v^{の値に対応する}

0

^から

1

^{の値で表現される}

.

Algorithm 1Calculatev

Input: p: position in a path of trajectory，threshold Output: v: value of color (opacity)

ifthreshold=1then v=p

else ifthreshold=0then v=1−p

else

if p<thresholdthen v=p×_threshold¹ else

v=_{1−threshold}¹ +p×_{1−threshold}⁻¹ end if

end if

threshold=T_c−1

T −1 (10)

2.3.3

^{節で示したように}

,

軌跡による時系列データの可視化は変化概要の提示

[9]

^や

,

^アニメー

ションと組み合わせた時系列データのナビゲーション

[45]

における使用例が確認される

.

^提案イ ンタフェースにおいて

,

分析者は軌跡の形状から

,

対応するオブジェクトの時間的傾向の概要を把 握できる

.

^例えば

,

データが線形増加する場合には

,

^図

13(a)

^のような

,

直線状の軌跡が描画され る

.

データが周期性を含む場合には

,

^図

13(b)

に示すような一定領域で丸まった

,

^{コンパクトな形} 状の軌跡が描画される

.

^{外れ値を含む場合には}

,

^図

13(c)

のような散布図上の広域に広がる形状の 軌跡が描画される

.

^{これによって}

,

複数オブジェクトの比較を支援できる

.

^また

,

^{軌跡の形状はア} ニメーションによって変化しないため

,

アニメーションを組み合わせたり

,

^{それ自体を直接操作の} 対象にしたりすることで

,

時間軸上におけるインタラクションの衝突を回避できる

.

^{これによっ}

て

, 3.3

^{節で示した要件}

5

を満足したインタラクション設計が行えると考える

.

図

13.

軌跡の形状とデータ特性間の対応

また

,

提案インタフェースでは

,

軌跡の選択機能を通して

,

各オブジェクトの時間的傾向の分析・

比較を支援する

.

^{軌跡のパス}

(

ノードではない曲線部分

)

^{をクリックすると}

,

^図

15(2)

^{のようにパス} の色が変化し

,

^{軌跡が選択される}

.

選択された軌跡はマウスのフォーカスを外しても消えず

,

^画面

上に固定される

.

分析者は着目した軌跡を選択操作で画面上に固定しながら他の軌跡と形状を比 較し

,

それらの類似性を検証できる

. 2

つ以上の軌跡の選択も可能であり

,

^{その場合には軌跡間の}

領域を

,

^図

15(3)

のように凸包で塗りつぶす

.

^{これにより}

,

複数オブジェクトに関する時間的傾向

を判断・比較しやすくなると考える

.

^{凸包の詳細については}

4.7.3

^{節で説明する}

.

^{選択済みの軌跡} は固有色で強調される

.

^{強調に用いる色は}

,

^{対象の名称に基づき}

D3.js

のカラースキームによって

[0

,

1]

の連続値から決定される^*8

.

図

14.

軌跡

図

15.

^{軌跡の選択}

次に

,

軌跡のナビゲーション機能を説明する

.

^軌跡は

, 2.3.3

^{節で示した}

DimpVis

^のように

,

^オブ ジェクトの時間的傾向に対するナビゲーション機能との組み合わせに関する有効性が示されてい

る

[45].

提案インタフェースでも

,

同様のナビゲーション機能を採用する

(

^図

16).

現在の時点を除く軌跡の各ノードにマウスオーバーを行うと

,

その時点における全ノードの分

布が

,

^図

16(2)

のように散布図上に薄く重畳表示される

.

それらのノードをクリックすると

,

^図

16(3)

^のように

,

対応する時点へとアニメーションが遷移する

.

^すなわち

,

^{重畳表示されていたオ}

ブジェクト分布に対応する時点へとアニメーションが遷移し

,

操作適用後のアニメーション再生 は

,

遷移後の時点から行われる

.

軌跡の現在時点に対応するノードにマウスオーバーした場合に は

,

オブジェクト配置は同一であるため

,

^{重畳表示は行われない}

.

軌跡による時間的ナビゲーショ ンを利用すると

,

散布図上での現在時点のオブジェクト分布に対するコンテクストを失わずに

,

^他 時点でのオブジェクト集合の分布や

,

時点間の相違点を確認しながら

,

散布図の傾向が明確に変化 する時点に着目した探索を行える

.

^{これによって}

,

スライダなどの間接的な

UI

^{を使用せずに時間} 軸に対するナビゲーションを提供できる

.

軌跡のドラッグ

&

ドロップに基づくパラメータ調整は

,

軌跡に対応する再生範囲について適用 される

.

^そのため

,

すべての時点で同一オブジェクトを強調したい場合などに有効と考える

.

^軌跡

*8https://github.com/d3/d3-scale

(1)軌跡のノードへのマウスオーバー

(2)対応する時点の散布図を重畳表示

(3)クリックで全体に反映(時間的遡及)

図

16.

軌跡を利用したアニメーションの暗黙的な制御

が表現する時点の範囲

(

^{パラメータの調整範囲}

)

^は

, 4.5.2

節で示した再生範囲スライダを用いて変 更できる

.

4.7.3

凸包

凸包は

,

ノードや軌跡などのオブジェクトの集合を表現する可視化オブジェクトである

.

^プロト タイプインタフェースでは

,

^軌跡

(

オブジェクトの時間的変化

)

の集合を表現する手法として

,

^凸 包を時系列データの可視化にも適用する

.

^{これによって}

,

各時点におけるオブジェクト座標の広が りのような視覚的傾向の違いや

,

パラメータ調整の影響を分析するタスクを支援できると考える

.

そのため

.

提案インタフェースでは単一の時系列データの変化を軌跡で表現し

,

^{グループの時間的} な傾向の変化を凸包

(

^{複数軌跡の集合}

)

^{を用いて表現する}

.

ノード集合を集約して表現する手法と して

,

外れ値などを含めたデータ特性をコンパクトに可視化する

Butterfly Plots [78]

^{などが存在} するが

,

^{凸包の採用により}

,

^ノード

(

特定時点における単一オブジェクトの位置

)

^と軌跡

(

^単一オブ ジェクトの時間的変化

),

^凸包

(

^{オブジェクトの集合}

)

^による

,

一貫性のある設計に基づく可視化を 提供できると考える

.

^また

,

個々のオブジェクトとグループ間の関係を

,

凸包とそれに含まれる軌 跡の形状から把握できる

.

凸包によるオブジェクト集合の選択結果は詳細ビューにも反映される

.

図

17

^{に示すような}

,

複数のインタラクションを通して凸包を作成できる

.

^{一つ目の作成手法と} して

,

スケッチベース入力に基づく複数データの選択が存在する

(

^図

17(a)(b)).

^また

,

^{複数軌跡の}

選択操作

(

^図

15(3))

^{が挙げられる}

.

^前者は

,

^{近接する多数}

(5-10

^個以上

)

のオブジェクトを暗黙的

に指定する操作に基づき

,

オブジェクト集合の時間的傾向を把握することを目的とする

.

^一方で

,

後者は少数

(2-3

^個

)

オブジェクトの明示的な指定に基づく比較を目的として描画されることを想 定する

.

^以降に

,

それぞれの描画方法を説明する

.

スケッチベース入力として

,

画像編集処理ソフトウェアの

lasso selection (

^{投げ縄ツール}

)

^*9と類 似した

,

散布図上の領域を囲む線をドラッグ

&

ドロップで描画する操作に基づく選択手法を採用 する

.

システム側は線が描画された領域に含まれるノード集合を選択し

,

時点ごとのノード座標に 基づき凸包を描画する

.

ポリゴンの描画に基づくデータの選択は

,

複数ビュー間の連携を採用する 資格的分析インタフェースにおいて

,

散布図上のオブジェクト集合から構成されるクラスタを選

*9https://helpx.adobe.com/jp/photoshop/using/selecting-lasso-tools.html

択したり

,

フィルタリングする際の有効性が示されている

[61].

^そのため

,

^{このようなオブジェク} ト集合の選択方式は

,

散布図・詳細ビュー間の連携を行うプロトタイプインタフェースにおいて 有効と考える

.

^また

,

^{この機能は}

4.3.2

^{節で示した}

,

ペイントソフトを模したインタフェースの設 計原則にも対応する

.

探索モードに基づき

,

異なる形状の凸包が描画される

.

^{再生モードでは}

,

^図

17(a)

^のように

,

^再生 時点における選択対象ノードの位置に基づく凸包が

,

^{静止モードでは図}

17(b)

^{のような複数デー} タ軌跡の凸包が描画される

.

複数軌跡を選択すると

,

^図

17(c)

^のように

,

それらの間の領域を赤色の凸包で塗りつぶして表現 する

.

^{これによって}

,

データの時空間的な広がりや

,

グループでの変化傾向を視覚的に把握できる と考える

.

複数軌跡の選択で描画される凸包は

,

静止モードにおけるスケッチベース入力で描画さ

れたもの

(

^図

17(b))

^{と同様の形状である}

.

この形式で描画された凸包は

,

軌跡の集合を明示的に表

現するため

,

スケッチベース入力で作成されたものとは異なり

,

探索モードによる形状の変化は行 われない

.

分析者はアニメーションを再生しながら凸包形状の変化を観測し

,

オブジェクト集合の時間的 な変化傾向を把握できる

.

静止モード時に凸包を確認する場合には

,

凸包の空間的な広がりを確認 しながら

,

特定時点で近接する点が他の時点では離散するなどのオブジェクト集合が持つ傾向を 把握できる

.

^{このように}

,

探索モードに応じた凸包の描画により

,

時空間軸間におけるインタラク ションの衝突を回避し

, 3.3

^{節で示した要件}

5

^{を満たせると考える}

.

凸包は

,

通常は上述の各選択手法について

1

^{個ずつしか作成できず}

,

新規に作成した場合には前 の選択はリセットされる

.

複数の凸包を同時に作成し

,

オブジェクト集合ごとの傾向を比較したい

場合には

, 4.9.3

節で示すラベリング機能を用いる

.

凸法の操作に基づくパラメータ調整は

,

特定のオブジェクト集合を強調するような意図に対し て有効である

.

静止モード時にスケッチベース入力で作成される凸包や

,

複数軌跡の選択による凸 包に対するパラメータ調整は

,

全時点に対して適用される

.

^一方で

,

アニメーション再生時の凸包

(

^{ノードの凸包}

)

に基づくパラメータ調整は

,

アニメーションの再生時点に対してのみ適用される

.

視覚的混乱の抑制や調整結果の確認を支援するために

,

操作後にアニメーションは操作適用先の 時点で静止される

.

凸包の形状によるパラメータ調整結果の違いは

,

^時点t^{でのみグループを強調} したいか

,

全ての時点について強調したいかなどのように

,

分析者の意図や目的によって使い分け られる

.

^{これによって}

, 3.3

^{節で示した要件}

3

^{を満たせると考える}

.

ドキュメント内 首都大学東京 (ページ 59-63)