やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

こんなテーブル作れたらいいな

d3.jsの基礎学習方針としてテーブル作成に注目した。

背景

d3.jsの基礎を勉強中。リストを作り、テーブル作成まできた。

Server Error
Server Error
http://ytyaru.hatenablog.com/entry/2017/04/26/000000
http://ytyaru.hatenablog.com/entry/2017/04/27/000000
http://ytyaru.hatenablog.com/entry/2017/04/28/000000
http://ytyaru.hatenablog.com/entry/2017/04/29/000000
http://ytyaru.hatenablog.com/entry/2017/04/30/000000
http://ytyaru.hatenablog.com/entry/2017/05/01/000000

テーブルはリストより遥かに複雑。色々と追加したい機能が思いつくので、まとめてみた。

こんなテーブル作れたらいいな

テーブル作成

  • d3.jsで2次元配列からテーブルを作成したい
    • 全行データ(ヘッダ無し)として
    • 1行目をヘッダとして
    • データを2次元配列、ヘッダを一次元配列として
  • d3.jsでobject配列からテーブルを作成したい
    • 全行同一のキーとし、キーと値の2列テーブルで横に伸ばして
    • 全行キーと値の2列テーブルを個別に
  • d3.jsでファイル(csv,tsv,json,xml)からテーブルを作成したい

json,xml木構造を含んでいるのでツリーも作れそうだが、まだ作らない。ツリーはグラフのひとつ。グラフの前段階としてテーブルを学ぶのでツリーはまだ作らない。

ソート

行ソート

  • 指定した列をキーにしてソートしたい(昇順/降順)
  • ソートキーを複数指定したい(どれが第一,第二,第三,…キーか)

列ソート

  • 列を並び替えたい
    • マウスのD&Dで
    • ショートカットキーで

フィルタリング

行フィルタリング

  • 指定した文字列型列を文字列検索したい
  • 指定した数値型列を比較検索,範囲検索したい(<,>,!=,==,…)
  • 指定した日付型列を比較検索,範囲検索したい

列フィルタリング

  • 指定した列を非表示にしたい

集計

  • 各列の合計値を算出したい
  • 各列の平均値を算出したい

import/export

  • csv,tsv,json,xmlなどからimportしてテーブルを作成する
  • テーブルをcsv,tsv,json,xmlなどへexportする
  • ソートやフィルタリングを反映した形式でexportする

可視化

  • データに応じて自動的に適用できるグラフを作る

具体的なイメージはない。たとえば[["C",1000],["C++",3210],["C#",5678]]のような2次元配列を渡されたら円グラフや棒グラフなど作れるグラフをすべて作るとか。

マトリクス作成

テーブルとは違うが、行列どちらにもヘッダがあるマトリクスも作りたい。

テーブルとマトリクス図は用途が異なるため、実装する機能も違うかもしれない。フィルタリングが重要そう。細かいことはまだ考えない。

所感

もしこれが全部できれば、グラフに進めるだろうか。べつに全部やらなくても良さそう。