d3.jsがv4にバージョンアップした影響で昔作ったコードが動作しなくなったので、改めて作り直します。
再利用可能な作例の保管庫です。
d3.jsをモジュール化する最も基本的なパターンです。
HTMLにコンテナとなる<div>を定義します。
<div id="hello"></div>JavaScriptではd3.select('#hello')で選択し、datum()でデータを紐付けてから、call()することでモジュールを起動します。
// データセット
var dataset = [10, 20, 30, 40, 50];
// hello()モジュールをインスタンス化
var hello = d3iida.hello().fontSize('20').fontColor('green');
// カスタムイベントにハンドラを登録する
hello.on('customHover', function(d) {
d3.select('#message').append('p').text('customHoverイベント: ' + d);
});
// セレクションにデータを紐付けてcall()する
d3.select('#hello').datum(dataset).call(hello);以下、全てのモジュールが同じパターンで実装されています。
バーチャートをモジュール化したものです。
ラインチャートをモジュール化したものです。
パイチャートをモジュール化したものです。
ラジオボタンをモジュール化したものです。20_mapChart.htmlで使っているものです。
スライダにボタンを付けたものです。組み込み用です。
クリックもドラッグも不要、マウスオーバーだけでデータを選択します。組み込み用です。
自走するvhover。クリックでトランジションを開始・停止します。組み込み用です。
応用編です。 この程度のグラフを書くのにこんなにも大量のコードを書かないけないとすると、ちょっと考えてしまいます。
応用編です。 スライダー付きのライン＋エリア・チャートです。
応用編です。 スライダー付きのライン・チャートです。
太郎君はsin(x)上を、花子さんはcos(x)上を同じ速度で歩きます。 二人はどこで出会うでしょうか。
日本地図の上に県庁所在地をプロットしたものです。 ズーム処理とブラシ処理の両立でかなり悩みました。 ラジオボタンとテーブル表示もd3.jsで実装しています。
都道府県別人口増加率を年別に表示します。 人口が増加しているのはごく一部の都会だけだということが、よくわかります。