hysysk / data-driven-timelines Goto Github PK

ズームイン・アウトはボタンで行い、段階的にする。

ズームインした際には時間単位、ズームアウトした際には日単位になるよう調整。ラベルがぶつからないようにticksも調整する。

ズームイン・アウトによって文字が歪む。アプローチとしては2つ。

• ズームイベント終了後に変化量の逆数をかける
• 変化させない

タイムラインの表示方法

• 期間が重複した場合に自動で位置を調整する 参考
• カテゴリーによって別のラインを作る 参考
  上記の方法はd3のプラグインで作られているが、APIが古い。ソースコードのライセンスはPublic Domainなので参考にしつつ、今回のプロジェクトに取り込む。

やり方は2種類

• CSSでクラス名を与えて、CSSで調整
• オブジェクトでパラメーターを渡す
  期間データが個別にスタイル付けられるようにするかどうか

• データがない場合
• 通信エラー
  など

ズームイベントなどが適用されない。ラベルとのずれもできる。

未来の終点と過去の始点がつながってしまい、表示がおかしくなる。

• 各チャートをモジュール化
• 読み込み時に必要なコンポーネントを生成するようにする
• マジックナンバーを整理
• テスト書く
  • jasmineを使う

ある時点で発生した事柄を比較するため、縦の線が重要。視認性を高めるためにグリッドを追加する。

• タイトルを入れる
• クレジット
• highcharts.comを参考にする

ズームイン/アウト、パンに応じて新たなデータを取得して描画する。メモリを考慮すると適当に間引いたり、破棄する必要もありそう。

処理の流れメモ

• 表示されているX軸の区間のデータを問い合せる
• データを描画

ズームアウトした場合、複数年分のデータを取ることは処理が重そう。描画アルゴリズムを変えるか、そもそも一気に取得できるデータの上限を決める。

zoomのscaleExtentで拡大縮小の制限はかけられる。

• data-driven timelines

マウスオーバーでチャートの値を表示。クリックで固定。

TimelineJSは以下のような書式を定めている
https://docs.google.com/spreadsheets/d/12iX_j2B9u7_m2rbW5mSV8asKzmIPtfJgp2S8r52PLek/edit#gid=0
当初はあるプロパティの中にHTMLが直接流し込めるような形式を考えていましたが、セキュリティやデータの作りやすさを考慮するとこのように書式を定める方が良いかもと思います。

エンドポイントに対しいつからいつまでのデータを取得するかのパラメータを付加してリクエストする。
日時の指定はISO 8601に従う。UTC以外のタイムゾーンを使う場合はオフセットをつけてやり取りする。

期間データ

Request
http://api.example.com/v1/timelines?since=2017-01-01&until=2017-01-31

Result

{
  "start_at":"2017-01-01T00:00:00Z",
  "end_at":"2017-01-03T23:59:59Z",
  "label":"Holiday"
}

時系列データ

Request
http://api.example.com/v1/points?since=2017-01-01&until=2017-01-31

Result

{
  "at":"2017-01-01T00:00:00Z",
  "value":"13.0"
}

イベントデータ

Request
http://api.example.com/v1/events?since=2017-01-01&until=2017-01-31

Result A

{
  "at":"2017-01-01T00:00:00Z",
  "label":"New Year",
  "value": "<h1>Happy New Year</h1><p>2017</p>"
}

Result B

{
  "at":"2017-01-01T00:00:00Z",
  "label":"New Year",
  "title": "Happy New Year",
  "body": "2017",
  "source_url": "http://example.com",
  "media": {[
    {"type": "image", "url": "http://example.com/image.jpg"},
    {"type": "movie", "url": "htto://example.com/movie.mp4"}
  ]}
}

Result C

{
  "at":"2017-01-01T11:40:23Z",
  "label":"username",
  "title": "",
  "body": "めちゃくちゃ降ってきた！",
  "thumbnail": "https://twitter.com/userimage.png",
  "source_url": "https://twitter.com/statuses/123",
  "media": {[
    {"type": "image", "url": "http://example.com/image.jpg"},
    {"type": "movie", "url": "htto://example.com/movie.mp4"}
  ]}
}