Javascript

Webっちゃ Vol.21 「D3.jsを始めよう」

  • 2017/10/11 開催 [Webっちゃ] 用記事です。
  • 本記事では D3.js ver4系 での記述になります。

データビジュアライゼーションとは?

今巷で流行りのデータビジュアライゼーションとは一体何か?

データビジュアライゼーション(データの可視化)とは、膨大なデータをグラフや図で数字だけでは理解しづらかったデータ間の特徴・関係性・傾向などを視覚的にわかりやすくする手法のことを指します。

現在ではいくつかのグラフ描画用ライブラリが様々なところから配布されており、グラフを動的に生成する事が比較的容易になっており、画像などではなく、動的にグラフを出力し、ユーザーが見たい情報を抽出→描画することで様々な分野で導入されています。

続きを読む

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とか他にも色々あるけどここまで玄人志向のものはないかと。。。(手を出して後悔した感満載)

続きを読む