D3.js入門
(全20回)
データ可視化のためのライブラリであるD3.jsの学習をしていきます。
このレッスンでは D3.js v5.0.0 を使用しています。
-
#01 d3.jsを使ってみよう (02:37) 無料公開中
- 公式サイトの確認
- index.htmlの作成
- scriptの読み込み
-
#02 円を描画してみよう (02:32) 無料公開中
- データの用意
- 円の描画
- data()
- Developer Toolsでの確認
-
#03 データを図形に反映させてみよう (02:38) 無料公開中
- データの値と順番の反映
- WIDTH, HEIGHTの用意
-
#04 transition()を使ってみよう (01:51) 無料公開中
- transition()
- duration(), delay()
- 動作確認
-
#05 アニメーションに変化をつけてみよう (02:12) 無料公開中
- delay()を使ったテクニック
- イージング
- アニメーションの追加
-
#06 イベントを設定してみよう (02:31)
- クリックイベントの設定
- endイベントの設定
- alertの表示
-
#07 enter領域に要素を追加しよう (01:54)
- enter()
- append()
-
#08 update領域を操作してみよう (01:56)
- update領域の操作
- Developer Toolsでの確認
-
#09 exit領域を削除してみよう (01:43)
- exit()
- remove()
-
#10 updateパターンを作ろう (02:49)
- updateパターンの作成
- 動作確認
-
#11 mergeを使ってみよう (01:56)
- merge()
- 動作確認
-
#12 棒グラフを描いてみよう (02:40)
- データの用意
- updateパターンの作成
- 棒グラフの描画
-
#13 scaleLinear()を使ってみよう (02:18)
- SVG領域の確認
- scaleLinear()
- domain、rangeの設定
-
#14 domain､rangeを変更しやすくしよう (02:06)
- max()
- nice()
-
#15 scaleBand()を使ってみよう (01:56)
- scaleBand()
- domain、rangeの設定
-
#16 データ量の変化に対応させよう (01:57)
- map()
- bandwidth()
- padding()
-
#17 横軸､縦軸を表示してみよう (02:54)
- axisBottom()
- axisLeft()
- 余白の設定
-
#18 軸を移動させよう (02:31)
- transform()
- ブラウザでの確認
-
#19 描画ごとに軸をクリアしよう (02:00)
- axisクラスの付与と削除
- 動作確認
-
#20 グラフの見た目を整えよう (02:48)
- scaleOrdinal()
- アニメーションの設定
