複数ストリームのタイムライン表示ソフトウェア
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
lib
src
.gitignore
README.md
gulpfile.js
index.js
package.json

README.md

Data Driven Timelines

複数ストリームのタイムライン表示ツール

使い方

  • ddtimelines.jsを読み込み、下記のようにDDTimelinesのインスタンスを作る。
new DDTimelines({
  size: [800, 500], //画面サイズ[幅, 高さ]
  selector: '#timeline', //表示するDOM
  since: '2015-09-05T00:00:00', //初回取り込みの開始時刻
  until: '2015-09-08T00:00:00', //初回取り込みの終了時刻
  utcOffset: '+09:00',
  loadDataFromFile: 'true', //ファイル読み込みで、新たなデータをサーバから取得しない場合
  zoom: [1, 8], //拡大率[最小, 最大],
  splitRatio: [7, 3], //チャートの分割率[時系列, 期間] 10分率で記述
  timelines: [
    {
      type: 'combo', //チャートの種類 line, bar, combo
      combination: ['bar','line'], //comboチャートの場合、lineとbarをどう組み合わせるか指定
      url: 'http://localhost:5000/example/points.json', //時系列データエンドポイント
      labels: ['降水量','気温'] //時系列データのラベル
    },
    {
      type: 'duration',
      url: 'http://localhost:5000/example/durations.json', //期間データエンドポイント
      labels: ['強風','大雨'] //期間データのラベル
    }
  ]
});
  • スタイルはCSSを使用する。exampleフォルダ以下のCSSを参考にしてください。

DDTimelinesライブラリの開発手順

Data Driven TimelinesはD3.jsから一部の機能を利用して作成しています。

  • NPMモジュールをインストール
    • npm install
  • D3.jsをビルド
    • gulp build:d3
  • D3.jsとsrcフォルダ以下のファイルを結合し、最小化する。この作業は「gulp watch」で自動化できます。
    • gulp build:ddt
  • distフォルダ以下にddtimelines.jsとddtimelines.min.jsが出力される

D3.jsの機能を追加する場合は、index.jsに追加するモジュールを記述し、ビルドしてください。