ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
D3.js入門
データ可視化のためのライブラリであるD3.jsの学習をしていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(20)
#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()
アニメーションの設定
未完了
リリース情報(note)
『D3.js入門』を追加しました
詳細情報
最終更新日
2018年4月9日
バージョン情報
D3.js v5.0.0