【旧版】D3.js入門
(全17回)
最新版のレッスンはこちらから »
【最新版】D3.js入門 (全20回)
データ視覚化のためのJavaScriptライブラリ、D3.jsについて基本的な使い方を学びます。
このレッスンでは d3.v3 を使用しています。
-
#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)
- 余白の設定
- 動作確認
d3.scale.linear() に nice() を指定してもしなくても同じ結果になってしまいます。解決方法を教...
このレッスンに関する参考リンクを紹介しておきます。
-
D3.js - Data-Driven Documents
[英語] D3の公式サイトです。最新情報やAPIリファレンスはこちらから。
-
D3.js - 日本語ドキュメント
公式サイトの日本語訳です。
-
about d3.js
D3の主な特徴をきれいにまとめたスライドです。
-
【D3.js】超基本！ コンソールでselect,data,enterメソッドを理解する。 | GUNMA GIS GEEK
D3のセレクションをコンソールを使って理解するチュートリアルです。
-
D3 Intro
[英語] スライド上でコードを編集しながら試せるチュートリアルです。
-
D3.js - Wikipedia, the free encyclopedia
[英語] D3のWikipediaです。
-
Interactive Data Visualization for the Web - OFPS - O'Reilly Media
[英語] オライリーのeブックです。詳細な内容が参考になります。
-
D3.js Tutorials, Screencasts and a Newsletter | DashingD3js.com
[英語] D3のチュートリアルサイトです。HTML/CSSの基礎からD3の基本的な機能までを網羅しています。
-
Creating Animations and Transitions With D3 | Visual.ly Blog
[英語] アニメーションやTransitionに関して詳しく説明されています。
-
a fun, difficult introduction to d3
[英語] D3の少し高度な機能を紹介しているスライドです。
-
Data Visualization with D3.js
[英語] D3の概要がよくわかるスライドです。
-
knowledge stockpile: Understanding selectAll, data, enter, append sequence in D3.js
[英語] select, enter, appendの概念がよくわかるチュートリアルです。
