情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2B-41
2020/3/9

地図グラフデータ内のトポロジー誤り発見・修正のためのインタラクション手法
林 大悟†1

藤田 和之†1

原 航太郎†2

高嶋 和毅†1

北村 喜文†1

概要：地図情報のグラフデータ共同編集において，ユーザのトポロジーの誤りを素早く発見・修正することを可能にするため，グラフ要素同士の密集によるオクルージョンの解決と階層間の接続を可視化するインタフェースを提案する．提案インタフェースでは，視覚効果にバネのメタファを取り入れ，ユーザのインタラクションに応じた一時的なレイアウトの変更を行う 2 つの手法を設計する．まず 1 つ目の Repel Signification では，ユーザのドラッグ・ズーム操作時にオクルージョンが生じている箇所を振動するように表示させることで，誤りを含む可能性が高い領域を強調させる．また，2 つ目の Repel Expansion では，オクルージョンの含まれるグラフ要素をユーザがクリック可能にするため，カーソルを要素に近づけると，その付近に遮蔽されていた要素と，他階層と接続されている要素を出現させる．
これら 2 つを組み合わせることで，ユーザは通常のインタラクションや地図操作を継続するだけで，地図が持つトポロジー情報と各要素の位置情報を破壊することなく，それらのエラー箇所が発見しやすくなり，より効率的なグラフデータの編集が可能になる．

図 1 地図グラフデータ内に生じる課題と提案手法(a) 既存のインタフェースでは，要素の密集箇所や他階層との接続がある箇所はトポロジーのエラーが発見しづらい．
(b) Repel Signification: エラーが発見しづらくなっているオクルージョン箇所を振動させて表示することで，エラーを見つけやすくする．(c)(d) Repel Expansion: カーソルを近づけることで，オクルージョン箇所や他階層の要素を再配置しクリック可能にする．

1. はじめに1

また最近では，建物や地下通路の中などの屋内マップのナビゲーションも可能になってきており，屋内マップの共近年，位置情報測位技術の発達に伴い，地図の閲覧や目同編集を支援するサービスの普及が期待される．しかし，的地までの経路探索などが広く利用されている．これらに屋内マップにおいてはエレベータや階段などの複数階層間用いられている地図情報は，一般的にノード・エッジ要素に渡るグラフ要素間の接続が存在し（図 1a），これらを既からなるグラフとして表現される．このデータベースをユ存の 2 次元の地図インタフェースでは表現することができーザ主体で形成することが可能な OpenStreetMap [1]などのない．このため，屋内マップの共同編集では，通常の地図サービスが普及してきている．これらのサービスは，複数に比べてトポロジーの正確な把握やエラーの発見がより難のユーザによる共同編集を可能とするため，地図情報に関しいと言える．

する膨大なデータセットを構築できる．このグラフの編集

これまで，複雑なグラフを対象とした可視化手法やインにおいては，他のユーザが入力したノードとエッジの情報タラクション手法は数多く検討されてきており，代表的なについて，誤った情報（エラー）が入力されていないかをアプローチとしてはグラフ要素のレイアウトをレンズによ読み取ることが重要となる．しかし，グラフ要素が密集しり部分的に拡大したり[2,3]，エッジをインタラクティブにている場合には表示の際にオクルージョン（要素による遮移動させたり[4]する手法等が挙げられる．しかしながら，

蔽）が生じやすく，これによりトポロジーに関するエラー

これらはマップ中に潜むトポロジーのエラーを見つけて修の有無を見つけることが困難になる．
†1 東北大学電気通信研究所†2 シンガポールマネジメント大学© 2020 Information Processing Society of Japan639

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2B-41
2020/3/9

図 2 Repel Signification の動作概要(a)

注：半透明のノード・エッジは，時間経過による表示の変化を表す．
正するというタスクを考慮して設計されておらず，他階層との接続を含むグラフを対象としたものではない．
そこで本研究では，既存の地図情報，および複数階層を持つ屋内マップも含めたユーザ間共同編集タスクを対象とし，ユーザがグラフデータのエラーを素早く発見すること，さらに該当領域のトポロジーを正しく理解し修正することが可能なインタフェースを検討する．このインタフェース(b)にはバネのメタファを取り入れた視覚効果によって，（1）ドラッグ・ズーム操作中にオクルージョン箇所を強調する

図 3

Repel Expansion の動作概要手法（Repel Signification）と，（2）カーソルの接近によりオ(a) カーソルが近づいた要素が他階層との接続を持クルージョンまたは上下階層との接続関係を可視化する手っている場合，他階層の要素を表示する． (b) 要素法（Repel Expansion）の 2 つを設計し，導入する．これらにカーソルが近づいた際にはオクルージョンを解決の提案手法ではグラフ要素のレイアウトの変更を行うが，するように要素同士を反発させて表示する．

一時的な変更に留めることで，グラフ要素が持つ本来の位置情報やトポロジーを破壊することなくユーザに認識させ所」をユーザに気づかせること，および，（ⅱ）その箇所にることができる．提案手法によって，既存の地図編集インエラーが実際に含まれていた場合にはそれを簡単に修正でタフェースの操作を大きく変更することなく，グラフ要素きるようにすることとする．の密集によるオクルージョンの解決と，屋内マップにおけこれらの方針（ⅰ），（ⅱ）の実現のために，2 つのインタる他階層との接続の表示が実現され，ユーザがそこに存在ラクション手法 Repel Signification と Repel Expansion からするエラーを発見・修正しやすくすることが期待される．

なるユーザインタフェースを提案する．以下では，それぞ

また，視覚効果による要素のレイアウトの変更を一時的なれの手法の詳細について述べる．

ものにすることで，グラフ要素が持つ本来の位置やトポロ

2.1 Repel Signification

ジーを破壊することなくユーザに認識させることができる．

2. 提案手法
本手法では，主に OpenStreetMap のような人手による入本手法では，オクルージョンが生じているグラフ要素（ノード・エッジ）を，ユーザがマップのドラッグ・ズーム操作中のみ振動させることで，オクルージョンの存在を強調表示する．図 2 に Repel Signification の動作の様子を示す．

力エラーが潜在的に含まれる屋内外の地図情報の閲覧・編

このために本手法ではまず，グラフ要素に含まれるオク集タスクを対象とする．このようなタスクでは，グラフ要ルージョン箇所を特定する．これは，同時に表示する各要素の密集による各要素のオクルージョンが問題になること素（基本的には同一階層内の要素）が見かけ上重複していが多く，見かけ上は正しく見えても，トポロジー上は誤っるものを，要素間の距離を元にラベリングすることによりた接続関係になっている場合もある．しかし，システム側実現している．図 2 中①③⑤は，それぞれノード・ノード，はどの要素がエラーかを検知するすべを持っていない．以

エッジ・エッジ，ノード・エッジ間でオクルージョンが発上のことから，本手法の基本的な方針を，（ⅰ）ユーザが各生している例であるが，これらの要素に対して振動するよ要素をエラーかどうか効率良く判別できるように「エラーうな視覚効果を与える．この視覚効果には，復元力の考えが含まれているかどうかが視認できない・視認しづらい箇を導入することでバネのように振動したり，反発したりす© 2020 Information Processing Society of Japan640

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2B-41
2020/3/9

るように動作させる．すなわち，対象となっている要素に，に固定される（図 3b ②④⑥）．カーソルが対象ノードから大きさと方向をランダムに定めた力を一定間隔（60 Hz）で離れると，他階層ノードを非表示とするため，これに応じ与えることで要素を振動させる（図 2 ②④⑥）．この力のて再配置されていた要素の位置も徐々に本来の位置に戻る．

大きさには上限を設け，力を与える点は，ノードの場合は中心点とし，エッジの場合はエッジの中点とする．エッジ

3. デモ展示を振動させる場合（図 2④⑥）には，エッジの両端はノー

本デモでは，HTML，JavaScript（グラフの描画には D3.js

ドに固定され，弧を描くように動作する．なお，この振動を使用），CSS を用いて，マウス操作を前提とした Web アを発生させるのはユーザのドラッグ・ズーム操作中のみでプリケーションとして提案インタフェースを実装し，実環あり，それらの操作が行われなくなると各要素の動きは減境の屋内マップから作成したエラーを含むグラフデータを衰し，元の座標に戻るため，ユーザが操作をしない間は，使用して，本提案インタフェースがどのようにユーザの編

各グラフ要素の地理的な正確性は保たれる．

集作業の効率化に寄与するかを展示する．特に，ドラッグ

2.2 Repel Expansionやズーム，およびポインティングなどの通常の作業をして本手法では， 主に Repel Signification によりエラーを発いる中で自然にエラー箇所を発見し，速やかに修正できる見したときなど，ユーザがオクルージョンのある箇所に注仕組みや視覚効果の設計について聴衆の方と議論したい．

目した場合に，オクルージョンや他階層との接続の含まれ4. おわりにるグラフ要素群から目的の要素を一時的に再配置することで，ユーザのトポロジーの理解と要素の獲得を目指す．図
3 に Repel Expansion の動作の様子を示す．
まず，ユーザの操作するカーソルから一定距離内にある最寄りのノードまたはエッジを Repel Expansion の対象とする．図 3a では，ある 3 階層からなるエレベータの 2F ノードが注目の対象となっている場合の例を示す．この対象

本稿では，多階層構造の屋内マップを含む地図情報を対象とし，バネのメタファを取り入れてグラフ要素を振動・反発させることで，トポロジーを正しく理解するとともに，エラーの発見・修正を支援するインタフェースを提案した．
今後は，本提案インタフェースのパフォーマンスの定量評価を行う予定である．

ノードが他階層にあるノードと接続している場合，これら参考文献のノードを上下方向に可視化する（図 3a 右列）．この際，[1]

現在表示中の階層から見て上層階のノードは上方向，下層階のノードは下方向に表示させ，各ノード内には階層数を表示する．続いて，Repel Signification と同様に，対象要素に対してオクルージョンがあるかを算出し，これに応じて要素が反発し合うような視覚効果を適用する（図 3b）．この手法でも同様に，復元力の考えを導入している．力の大きさを要素間の距離が短いほど大きく，向きは退けあう方向にし，要素に与える力の大きさと方向を一定に保つこと

M. Haklay and P. Weber, "OpenStreetMap: User-generated streetmaps," IEEE Pervasive Computing, vol. 7, no. 4, pp. 12-18, 2008.
[2] M. Sarkar , M. B. Brown, "Graphical Fisheye Views of Graphs,"
Proceedings of the SIGCHI Conference on Human Factors in
Computing Systems, pp. 83-91, 1992.
[3] N. Wong, S. Carpendale , S. Greenberg, "Edgelens: an interactive
method for managing edge congestion in graphs," Proceedings ofIEEE Symposium on Information Visualization 2003, pp. 51-58,
2003.
[4] N. Wong , C. Sheelagh, "Supporting interactive graph exploration
using edge plucking," Visualization and Data Analysis, pp. 76-87,
2007.

で，表示された要素は要素間で反発するように特定の位置© 2020 Information Processing Society of Japan641