Google Mapsライクな年表を作成するjavascriptAPI「Timeline」

Webで会社や個人の沿革を作成することが多いと思いますが、表現方法はそれほど多くはありません。
SIMILEが提供するTimeline APIを使用することで、Google Mapsのように滑らかな遷移が可能な年表(タイムライン)を作成することが出来ます。

使用方法

まず、<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>をhead内に挿入します。
次にタイムラインを作成したい場所に以下を書きます。
<div id="id名" style="height: 150px; border: 1px solid #aaa"></div>
タイムラインの幅や高さ、罫線をstyleで指定していますので、好みの大きさや色にしてください。
またid名としているところは後ほど指定するid名と同じにしてください。

さらにbody要素は以下のようにonLoadなどを指定します。
<body onload="onLoad();" onresize="onResize();">

これで基本的なHTMLは完成です。
次にタイムラインの構造をjavascriptで作成します。
//ここから
var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();

  var bandInfos = [

    Timeline.createBandInfo({
          eventSource: eventSource,
          date: "Aug 14 2007 00:00:00 GMT", //中心にくる日時(上)
          width: "70%",
          intervalUnit: Timeline.DateTime.MONTH,
          intervalPixels: 100
    }),

    Timeline.createBandInfo({
          showEventText: false,
          trackHeight: 0.5,
          trackGap: 0.2,
          eventSource: eventSource,
          date: "Aug 14 2007 00:00:00 GMT", //中心にくる日時(下)

          width: "30%",
          intervalUnit: Timeline.DateTime.YEAR,
          intervalPixels: 200
    })
  ];

  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;

  tl = Timeline.create(document.getElementById("id名"), bandInfos); //divで指定したid名を記入
  //タイムラインの中身の作成の仕方は後ほど説明
  Timeline.loadXML("タイムラインの中身.xml", function(xml, url) { eventSource.loadXML(xml, url); });

}

var resizeTimerID = null;
function onResize() {
  if (resizeTimerID == null) {
    resizeTimerID = window.setTimeout(function() {
      resizeTimerID = null;
      tl.layout();
    }, 500);
  }
}
//ここまで

最後にタイムラインの中身をxmlで記入します。
サンプルで使用しているxmlデータは以下の通りで、3通りあります。
1)開始〜終了(Durationあり)、2)開始〜終了、3)一日のみ、を順に以下に記載しています。
なおxmlはUTF-8で保存してください。
//ここから
<data>
<event
start="Aug 15 2007 00:00:00 GMT" //出来事の開始日時
end="Aug 30 2007 23:59:59 GMT" //出来事の終了日時
isDuration="true" //期間を濃い色で表示
title="夏休み" //出来事の題名
image="" //表示したい画像
>
待ちに待った夏休みの到来 <a href="http://www.skuare.net/">skuare.net</a> //出来事の説明(リンクもタグをエスケープさせることで表示可能)
</event>

<event
start="Aug 28 2007 00:00:00 GMT"
end="Aug 29 2007 00:00:00 GMT"
title="結婚式"
>
小学校からの幼なじみがついに結婚
</event>

<event
start="Aug 23 2007 00:00:00 GMT"
title="プール"
link="http://www.skuare.net/" //題名へのリンク
>
Pooool!!
</event>
</data>
//ここまで

注意:javascriptとxmlデータは同じディレクトリに置かないと、エラー:uncaught exception: Permission denied to call method XMLHttpRequest.openが出ます。
Javascriptサンプルページ一覧
skuare.net