XML 輪講資料 (2004/1/20)

西田 担当分

XML and Visualization

(多少の語弊があることを覚悟していいますが) XML は階層を持ったデータ構造 (木構造) をテキストのみで表現する規格 (群) です。 基本的には把握しやすい木構造ですが、 やはり大規模なデータになると視覚化が問題となってきます。 コンピュータが処理できればよいという見方もあるでしょうが、 最終的にデータを使うのは人間であることがほとんどです。

今回は XML を視覚化という切り口からみていきましょう。 視覚化は「百聞は一見にしかず」。デモを中心にいきます。

XSLT

XSLT はそれ自身が視覚化の手法として使われています (HTML への変換など)。 また、 XSLT の記法がテンプレートの列挙というかたちをとっているため、 変換の様子が元々視覚化されているといってよいと思います。

そんな XSLT の視覚化を考えている人がいるのかを調べるため、 Google に xslt visualization などのクエリーを与えてみたのですが、 XSLT を用いて視覚化を行うものが目立ちました。 しかし、気分を変えて日本語で検索したところ、 XSLTスタイルシート生成のための例示 インタフェース という論文が見つかりました。 WYSIWYG で編集すると XSLT が生成されるそうです。 ひとつの操作に対して、 その操作対象を match の属性値とするようなテンプレートを追加する方法のようですが、 どの程度うまくいくのでしょうか。

XPath

javascript で実装されているようです。 興味のある方はソースを読んでみてはいかがでしょう。

個人的にはこの逆を行うものがほしいです。

TreeMap

アルゴリズムの概要

  1. 木構造のデータと分割対象となる矩形を用意する
  2. 子の数に矩形を分割する (面積は子を根とする部分木のサイズに比例)
  3. 各矩形に対して再帰的に適用
/** 矩形を木 node に基づいて塗り分ける **/
public void treemap(TreeNode node, Rectangle rect, boolean horizontal){
  int sum = 0;

  g.fillRect(rect.x, rect.y, rect.width, rect.height);

  for(Iterator iter = node.iterator(); iter.hasNext(); ){
    TreeNode child = iter.next();
    Rectangle r;
    if(horizontal){
      r = new Rectangle(rect.x, rect.y + rect.height * sum / node.getSize(),
        rect.width, rect.height * child.getSize() / node.getSize());
    }
    else{
    r = new Rectangle(rect.x + rect.width * sum / node.getSize(), rect.y,
        rect.width * child.getSize() / node.getSize(), rect.height);
    }

    treemap(child, r, !horizontal);

    sum += child.getSize();
  }
}

上記ページの日本語による要約

Ben Shneiderman さんが 1990 年頃に膨大なディレクトリ構造を可視化するためにはどうすればいいか 悩んでいるときに基本的なアイデアを Tree Map と名付け、ACM Transaction on Graphics に投稿する。 その後、ズーミングなどのインターフェース、アルゴリズムの亜種、様々な応用例が作られる。

たとえば、より正方形に近い矩形による分割を達成するアルゴリズムを使うことで、 細長い矩形がたくさんできて見づらくなることを防ぐことができる。 また、ある単位サイズの矩形の整数倍の大きさの矩形による分割を達成するアルゴリズムを使うことで、 矩形の中に画像のサムネイルを並べた画像ビューワを作ることができる。

Hyperbolic Trees

アルゴリズムの概要

  1. 根を中心に子が広がるよう、二次元平面内に木を配置します
  2. 1次元の関数 f (たとえば tanh) を用意します
  3. 直交変換 (x, y) -> (f(x), f(y)) を施して描画します

Focus と context を同時に示すことができる視覚化として使われています。 この手法にも、使う関数によって亜種があります。