このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 D3.jsとはなにか？ (02:06) 無料公開中
- 概要
- 公式サイト
- デモ
- 必要となる知識
- 必要となるツール
-
#02 D3.jsを導入してみよう (01:57) 無料公開中
- ひな型ファイルの作成
- D3.jsの読み込み
-
#03 はじめてのD3.js (02:43) 無料公開中
- 要素の指定方法（select, selectAll）
- 内容の書き換え（text, attr, style, append, remove）
-
#04 styleを設定してみよう (02:55) 無料公開中
- styleの記述方法
- 値の取得方法
- 値を関数で設定する方法
-
#05 append､removeを使ってみよう (01:25)
- append
- remove
-
#06 dataを使ってみよう (02:39)
- data
- function(d) { return d; }
- function(d, i) { ... }
-
#07 update､enter､exitを理解しよう (1) (02:32)
- update
- enter
- exit
-
#08 update､enter､exitを理解しよう (2) (02:58)
- update → text
- enter → append
- exit → remove
-
#09 SVG領域を設定してみよう (01:46)
- svg領域の設定
- attr
-
#10 データを使ってcircleを描画しよう (02:36)
- circleの追加
- circleの描画
-
#11 transitionを使ってみよう (02:42)
- transition
- duration
- ease
- delay
-
#12 eachを使ってみよう (02:58)
- each("start", ...)
- each("end", ...)
- d3.select(this)
-
#13 onでイベントを設定しよう (02:18)
- on
- mouseover
- mouseout
- click
-
#14 横棒グラフを描画してみよう (02:02)
- 横棒グラフの描画
- rect
-
#15 scaleを使ってみよう (03:00)
- scaleの設定
- domain
- range
- d3.max(dataset)
- nice()
-
#16 axisを使ってみよう (1) (02:48)
- axis
- スタイルの設定
-
#17 axisを使ってみよう (2) (01:30)
- 余白の設定
- 動作確認
