Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

d3jsハンズオン @E2D3ハッカソン

2,174 views

Published on

2015/2/8に開催されたE2D3のハッカソンの資料です。
e2d3.org

Published in: Engineering
  • Be the first to comment

d3jsハンズオン @E2D3ハッカソン

  1. 1. D3.jsハンズオン @E2D3 ハッカソン ! ! E2D3 大曽根 圭輔
  2. 2. about:me •大曽根圭輔
 博士(工学) 茨城県出身 •現在の仕事
 ゲームのデータ分析 •趣味 たくさん
 - やる: バンド、スポーツ (フットサル、ランニング)
 - 観る: スポーツ、ライブ

  3. 3. ハンズオンの想定する対象 •JavaScriptを触ったことがある •D3.jsは触ったことがない
  4. 4. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  5. 5. D3.jsとは •Data Driven Documentの略 •D3.js はデータに基づいてドキュメン トを操作するための JavaScript ライ ブラリ •Mike Bostock作
  6. 6. http://d3js.org/ http://d3js.org/
  7. 7. D3.jsとは •D3はグラフを書くライブラリでない
 - HighChartsなどとは異なる •データをビジュアルをつないでくれる
  8. 8. 参考URL •サンプルコードはこちらから
 https://github.com/keisuke- osone/d3js_hands_on/
  9. 9. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  10. 10. 触ってみよう! <script src="http://d3js.org/d3.v3.min.js"> </script>
  11. 11. index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>D3.js ハンズオン¦E2D3 Hackathon</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script src="d3_sample.js" charset="utf-8"></script> </body> </html>
  12. 12. 触ってみよう! 今回使うのは、茨城県笠間市(私の出身地)の気象データ
 (sample_data.csv)
 元データ: http://www.jma.go.jp/
  13. 13. 触ってみよう! d3.csv('./sample_data.csv', function(data) { console.log(data); }); ※サーバを立てるなりして対応して下さい python -m SimpleHTTPServer 8888 とかXAMPとかMAMPとか

  14. 14. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  15. 15. データをDOMに追加 セレクタなどはjQueryと似ている メソッドチェーンが特徴
  16. 16. データをDOMに追加 d3.select('body') body要素を追加
  17. 17. データをDOMに追加 d3.select('body') .selectAll('p') div要素を追加 (まだない)
  18. 18. データをDOMに追加 d3.select('body') .selectAll('p') .data(data) .enter() dataを追加※
  19. 19. データをDOMに追加 d3.select('body') .selectAll('p') .data(data) .enter() .append('p') dataの数だけ p要素を追加
  20. 20. データをDOMに追加 d3.select('body') .selectAll('p') .data(data) .enter() .append('p') .text(function (d) {return d.date}) p要素のテキストを データのdateに
  21. 21. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  22. 22. グラフを書いてみる 必要なもの <svg>、<g>など
  23. 23. SVGとは ベクターグラフィック
  24. 24. 要素の作成 //表示するデータ var metrics = sunshine_duration'; // サイズの定義 var width = 600; var height = 400; // svgを追加 drawArea = d3.select('body').append('svg') .attr('width', width) .attr('height', height) .append('g')
  25. 25. 描画 // 描画 drawArea .selectAll( rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); rect要素を選択 ※まだない
  26. 26. 描画 // 描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); dataをセット
  27. 27. 描画 // 描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); rect(四角形)を挿入
  28. 28. 描画 // 描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); 赤く染める
  29. 29. 描画 // 描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); 要素の数に応じて間隔を空ける ※無名関数 (二個目の引数は要素の番号)
  30. 30. 描画 // 描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; }); 高さを指標の値に設定
  31. 31. あれれーおかしいぞ
  32. 32. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  33. 33. スケールが必要 温度の値[-0.3度, 12.7度]を svgの[0px, 300px]の範囲に描画したい
  34. 34. // 最大値の取得 var yMax = d3.max(data, function (d) { return parseInt(d[metrics], 10) + 1; }) // 最小値の取得 var yMin = d3.min(data, function (d) { return parseInt(d[metrics], 10); }) ! var yScale = d3.scale.linear() .domain([yMin, yMax]) // 温度の値[最小, 最大]を .range([300, 0]); // svgの[0px, 300px]の範囲に描画したい 高さを指標の値に設定
  35. 35. スケール var yScale = d3.scale.linear() .domain([-0.3, 12.7]) // 温度の値[-0.3度, 12.7度]を .range([300, 0]); // svgの[0px, 300px]の範囲に描画したい !    省略 .attr("height", function (d) { return yScale(d[metrics]); }); 高さを指標の値に設定
  36. 36. あれれーおかしいぞ
  37. 37. SVGの座標系 y座標は上から下(上が0)、 x座標は左から右(左が0)
  38. 38. 修正 // 描画 .attr("width", 10) .attr('y', function (d) { return yScale(d[metrics]) }) .attr('height', function (d) { return height - yScale(d[metrics]); });
  39. 39. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  40. 40. アニメーション D3.jsの醍醐味のひとつ
  41. 41. Transition // 描画 .attr('y', height) .attr('x', function (d, i) { return i * 15; }) .transition() .duration(1000) .attr('y', function (d) { return yScale(d[metrics]) }) .attr('height', function (d) { return height - yScale(d[metrics]); });
  42. 42. Delay // 描画 .attr('y', height) .attr('x', function (d, i) { return i * 15; }) .transition() .duration(1000) .delay(function(d, i) { return i * 20; }) .attr('y', function (d) { return yScale(d[metrics]) }) .attr('height', function (d) {
  43. 43. Ease // 描画 .attr('y', height) .attr('x', function (d, i) { return i * 15; }) .transition() .duration(1000) .delay(function(d, i) { return i * 20; }) .ease('bounce') .attr('y', function (d) { return yScale(d[metrics]) })
  44. 44. Ease • linear • quad • cubic • sin • exp ! などなど ここらへんを参考に http://bl.ocks.org/hunzy/9929724
  45. 45. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  46. 46. イベントを追加する // バーの描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .on('click', function (d) { alert(metrics + d[metrics]) })
  47. 47. イベントを追加する // バーの描画 drawArea .selectAll('rect') .data(data) .enter() .append('rect') .on('mouseover', function (d) { d3.select(this) .attr('fill', 'orange') })
  48. 48. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  49. 49. 軸 グラフでは軸が大事
  50. 50. 軸を描画する領域を確保 // サイズの定義 var maxHeight = 400; var maxWidth = 600; var leftMargin = 50; var topMargin = 50; var bottomMargin = 50; // 描画領域のサイズを設定 var height = maxHeight - topMargin - bottomMargin var width = maxWidth - leftMargin
  51. 51. 軸を描画する領域を確保 // svgを追加 drawArea = d3.select('body').append('svg') .attr('width', maxWidth) .attr('height', maxHeight) .attr('transform', 'translate(' + leftMargin + ',' + topMargin + ')')
  52. 52. yのスケールの設定 // yのスケールの設定 var yScale = d3.scale.linear() .domain([yMin, yMax]) .range([height, 0]);
  53. 53. 軸の設定 // yの軸の設定 var yAxis = d3.svg.axis() .scale(yScale) .orient('left');
  54. 54. 軸の設定 // y軸をsvgに表示 drawArea .append('g') .attr('class', 'y axis') .call(yAxis)
  55. 55. 要素の作成 //表示するデータ var metrics = wind_speed'; // サイズの定義 var width = 600; var height = 400; // svgを追加 drawArea = d3.select('body').append('svg') .attr('width', width) .attr('height', height) .append('g')
  56. 56. いろいろやってみましょう
  57. 57. 目次 •D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸 •おまけ
  58. 58. おまけ: 散布図の作成 var xMetrics = 'sunshine_duration'; var yMetrics = 'wind_speed';
  59. 59. おまけ: 散布図の作成 // 最大値の取得 var xMax = d3.max(data, function (d) { return parseInt(d[xMetrics], 10) + 1}); // 最小値の取得 var xMin = d3.min(data, function (d) { return d[xMetrics]});
  60. 60. おまけ: 散布図の作成 // 散布図の描画 drawArea .selectAll('circle') .data(data) .enter() .append('circle')
  61. 61. おまけ: 散布図の作成 .attr('r', 0) .attr('cx', function (d) { return xScale(d[xMetrics]); }) .attr('cy', function (d) { return yScale(d[yMetrics]) }) .transition() .duration(1000) .delay(function(d, i) { return i * 20; }) .ease('bounce') .attr('r', 10);
  62. 62. おまけ: バブルチャートの作成 var xMetrics = 'sunshine_duration'; var yMetrics = wind_speed'; var zMetrics = temperature';
  63. 63. // 最大値の取得 var zMax = d3.max(data, function (d) { return parseInt(d[zMetrics], 10) + 1}); // 最小値の取得 var zMin = d3.min(data, function (d) { return d[zMetrics]}); ! // yのスケールの設定 var zScale = d3.scale.linear() .domain([zMin, zMax]) .range([0, r]); おまけ: バブルチャートの作成
  64. 64. // 散布図の描画 drawArea .selectAll('circle') .data(data) .enter() .append('circle') おまけ: バブルチャートの作成
  65. 65. .attr('cy', function (d) { return yScale(d[yMetrics]) }) .transition() .duration(1000) .delay(function(d, i) { return i * 20; }) .ease('bounce') .attr('r', function(d, i) { return zScale(d[zMetrics]) }); おまけ: バブルチャートの作成
  66. 66. いろいろやってみましょう

×