芸術科学会論文誌 Vol.4 No.4 pp.108-119

螺旋階段：属性を用いた情報の 3 次元一括可視化
桑原 明栄子 †牧野 光則 †† 中央大学大学院 理工学研究科 情報工学専攻

Spiral Steps:Whole 3D Information Visualization
based on Grouped and Sorted Attributes
Meeko KUWAHARA† Mitsunori MAKINO†† Graduate School of Science and Engineering，Chuo University
Email:kuwahara@makino.ise.chuo-u.ac.jp, makino@m.ieice.org
アブストラクト 年々増加するディジタルデータの理解と把握を深める手段として，コンピュータグラフィックスによる情報可視化技術は重要性を増している．著者らは階層構造データを対象として，各要素がもつ属性により表示形態や配置順序を決定する 3 次元一括可視化手法・システムを研究している．これまでに情報をアイコンで表し，入れ子形式で，円領域内に配置する手法「円形都市」を提案している．この手法は，属性の表現，ならびに，属性を利用した順序の入れ替えに対し，ユーザの理解を妨げずに表現できる．また，データの構造だけでなく，同時に表現可能な属性量が多い．一方で，平面上に全データを一面展開するため，提示情報の視認性が一部十分ではなく改善の必要がある．
本稿では，これを拡張し，情報を螺旋状に配置し，枠で表現していた同一グループを台座で表し，アイコンサイズの高さを統一することで，各アイコン，台座の遮蔽を軽減する．そのことにより，仮想 3 次元空間のより有効な利用とユーザのより容易な理解をはかる．さらに，階層構造に限らず，属性情報を持つ要素で構成されているデータにも適用し，システムの汎用性を向上する．

1

はじめに

本論文では，見やすく，操作性が高く，かつ，属性を利用した情報の可視化手法システム「円形都市」[1]を改良した「螺旋階段」を提案する．
「螺旋階段」では，「円形都市」における，遮蔽を軽減し，3 次元空間利用の効率を目的とした．
年々増加するディジタルデータの理解と把握を深める手段として，コンピュータグラフィックスによる情報可視化技術が重要性を増している．また，専門家だけ
でなく，一般ユーザも扱う情報の種類や量が増えている．このため，用途に応じ，対象情報を効果的に表示・処理し，ユーザが容易に把握可能なユーザインターフェ
イスが必要である．情報のより的確な理解のためには，
データ構造の表示だけでなく，構造以外の情報 (属性)の表示，ならびに，ユーザが任意に指定する情報から定められる条件によって順位が入れ替わったデータの表示も求められる．そのため，情報の持つ属性をできる限り一括して表示でき，かつ，順位の入れ替えの際に，データ要素または集合を表す形状が不変であることが望ましい．
著者らは階層構造データを対象として，各要素がもつ属性により表示形態や配置順序を決定する 3 次元一括可視化手法・システムを研究している．これまでに情報をアイコンで表し，円領域内に入れ子形式で，配置する「円形都市」を提案した [1]．
「円形都市」では，属性をもつ「ある程度」大規模な階層構造データを主対象とし，その情報を管理するユーザの利用を想定する．ここで，「ある程度」の大規模な階層構造データとは，企業や団体で管理する数万という情報ではなく，例
えば，大学の研究室のサーバや，個人の Web サイトなどの数千〜数百単位の情報を指す．この手法は，属性の表現，ならびに，属性を利用した順序の入れ替えに
対し，ユーザの理解を妨げずに表現できる．また，全体構造だけでなく，同時に表現可能な属性量が多い．一方で，平面上に全データを一面展開するため，提示情報の視認性が十分ではない部分がある．

108

そこで，本稿では，「円形都市」を拡張して，情報を螺旋状に配置する．さらに，アイコンサイズを統一することで，各アイコン，台座の遮蔽を軽減する．以上
により，仮想 3 次元空間のより有効な利用とユーザのより容易な理解をはかる．さらに，階層構造に限らず，
属性情報を持つ要素で構成されているデータには，階層構造型に分類することで効果的な理解を示すことができものがある．提案手法をこの種のデータに適用させ，そのことにより，提案システムの汎用性の向上をはかる．

2

情報の 3 次元一括可視化の課題と関連手法

2.1

課題

情報を可視化する際に，ユーザのより深い理解と把握のため，対象情報を効果的に表示・処理する必要がある．また，的確な情報の把握のためには，可視化形
式も重要である．特に，属性をもつ「ある程度」の大規模なデータを主対象とし，その情報を管理するユー
ザの利用を想定した場合，以下の要件を満たす情報の3 次元一括可視化が望ましい．

• 一般的に浸透している形式を基礎とする高い親和性• できる限り多種類の属性の同時表示• 情報の容易な操作と把握• 3 次元空間の有効な利用
さらに，情報のより容易な把握のために，ユーザが指定する属性に応じて配置順序が変化することが望ましい．この場合，可視化結果に影響 (形状等) が少ない方が容易に対象を理解できる．

芸術科学会論文誌 Vol.4 No.4 pp.108-119

2.2

関連手法：階層構造データの一括可視化
手法

情報の可視化は広く利用されており，IT 分野では重要な位置を占めている．特に，階層データの一括表示に関する研究は近年盛んである [2]．
階層データを下位階層に至るまで一面で表示する手法に，帯グラフを階層構造に合わせて入れ子構造にした「Tree Map」[3] や，アイコンを利用した「データ宝石箱」[4]，「データ宝石箱 2」[5] がある．
「データ宝石箱」は，階層を構成するデータ群を配置し，矩形で囲
む処理を下位階層から上位階層に向けて反復すること
で，階層データ全体を画面空間に配置する．
「データ宝石箱 2」は，「データ宝石箱」を改良し，テンプレートを利用することで，データの意味やユーザの意図を反映した一意な画面配置を実現している．
「Tree Map」や「データ宝石箱」，「データ宝石箱 2」は，矩形表示を利用した可視化手法である．通常，モニタなどの出力デバイスは矩形であるため，画面利用効率が高い．一方で，円を利用する配置手法に，階層構
造を円錐形状を利用して配置する手法 [6] や，データ要
素をアイコン化して放射状に並べる手法「Hyperbolic
Browser」[7] がある．
情報を一括表示する際，表現可能な空間に制限があり，画面利用効率が重要となる．これらの関連手法は，
画面利用効率が良く，巨大規模な情報の一括可視化に向いている．しかし，順序の入れ替え，属性表示，高い操作性という点で問題点を残している．

2.3

円形都市


    

図 1: グループ表示構成

図 2: アイコン配置順「円形都市」は，属性を用いた大規模階層構造デー
タの見易さと高い操作性を目的とした一括可視化スタ
イル・システムで，以下を実現している [1]．

(要件 1) 一般ユーザにとって受け入れやすい形式(要件 2) 配置順位入れ替えに伴う形状変化の低減

類された集合には，データ要素ならびに入れ子になった下位レベルに属するデータ要素が含まれる．この要素集合を「グループ」と呼ぶ．
円形都市では，アイコンでデータの各要素を表し，要素の属性に応じて，アイコンの形状，色，並び順を変化させる．グループに含まれるアイコンの集合を枠線で囲み，表す．特に，枠線の形状は構造全体を円形，第1 レベルに属すグループを扇型とする (図 1)．各アイコ
ン・グループは，指定された属性によって順序付けられ，これに基づいた配置を一括表示する．このとき，アイコンは，複数生成する同心円周上に，最外周より互い違いに配置する (図 2)．
円形都市が主対象とする規模の階層構造データは，各要素が多種類属性を持ち，その属性によって，順序を並べ替えることで，ユーザの情報の理解を深めることができる．また，一般に普及している形式であるため，専門家だけでなく，一般ユーザが主対象である．そのため，表示形式として一般的に認知されている円グラフ
を基本形式に利用する (要件 1)．情報の容易な理解のためには，順序の入れ替えをする際に伴う形状変化はないことが望ましい．円グラフを利用することで，第1 レベルに属す各グループは円の中心を軸として分割できる．扇型となる各グループの形状は，順序の変更(例：昇順→降順) に対して不変であり，配置が異なるのみである (要件 2)．また，アイコンの形状や，色を変化させるだけでなく，属性または要素の状況に応じて，アイコンの上に別の形状を表示することで，各要素が保有する多種類の属性を表現する (要件 3)．円形
は，ルーレットのように回転でき，縦軸 (視点方向変更)と横軸 (回転) の 2 軸で操作可能である．したがって，ある要素に注目するための操作は，2 軸による移動で行え，元の位置に復帰することも容易である (要件 4)．
さらに，円グラフを利用することにより，第 1 レベルの各グループの要素数によるシェアを容易に把握できる．
一方で，全体を視認する上では，一般的な表示デバイ
スの形状上，画面利用効率が低い．しかし，非表示領域が固定しているので，その領域 (例えば矩形の四隅)に指定したデータの詳細などを表示して有効活用する．
「円形都市」で表 1 のデータを表 2 の形式で可視化
し，名前順でソートした例を図 3 に示す．図 3 の左図
は真上視点，右上図は斜め視点，右下図は真横視点から見た図である．右上図，右下図では，アイコン同士の遮蔽が多く，画面上奥に配置されたアイコンの視認が困難である．さらに，グループを示す枠線の認識も困難である．したがって，アイコン同士の遮蔽を低減し，グループのまとまりをより把握できるようにすることが求められる．

3

螺旋階段

3.1

概要

本論文では，遮蔽を低減し，3 次元空間利用の効率化を目的として，「円形都市」を改良した「螺旋階段」を提案する．螺旋階段では，属性を指定して得られる第 1レベルに属すグループを螺旋状に配置する．また，アイコンの高さを統一し，「円形都市」では高さで示していた属性値を，色のグラデーションで表す．

(要件 3) できる限り多種類の属性の表示(要件 4) 情報の容易な把握と操作
円形都市では，データの階層の深さを「レベル」と呼び最上位階層から第 1，第 2，…と順序付ける．各レベ
ルは何らかの属性によって要素が分類されている．分

109

芸術科学会論文誌 Vol.4 No.4 pp.108-119

表 2: 表示形式：円形都市
背景
分類した属性のグループ
階層の深さ (レベル)
順位
グループ数
要素数
要素：グループ選択
要素：グループ詳細情報
要素：不正アクセス
グループ：アクセス制限
アクセス元：ac.jp
アクセス元：go.jp
アクセス元：その他
アクセス数
ファイル拡張子：html/htm
ファイル拡張子：shtml
ファイル拡張子：txt/doc
ファイル拡張子：gif
ファイル拡張子：jpg
ファイル拡張子：zip/tar
ファイル拡張子：cgi/php
ファイル拡張子：exe
ファイル拡張子：その他

図 3: 円形都市 [1]図 4: 螺旋階段

表 3: 表示形式：螺旋階段
分類した属性のグループ
階層の深さ (レベル)グループ：アクセス制限
アクセス元：ac.jp
アクセス元：go.jp
アクセス元：その他
アクセス数
ファイル拡張子：html/htm

表 1: データ 1(Web データの縮小版)
全ファイル数././img./service1./service1/./service1/img./cgi./cgi/./cgi/img./cgi/log./service2./service2/./service2/service s1./service2/service s1/img./service2/service s1/comp./service2/service s1/program

R G B：0 0 0
枠
枠の太さ，
色のグラデーション
矢印/180 180 180
区切る枠の数
アイコンの数255 255 255
画面右下に表示
255 255 255/球
枠線の種類：破線
形状：三角
形状：丸
形状：四角
アイコンの高さ
102 153 255
153 102 255
0 0 255
255 0 153
255 51 51
51 204 0
255 204 0
255 102 051 51 51

計 100
計9
計 12
計 24
8
16
計 15
8
4
3
計 40
1
9
16
7
7

ファイル拡張子：shtml
ファイル拡張子：txt/doc
ファイル拡張子：gif
ファイル拡張子：jpg
ファイル拡張子：zip/tar
ファイル拡張子：cgi/php
ファイル拡張子：exe
ファイル拡張子：その他

110

台座
色のグラデーション
台座の色
形状：三角錐形状：球
形状：四角柱色のグラデーション
多：102 153 255，
小：153 204 255
多：153 102 255，
小：200 170 255
多：0 0 255，
小：179 179 255
多：255 0 153，
小：255 193 231
多：255 51 51，
小：255 191 191
多：51 204 0，
小：210 255 196
多：255 204 0，
小：255 244 200
多：255 102 0，
小：255 210 181
多：51 51 51，
小：180 180 180

芸術科学会論文誌 Vol.4 No.4 pp.108-119
提案手法では，「円形都市」同様，属性をもつ「ある程度」大規模な階層構造データを主対象とし，その情報を管理するユーザの利用を想定する．ところで，アンケート結果や住所・氏名などの個人情報などを基にした統計情報は，様々な属性を有しており，可視化することは意義深い．非階層構造であるこれらのデータ
も，ある属性を基に順位付け・分類すれば階層構造と同じ形式となる．そこで，螺旋階段では，階層構造だ
けでなく，非階層構造にも対象を拡大する．以下，「レベル」，「グループ」の定義を階層構造データだけでな
く，ある属性に基づいて階層構造化したデータについても適用する．
図 4 は，「螺旋階段」で表 1 のデータを可視化した例
である．アイコンの高さで示していたファイルアクセ
ス数を色のグラデーションで示すため，影響する表示
形式を変更している (表 3)．図 4 の右上，右下では，アイコン同士の遮蔽が図 3 と比べて減少し，さらに各グ
ループの視認も向上していることが確認できる．
次節以降に「螺旋階段」の手法の詳細を示す．

3.2

イコンの形状・色に加えて，属性や要素の状態に応じて，アイコンの上に物体を付加することで，同時に表示可能な属性の種類を増やし，多種類の属性に対応する．また，情報を取得したいグループを表すアイコンをクリックすることにより白色表示され，情報が画面左下に表示される．グループだけでなく要素の場合も同様である．
以下の手順でデータを配置する．Step3 以降が文献[1] に対する提案手法の改良点である．

Step1 可視化に必要な情報を対象から取得する．
Step2 全てのアイコンの配置に必要な最小の円周の列
数 N を以下の手順に従って暫定的に決定する (図6，7) ．
Step2.1 全要素数 (アイコン) を T とする．中心位置から i 列目の円の半径を Ri とアイコンの間隔を Ii とする．
Step2.2 i 個目の円周に配置可能なアイコン数 niiを，ni =floor( 2πR
Ii ) で決定する．
Step2.3 全アイコンをできるだけ小さな円内にPN配置するために， T ≤ i=1 ni を満たす最小の N を求める．

可視化手法

Step3 Step1 で取得した情報から，ユーザが指定する属性または，構造で分類する．
Step4 全要素 T に対する，Step3 で分類した第 1 レベルに属す各グループが含む要素数の比率を計算
し，各グループが占める扇型の角度を決定する．
但し，各グループに子グループに属さない要素群が存在する場合，要素群を，1 つの子グループとして扱う．

図 5: 台座配置

Step5 第 1 レベルで要素数が最小のグループについて，
Step2 で暫定的に求めた N 個の同心円周に扇型の角度が最小となるようにアイコンを配置する．

図 6: 円周生成

図 7: アイコン配置提案手法では，「円形都市」同様に，データの持つ属性の種類に応じて，要素の表示の形状または色を変化させる．また，グループの配置順ならびに色，形状を決定する．各要素を同一サイズのアイコンで表現し，複数作成する同心円周上に，最外周より配置する．グルー
プは含まれるアイコン集合が乗る台座で表す (図 5)．各
台座には要素，ならびに，その子グループ (台座) が入れ子形式で乗る．特に，台座の形状は構造全体を円形，
第 1 レベルに属すグループは扇型とする．このとき，指定された属性により，順位を決定する．これに基づいて螺旋状に各グループが配置されるよう，台座の位置と高さを決定する．第 1 レベルより下位レベルに属するグループは，上位グループの台座の上に乗って配置される．円形は中心を軸として展開できるため，第 1レベルに属すグループ (扇型) の形状は第 1 レベルでの順位変更 (ソート) にに対して不変である．さらに，ア

111

Step6 残りの第 1 レベルに属すグループとそれ以降のレベルに属すグループ，各アイコンを Step4 で求めた比率に基づき配置する．要素が比率によって求めた区画に入りきらない場合は列数を増やす．
(Step5 で配置した最も要素数が少ないグループの配置配分により，比率にずれが生じた場合は，ずれを残りのグループの比率に等分して反映させる．)
Step7 Step1 で取得した情報の中からユーザによって選択された，順位表示したい情報を，ソートする．
Step8 Step7 の順位により，各グループの台座の位置を決定し，描画する (図 5)．第 2 レベル以降に属(アイコンの高さ)
すグループの台座の厚みは， (階層レベル数−2) で決定する．
Step9 Step7 の順位により，各アイコンを Step2 で決定した同心円周の最外周より，円周に沿って，互い違いに配置し，描画する．

芸術科学会論文誌 Vol.4 No.4 pp.108-119

Step10 初期視点を真上 (円表示) とし，視点移動を真上から真横までできるよう設定する．さらに，円の中心を軸とし，ルーレットのように回転する視点変更を設定する．

3.3

表 4: データ 2(団体の仮想的データ)

表示形式

提案手法では，各アイコンを並び，形状，色，色のグラデーション，表示の付加で区別し，各台座を区画，並び，位置，形状，高さで区別する．画面表示特性を考慮し，並びは属性情報から得られる順位，形状ならびに色は種類，グラデーションは要素の数値を示す属
性とレベルの深さ，表示の付加は全要素に起こりうる事象に対応させる．形状，色は共に種類を表すが，色は形状よりも種類を多く直感的に伝えるため，種類が多い属性を割り当てる．各表示形式の割り当ては，テキスト形式のファイルで記述し，実行時に入力・設定
する．

3.4

特徴

提案手法は，「円形都市」と同様に，円グラフの形式の特徴を有効に活用し，かつ，仮想 3 次元空間を有効に利用している．円形を基本形状とし，円の中心を軸としているため，各アイコン (データ要素) を確認する
際に視点変更の動線がわかりやすく，操作が容易である．これより，構造全体の把握だけでなく，注目要素・グループの位置把握も容易である．また，アイコンの形状・色に加えてアイコン上に物体 (球など) を付加できる．このため，同時に表現可能な情報量が多く，ユー
ザの情報把握に有効である．さらに，形状の非表示領域が固定されているため，その領域に指定された要素
またはグループの詳細等を表示することで，領域を有効活用する．
第 1 レベルのグループを螺旋状に配置し，表示するため，3 次元空間中の任意視点からデータを閲覧でき，視点変更に違和感がない．特に，真横視点からの各グ
ループの視認が可能となり，かつ，第 1 グループに属すグループの順位の視認が向上する．また，分類の変更，第 1 レベルの順位の変更 (ソートする属性情報，順位そのものの変化) の際，配置の再構築ならびに，表示形式の変更が不要であり，ユーザの理解を妨げない．
なお，アイコンのサイズを統一するので，「円形都市」
でアイコンの高さが表していた数値属性は，色のグラ
デーションで表現する．これにより，真上視点からも数値属性を視認できるようになり，アイコンによる遮蔽が軽減される．

4
4.1

シミュレーション
実装

非階層構造データとして，「ある団体 (人数：100，属性：人名，所属，職制，団体所属年数，作業の状態)」(表4) を仮想的に作成し，表 5 の表示形式で提案手法に適用した．なお，紙面掲載の画像で提案手法の有効性を確認するために，データ数は現実的なものより小規模だが，提案手法が主対象とする規模のデータに対しても実験済みである．シミュレーションは OS：Windows XP，
CPU：Intel Pentium4 3.20GHz，メモリ：1GB，ビデ

112

総人数
所属
General
Headoffice
Personnel
Laboratory
Development
Business
Branch
職制
GeneralManagement
Staff
作業の状態
完了
免除
未完
団体所属年数

100 人
7 種類
9人
9人
6人
16 人
26 人
21 人
13 人
3 種類
9人
19 人
72 人
3 種類
49 人
12 人
39 人
0 - 42 年

表 5: 表示形式：団体の仮想的データ
背景
中心の円柱
階層の深さレベル通常
作業未完が過半数超過
順位
グループ数
要素数
要素：グループ選択
要素：グループ詳細
要素作業状況
作業完了
作業免除
作業完了
職制：取締役
職制：管理職
職制：スタッフ
所属年数
所属：Other
所属：Headoffice
所属：Personnel
所属：Laboratory
所属：Development
所属：Business
所属：Branch
ソート条件

000
255 102 153
色のグラデーション
30 30 30，150 150 150
55 65 87，133 148 177
矢印/255 102 153
区切る台座の数
アイコンの数255 255 255
Window：右下に表示
球の表示なし
球/255 255 128
球/128 128 128
形状：三角錐形状：球
形状：四角柱色のグラデーション
長くなるにつれ濃色に変化
102 153 255，153 204 255
153 102 255，200 170 255
0 0 255，179 179 255
255 0 153，255 193 231
255 51 51，255 191 191
51 204 0，210 255 196
255 204 0，255 244 200
4 種類
名前順，作業未完人数順，所属年数順，人数順

芸術科学会論文誌 Vol.4 No.4 pp.108-119

表 6: 処理時間
総人数
100
200
300

時間 [ms]
約 16
約 30
約 42

総人数
400
500
5000

表 7: 評価対象者
時間 [ms]
約 50
約 59
約 450

人数
男女
年齢層
〜10 代：20 代：30 代：40 代〜
職業
学生：勤労者：その他

50 名
34：17
0：43：4：3

16：30：4
オボード：ATI RADEON X300 のマシン上で OpenGL
を用いて行った．ウインドウの表示サイズならびに視点移動 (真上から真横まで) はマウスで自由に変更可能
表 8: 評価対象データとした．
図 12-25 にシミュレーション結果を示す．各要素の要素数 レベル数 第 1 レベルのグループ数
属性に対し，所属を色，職制を形状，団体所属年数を
1
100
4
8
色のグラデーション，作業の状態をアイコンの上方に
2
3000
4
9
ある球で表現する．図 12-23 は，所属，職制，作業の
3
5000
4
15
状態で分類し，名前順，人数順，所属年数順，作業未
4
10000
4
30
完人数順でデータをソートし，真上 (初期視点)，斜め
5
100
10
2
上，真横から可視化した結果である．作業未完人数順
6
360
4
7
は，第 1 レベルに属すグループを作業未完人数でソー
7
200
2
2
トし，同一グループ内の人は名前順でソートした．図
8
200
2
6
12-23 は分類，ソート情報，または順位が変更した際
9
200
3
3
も基本形状は不変のため，配置の再構築の必要がなく，
10
60
2
59
データ位置の変更による違和感はない．
図 24 はグループの詳細情報，図 25 は人の詳細情報を表示した例である．各図のアイコンの上方にある球
4.2 評価・考察
は，作業未完の場合に灰色，免除の場合にクリーム色
で，属性の種類や環境・状況から必要性を判断して表提案システムと，「円形都市」や関連手法との比較，さ示している．
らに提案システムの 3 次元空間の活用や，情報把握・理
データ読み込みから初期視点での描画までの処理時解の程度について，情報可視化に興味のある一般ユー
間は，表 1 のデータで約 15ms，表 4 のデータで約 16ms
ザ 50 名を対象にアンケートを実施した．表 7 に 50 名であった．総ファイル数が 100 個から 5000 個のデータの詳細を示す．操作手順 (操作方法の説明) を元に，利
(表 4 のデータを必要回数コピー) に対する処理時間 (そ用時間は限定せず，自由に利用してもらい，評価方法
れぞれ 10 回処理時間を計測した平均値) を表 6 に示す． については文書にて説明を行なった．
提案手法には表示順位ならびに配置を決定するための提案システムを，表 8 の 10 種類のデータを用いてソーティングが含まれているが，主要処理はデータ読「円形都市」と比較した．その結果を表 9 に示す．評価
み込みと各ファイルに対する配置 (表示) である．このは「1」を「円形都市」が優位，「5」を「螺旋階段」が優ため，データ数と処理時間は概ね比例すると考えられ， 位，「3」をどちらともいえないとした．表 9 から，総合
表 6 からもそれが裏付けられる．また，「円形都市」(図的な見やすさ，要素・グループの視認性で提案システ
3) のデータの処理時間は，約 12ms であった．
「円形都
ムは「円形都市」に比べ優位性が示されている．また，市」と比べて多少の処理時間の増加があるが，ユーザ
その他の多くの項目において，同様，または「螺旋階のストレスは無いと考える．
段」に優位側に評価が分布している．以上から，提案シ
提案手法はマウスを右クリックしながら画面を上下
ステムは，「円形都市」の利点を損なわず，視認性が向に動かすと図 12-23 のように視点変更され，左右に動上していることがわかる．また，数値属性を色のグラ
かすとルーレットのように回転する．そのため，上下デーションで表現することにより，真上視点からも視左右の操作のみで情報を把握できる．また，情報を選認が可能となった．その一方で，アイコンの高さを統択し，注目 (ズームイン) した場合も左右に動かすこと一したことにより，「円形都市」に比べ，上述のようににより注目データを移動することや戻すことが容易で遮蔽は軽減したが，数値属性の視認が真上視点以外にある．操作中のキャプチャ映像をディジタルデータとおいて多少低下している．また，色で表現している属
して添付する．
性の種類は，色のグラデーションで表されるため，色以上から，提案手法は「円形都市」の特徴を損なうをユーザが任意で与える際，困難となり，さらに，利ことなく，視点変更による視認性を高め，本論文が目用可能な色数が減少する．そのため，より一層の全視
指した 3 次元空間の有効な利用を実現できていること
点からの識別，各要素の視認性の向上への改良が必要を確認できる．また，図 4 のような階層構造データだである．
けでなく，階層構造表示することで理解を深められる「円形都市」を基本とし，第 1 レベルに属すグルー
非階層構造データにも対応していることがわかる．
プを螺旋状に配置した場合を図 26，アイコンサイズを統一した場合を図 27 に示す．図 26 は，グループ・要素の確認は，図 3 と比較して，多少の改善が見られる
113

芸術科学会論文誌 Vol.4 No.4 pp.108-119

表 9: アンケート評価：円形都市との比較

1
0
0
0
0
2
2
0
1
4
0
0
0
0

2
4
0
0
4
14
8
0
3
4
0
0
3
0

3
16
5
8
37
21
14
45
6
5
16
41
44
46

4
12
19
27
8
10
21
3
19
24
13
4
3
4



5
18
27
15
1
3
5
2
21
13
21
5
0
0










%  &(' % 

図 9: 有効階層レベル数調査：螺旋階段   


1
0

2
0

3
0

4
4

5
46

0

0

0

6

44

0

                                                     




 
#&
%$# "(!
"!  
# '
         

7

"
! 
 $#         

表 11: アンケート評価：宝石箱 2 との比較

0)  *+ ) 〜10000 個〜5 レベル〜50 種類0

図 8: 有効要素数調査：螺旋階段

 

アンケート項目 (理解度)
総合的な見やすさ
操作性(宝石箱の視点移動無し)
操作性(宝石箱の視点移動有り)
操作性(真上視点のみでの比較)
グループ順位の把握
要素順位の把握
構造の把握
各要素の分布の把握
画面利用効率
順序入れ替えに対する把握


 

 
 





表 10: 円形都市の有効範囲
要素数
階層レベル数
属性の色






アンケート項目 (理解度)
総合的な見やすさ
要素の視認性グループの視認性
要素の種類：形状要素の種類：色要素の数値属性
要素の状態 (球)データ構造 (グループ)
データ構造 (要素)順位の把握 (グループ)
順位の把握 (要素)処理時間
処理時間 (ソート条件変更)!#"

図 10: 有効色数調査：螺旋階段
$ 

%'&

$ 



!

 


43







 



0
0
0
0
0
0
0

0
0
0
0
0
0
0

0
0
0
0
0
0
0

12
0
0
22
15
24
5

38
50
50
28
35
26
45




 #
 "




       








図 11: 有効色数調査 (ガイド表示)：螺旋階段

114

芸術科学会論文誌 Vol.4 No.4 pp.108-119
が，アイコン同士の遮蔽が多く，視認性に問題がある．
図 27 は，図 26，図 3 と比較して，斜め視点において，グループ・要素の視認は改善されている．しかし，真横視点における，アイコン同士の遮蔽が多く，グループの視認はできない．提案手法による図 4，12-23 は，アイコン同士の遮蔽が図 26，27 に比べても少なく，さらに，グループの視認も向上していることがわかる．そのため，本稿が目指した情報の視認性の改善を実現していることがわかる．さらに，基本形式を円形に保ち，第一レベルのグループを螺旋状に配置することにより，
3 次元空間の有効利用をしながらも，親和性の高いス
タイルを維持できる．
さらに，ウインドウサイズを 700 × 800 に固定し，要素数，階層レベル数，属性の種類を表す色数の限界を調査した．事前に「円形都市」についての限界を一般
ユーザ 25 名 (前述の 50 名に含まれる) を対象に調査し，過半数が限界と判断した結果を表 10 に示す．螺旋階段の調査の結果の分布図を図 8-11 に示す (アンケート評
価は他の調査同様，表 7 の 50 名を対象に行なった)．要
素数については，1000 個までは 100 個単位，それ以上
は 500 個単位で調査を行なった．その結果，4500 個より限界を感じる人があり，9000 個で過半数，12000 個
で全員が限界と判断した．この場合の主原因は形状による表示の限界であった (図 8)．階層レベル数については，そのレベルが深くなる毎に遮蔽が多くなり，真上以外の視点からの全データ表示の際にアイコンが視認困難となる．そのため，少なくとも，(アイコンのサイズ) ＞ (台座の高さ × (総階層レベル数 − 2)) である
必要がある．その結果，7 レベルで過半数となり，10
レベルで全員が視認困難と判断した．また，真上の視点からグループを認識する際，その形状を捉えることが困難なため，5 レベルで過半数となり，8 レベルで全員が視認困難と判断した (図 9)．属性の種類を表す色数の限界については，色のグラデーションを使用しているため，色数が限定される．有効色数を 20 色とし，属性の種別の判断について, 調査を行った結果，10 色から限界を感じる人がおり，18 色で過半数が限界と感じた．一方で，13 名が 20 色までに限界を感じなかった (図 10)．別途表示するガイドウインドウを併せて行なった調査では，15 色から限界を感じる人がおり，20
色までに限界を感じた人が過半数を超えなかった (図11)．このため，ある程度までは色と要素の対応を別途表示することで解決できると考えられる．提案手法は，アルゴリズム上は制限がないが，実用上の表現の限界がある．しかし，本対象データ，ユーザを対象とした場合，その管理する情報量は提案手法の実用上の適用範囲内となる場合が多いと思われる．
また，提案手法は，円を分割した扇型で第 1 レベルに属すグループを表示する．そのため，第 1 レベルに属すグループ数が多く，その各グループに属す要素数が少ないデータは円の中央部に大きく空間が空き，画面利用効率が悪い (例：図 28(レベル数：2 レベル，要素数：60 個，第 1 レベルに属すグループ数：59，各グ
ループに属す要素数 1))．アンケート結果の各項目で過半数が視認していた範囲のデータを可視化した結果のディジタル画像を添付する (レベル数：5 レベル，要素数：9000 個，第 1 レベルに属すグループ数：7)．
提案システムを「データ宝石箱 2」と比較した結果

115

を表 11 に示す．開発環境は言語を C++，環境を C++
Builder(Borland)，可視化を OpenGL で行なった．
「デー
タ宝石箱 2」は，視点移動についての記述が論文上に存在しないため，操作性についてのアンケートを 3 種類
用意し，視点変更などの操作，データを追うなどの動線等を含めて評価した．また，比較のために，データ要素を表すアイコンの形状，色を提案手法に合わせた．
評価データは「円形都市」との比較同様に，表 8 を用いた．評価は，5 段階評価で「1」が「データ宝石箱 2」
は優位，「5」が「螺旋階段」が優位，「3」がどちらともいえないとした．表 11 から，データ要素を識別し，その構造・順位を把握し，操作するという点で，提案シス
テムは「データ宝石箱 2」に対して明らかな優位性が示されている．その大きな要因の一つに，「螺旋階段」は，
データがある一定ルールで整列し，動線が少なく，さらに，データの違いや順序入れ替えの場合においても，常に，同一形状 (円) で表示する．そのため，本評価対象者にとって，情報把握において，「見やすい」，「操作性の高い」可視化手法として効果を発揮したと考えられる．本評価に利用したデータの可視化例 (表 8，5 のデータ) を図 29-32 に示す．
「宝石箱 2」は，横軸にソート条件を割り当てている (順序に基づく配置が不十分な点があるが，アルゴリズム上の問題である)．また，
ファイル読み込みから描画までの処理速度は，提案手法がデータ要素数に比例し，「データ宝石箱 2」がグループの数に比例するため，データ構造によって異なるが，本調査で利用したデータでは，ほぼ同じであった．
表 12: グループの形状

グループの認識
順序の認識

1
2
15

2
7
20

3
26
12

4
10
3

5
5
0

「TreeMap」や「データ宝石箱」は，遠目からのグ
ループの認識をしやすくするために，正方形に近い形
で情報を可視化する．しかし，グループをまとまりとして表示を行った場合，提案手法では，円領域内において円周に沿って配置するので，アイコンの配置の間隔・整列を保つことができない．また，アイコンの並びの動線が増えるため，順序の把握が困難になることが予想される．よって，提案スタイルでは，第 2 レベ
ル以下に属すグループを円周に沿って配置されているアイコンを枠線で囲むことで，グループが細長くなる可能性がある．提案手法の形式 (細長表示：図 33) とある程度のまとまりとしてグループを表現した形式 (まとまり表示：図 34) を，順位・グループの容易な認識の点で複数の画像を用意し，50 名に調査を行った．各図は色による影響を避けるため，グレースケールとした．
表 12 に調査結果を示す．5 段階評価で「1」が細長表示
が優位，「5」がまとまり表示が優位，「3」がどちらともいえないとした．調査結果から，提案手法が想定通り機能していることを確認した．
提案手法では，アイコンを複数生成した円周の最外周より配置している．経験則上，形状を把握する上で，外側が整列している方が認識しやすいため，最外周より配置した．同じデータを，最外周から配置した図 35

芸術科学会論文誌 Vol.4 No.4 pp.108-119と最内周から配置した図 36 で比較し，どちらが形状・順序を認識しやすいかを 50 名に調査した．その結果，49 名が最外周から配置した図が認識しやすいという判断をした．
以上から，提案手法は本稿の目指した見やすさと操作の容易さを実現していることを確認した．

5

むすび

本論文では，データが持つ識別情報を利用してデー
タの表示順序・形式を変更し，螺旋状に一画面表示する手法を提案した．提案手法により，色や形の変化で多くの属性も一面表示することで，ユーザの理解・認識，情報の取り扱いの容易性の向上の一助となるものと考えられる．一画面表示に重要な要素である表示の効率性や，識別情報による表示変化をより一層認識するために，表示方法の検討・改良，立体視環境への実装が今後の課題である．

図 12: 所属：名前順

謝辞
本研究の一部は中央大学 21 世紀 COE プログラム「電子社会の信頼性向上と情報セキュリティ」ならびに中央大学理工学研究所共同研究の補助を受けた．

参考文献[1] Meeko KUWAHARA, Mitsunori MAKINO，““Circular
City”A Whole Visualization of Large Scale Hierarchical
Data with Subsidiary Information”, NICOGRAPH International 2005, pp.25-30, 2005.

図 13: 所属：人数順[2] Edward R. Tufte，“Visual Explanations: Images andQuantities, Evidence and Narrative”, Graphics Pr ,1997.
[3] Johnson B., et al., “Tree-Maps: A Space Filling Approachto the Visualization of Hierarchical Information Space”,
IEEE Visualization ’91, pp. 275-282, 1991.
[4] 伊藤, 山口，“「データ宝石箱」〜ビジュアルデータマイニン
グの実現に向けて〜”, 情報処理学会 情報基礎学研究報告会
No.071,2003.
[5] 山口, 伊藤，“長方形の入れ子構造を用いた階層型データ視覚化手法の拡張”, 情報処理学会論文誌, Vol. 44, No. 10, pp.
2469-2477, 2003.
[6] Chuah M., “Dynamic Aggregation with Circular Visual
Designs”, IEEE Information Visualization ’98, pp. 35-43,
1998.
[7] Lamping J., Rao R., Pirolli P.,“ The Hyperbolic Browser:
A Focus+context Technique for Visualizing Large Hierarchies”, Journal of Visual Languages and Computing, 7, 1,
pp. 33-55, 1996.
[8] 桑原 明栄子, 牧野 光則，“螺旋階段：属性を用いた情報の 3 次
元一括可視化”, NICOGRAPH 春, pp.13-14, 2005.

図 14: 所属：所属年数順

図 15: 所属：作業の状態：
名前順

116

芸術科学会論文誌 Vol.4 No.4 pp.108-119

図 16: 職制：名前順

図 20: 作業の状態：名前順

図 17: 職制：人数順

図 21: 作業の状態：人数順

図 18: 職制：所属年数順

図 22: 作業の状態：所属
年数順

図 19: 職制：作業の状態：
名前順

図 23: 作業の状態：作業の状態：名前順117

芸術科学会論文誌 Vol.4 No.4 pp.108-119

図 24: 詳細情報表示：グ 図 25: 詳細情報表示：要ループ
素
図 29: 螺旋階段，名前順

図 30: 宝石箱 2，名前順
図 26: 円形都市：螺旋配置

図 27: 円形都市：アイコンサイズ統一
図 31: 螺旋階段，アクセス数順

図 28: 画面利用効率が悪いデー
タ形式例

図 32: 宝石箱 2，アクセス数順

118

芸術科学会論文誌 Vol.4 No.4 pp.108-119

図 33: 細長表示例

図 34: まとまり表示例

図 35: 最外周配置例

図 36: 最内周配置例

119