本書は基本的なHTML,CSSとJavaScriptの知識をお持ちの方を対象に、JavaScriptのデータビジュアライゼーション専用ライブラリのd3.jsを使用する簡単なチュートリアルを提供するものです。

JavaScriptやプログラミング自体に不慣れな方は対象外ですので、ご注意ください。

また本書は同時に、d3.jsについての前提知識が全くない方を対象としています。

d3.jsをすでに使用された経験がある方には特に目新しい内容は含んでおりません。ご注意ください。

また、本書が対応するのはd3.jsの最新バージョンであるv4です。

このバージョンからは従来は１つのライブラリとしてまとめられていた機能が複数に分割されるなど、大幅な変更がなされています。

そのため従来のv3以前のコードとは互換性がないことをご了承ください。

目次

1. d3.jsとは何か？


1.1 d3.jsでできること

1.2 d3.jsの仕組み

1.3 d3.jsはどこでも使える

2. d3.jsで初めの一歩

2.1 テスト用のHTMLファイルを用意する

2.2 d3.jsをブラウザで読み込む

2.3 d3.jsとDOMセレクタ

2.4 d3.jsとDOM操作

2.5 d3.jsで簡単な棒チャートを作成してみよう(SVGを使用しない)

3. SVGを使用する

3.1 SVGとは何か？

3.2 SVGの主要な要素とその使い方

3.3 手作業でSVGを操作して棒グラフを作成してみる。

3.4 d3.jsで同じ棒グラフを書く

3.5 SVGにスタイルシートを適用する

3.6 CSVを直接d3.jsから読み込ませる

3.7 棒グラフの軸を垂直にする

3.8 データをキャンバスにフィットさせる

3.9 チャートにラベルを付ける