d3.jsでTSVからHTMLテーブルを作成する

GitHubリポジトリ一覧ページを自動作成するために。

成果物

d3.Load.tsv.201703120949

Playgrounds

See the Pen d3.load.tsv.201703121429 by ytyaru (@ytyaru) on CodePen.

CSSなど微妙に整っていないのが以下。

CodePen, jsFiddle, jsdo.it

前回まで

GitHubリポジトリ一覧（仮） - やってみる

今回

GitHubにTSVをアップロードし、CodePenからファイルを参照した。

プログラミング用のサーバだからクロスサイトスクリプティング制約はないのだろうか？はてなブログでも同様に実行できるか不明。

変換の経緯

ソースコード
↓
ローカルリポジトリ作成
↓
リモートリポジトリ作成
↓
GitHubAPIでリポジトリ情報の取得
↓
JSON
↓
SQLite3(RDBMS)に挿入する
↓
TSV
↓
TSVを適当なGitHubリポジトリにアップロード
↓
d3.js
↓
HTML

長い旅路、ごくろうさまです。

参考

JavaScriptの小数点切り捨てにtoFixedなどを使用してはダメ | iwb.jp

小数点以下の切り捨ては複雑。

課題

• はてなブログで成功するか試したい
• テーブルの項目を整理したい
  • <a>タグを作成したい
• テーブルの項目を追加したい
  • プログラミング言語を追加したい
  • ライセンスを追加したい
• テーブルの行を色分けしたい
  • 主要プログラミング言語ごとに
• テーブルの機能を充実させたい
  • ソートしたい
  • フィルタリングしたい
• 集計を充実させたい
  • コードのByte累計
  • 可視化
    • 草
    • チャート

問題

d3.jsだとtsvデータ全部表示してしまう。

データの一部を<a href=>属性値に指定したい。どうやるのか。そもそもd3のデータ駆動はそういうテーブル作成に適していないのではないか。

tabulatorなどテーブル作成用ライブラリを利用したほうが早いかもしれない。

https://www.webprofessional.jp/dynamic-tables-json/
https://olifolkerd.github.io/tabulator/quickstart/

所感

GitHubのファイルが外部からロードできただけでも良しとする。