データビジュアライゼーション用にSVGやCanvasを描画するJavaScriptのライブラリ、D3.jsを利用して、SVGではなくCSS3のFlexboxを利用したチャート描画のスタディを行っていた記事をご紹介します。
D3.jsは、可視化の自由度に注目がいきますが、ライブラリとして評価されているところはブラウザ上での可視化に必要な機能が一通りライブラリとして整備されていることで、たとえば「ヒストグラムのビンの計算といった統計的な基礎の計算」が行えたり、「様々な形式のデータファイルを非同期的に読み込んで可視化する際に扱いやすい多次元配列を内包するJSON形式に変換（RやPythonでいうところのデータフレームのようなもの）」したり、といったことが含まれます。
D3.jsを用いると、SVGだけでなく、HTML上のフォーム要素（例：ラジオボタンやチェックボックス）などもデータドリブンに生成することが可能です。データ可視化におけるフォーム要素は「データと描画」もしくは「描画のみ」を操作するために利用されますから、可視化そのもの同様に、データドリブンに生成・変更できる必要があります。
このD3.jsの機能を利用して、レイアウト指定がトリッキーな、積み重ね棒グラフなどについて、SVGを用いずにCSSのFlexbox機能を使って実装してみた、というのが紹介する記事ということになります。
CSS3のFlexboxって何だっけ
ユーザーインターフェイスデザイン用に最適化された、CSS3で採用されたWeb標準のレイアウトモデルです。あるコンテナのアイテム内のレイアウトの最適化に向いています。以下のようなことが実現できます。
- 任意の方向にレイアウト
- サイズを「フレックス」して、未使用のスペースを埋めるために拡大するか、親のオーバーフローを回避するために縮小する
- 水平方向と垂直方向の両方の配置を操作
- コンテナ内のアイテムをネスト（水平内側垂直、または垂直内側水平）させて、2次元のレイアウトを作成
結果は…
具体的な成果についてはそれほど長い記事でもないのでリンク先の元記事を参照してもらえればと思いますが、矩形（四角形）の幾何図形を用いて、整列を柔軟に行うことができる、という性質を利用すれば、使い所がありそうです。SVGの空間座標が左上が(0,0)、右下がたとえば(100,100)といった座標系ですから、下から上へ積み上げる系のチャート描画の計算には一苦労します。そういった実装をする際の、非直感的な座標指定の気持ち悪さを解消する、といった感じでしょうか。
それ以外でも、今すぐパッとは思いつきませんが、これまでのチャートやグラフとは少し違った独自の可視化表現を探る際に、実装の手数の一つとして覚えておいていいかもしれません。
