2016年 4月 の投稿一覧

D3.js スケール処理

スケール

「スケールとは入力ドメインを出力レンジにマップする関数のことである」
D3 の作者、マイク・ボストック氏によるD3においてのスケールの定義。

  1. ドメイン:領域
  2. レンジ:範囲
  3. マップ:変換/対応

グラフ描画するデータがすべて固定値だった場合には、表示範囲や各グラフの横幅、高さ、などを決め打ちですみますが、
基本的に扱うデータの範囲なんて分かるわけがないのが実案件。

ここではスケールを用いてデータのドメイン(領域)を、指定のレンジ(範囲)内に収まるようにマップする(変換する)ことをする。

ようは値のわからないデータセットを、指定の枠内に収めて描画したい際に正規化するよ!って事。
(ここで言う正規化は数学用語においての、ベクトルにおける正規化 を示す)

続きを読む

D3.js 基礎的な棒グラフの描画

棒グラフの描画

前の記事では単純にデータの取り出し方を説明しただけだったため
本記事では単純な棒グラフを描画することを目標とする。
(各グラフに値もラベルとしてつける)

続きを読む

D3.js 要素の作成から擬似グラフの作成まで

はじめに

D3.js 入門の為に自分用に残した覚書です。
http://ja.d3js.info/alignedleft/tutorials/d3/
こちらにある スコット・マレイ氏による D3 チュートリアルを参考にしています。

基本的なD3.jsの概要を簡単に言うと

グラフ描画用にわかりやすくデータを渡すから描画とかスタイルは全部自分でやってね★

まあ、何事も技術をつけていくと、初期のデザインテンプレートとかフォーマットなども自分好みにカスタマイズした方が早いし利便性高いですよね。
Chart.jsとか他にも色々あるけどここまで玄人志向のものはないかと。。。(手を出して後悔した感満載)

続きを読む