Html5j data visualization_and_d3

4,428 views

Published on

html5とか勉強会

Published in: Engineering
  • 申し訳ありません、どのような点をさして「ダメグラフの典型」とおっしゃっているのでしょうか。
    * 軸に単位(cm)が無いこと
    * データソース
    の欠如を指しているとすると仰るとおりです(作画の都合上簡略しました。その旨は追記していおきます)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 89/99 のスライド(平均値を棒グラフで表している)は,ダメグラフの典型でしょう。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Html5j data visualization_and_d3

  1. 1. データ可視化 について 2014/04/18 HTML5とか勉強会 @muddydixon
  2. 2. ! muddydixon " muddy.dixon # muddydixon ! Node.js Perl Visualization TimeSeries NeuralNetwork 私 is
  3. 3. アジェンダ データ可視化の目的 データ可視化とは データ可視化の理屈 Webでのデータ可視化のいいところ D3.jsとは
  4. 4. 可視化の目的
  5. 5. データ可視化とは The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである $
  6. 6. 可視化の目的 伝えてどうする?
  7. 7. 可視化の目的 ☓ 可視化のための可視化 ⃝ 目的達成のための可視化
  8. 8. 可視化の目的 ☓「どう可視化するか?」 ⃝「何を可視化するか?」 ◎「なんのために可視化するか?」
  9. 9. 可視化の目的 メトリクスの監視 例) モニタリングツール トレンドの把握 例) 株式チャート 関係性の把握 例) ソーシャルグラフ 属性の分析 例) 顧客属性の割合や売れ筋ジャンルの割合
  10. 10. 可視化の目的 事実を発掘できてこその可視化 事実を活用できてこその可視化 ! 改善行為の促進のための可視化 (ビジネス、政治、家計など)
  11. 11. 目的を阻害する可視化
  12. 12. ダメな可視化 効率的じゃない 明確じゃない ! ※ 「ウソを付く」「サンプルに問題がある」 とかはちょっとおいておきます
  13. 13. 明確じゃない
  14. 14. 明確じゃない
  15. 15. 明確じゃない
  16. 16. 明確じゃない
  17. 17. 明確じゃない
  18. 18. 明確じゃない
  19. 19. 効率的じゃない
  20. 20. いろいろ
  21. 21. もっと欲しい人はこちらに http://wtfviz.net/
  22. 22. データ可視化とは
  23. 23. データ可視化とは The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman ! データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである !
  24. 24. つまり " 情報を伝えそびれている可視化 " 明確ではない可視化 " 効率的ではない可視化 ! 上記は「可視化」ではありません
  25. 25. 可視化の定義に則ると 情報が視覚的な表現に置き換えられている 情報が明確に伝えられている 情報が効率的に伝えられている # $ % &
  26. 26. なぜ可視化するとよいか 53,434 28,397 41,334
  27. 27. なぜ可視化するとよいか 53,434 28,397 41,334
  28. 28. なぜ可視化するとよいか 53,434 28,397 41,334 (231.16) (168.51) (203.31)
  29. 29. なぜ可視化するとよいか 53,434 28,397 41,334
  30. 30. なぜ可視化するとよいか 53,434 28,397 41,334 49,346 93,853 23,579 80,132 86,103 35,203
  31. 31. なぜ可視化するとよいか (53,434)(28,397)(41,334) (49,346)(93,853)(23,579) (80,132)(86,103)(35,203)
  32. 32. なぜ可視化するとよいか 値の大小   ▶ 高さの大小 値の大小   ▶ 面積の大小 上昇傾向   ▶ 右上がりの傾き 下降傾向   ▶ 右下がりの傾き 同じカテゴリ ▶ 同じ色 関係性 ▶ 密集度
  33. 33. なぜ可視化するとよいか 経験的・認知的な 既存知識を効率的に 利用した理解の促進 # $ % &
  34. 34. なぜ可視化するとよいか すぐ分かる is 正義 # $ % &
  35. 35. 認知機能・経験をフルに使う # Sepal.Lengt Sepal.Widt Petal.Lengt Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 51 7.0 3.2 4.7 1.4 versicolor 52 6.4 3.2 4.5 1.5 versicolor 53 6.9 3.1 4.9 1.5 versicolor 54 5.5 2.3 4.0 1.3 versicolor 55 6.5 2.8 4.6 1.5 versicolor 101 6.3 3.3 6.0 2.5 virginica 102 5.8 2.7 5.1 1.9 virginica 103 7.1 3.0 5.9 2.1 virginica 104 6.3 2.9 5.6 1.8 virginica 105 6.5 3.0 5.8 2.2 virginica みんなだいすきiris
  36. 36. ここからなにか わかるわけでは ないですよね?
  37. 37. 統計量で表現 Sepal Length Sepal Width Petal Length Petal Width Min 4.3 2.0 1.0 0.1 1st Qu. 5.1 2.8 1.6 0.3 Median 5.8 3.0 4.35 1.3 Mean 5.843 3.057 3.758 1.199 3rd Qu. 6.4 3.3 5.1 1.8 Max 7.9 4.4 6.9 2.5
  38. 38. これなら なんとか
  39. 39. 図形の経験・認知能力を利用
  40. 40. 図形の経験・認知能力を利用 • 分布の幅が広い • 中央値が上に偏っている • 大きく2つの峰がある • 中央値が若干、上 に偏り • 峰が2つ・・・? • 均等に分布 • 中央値がおおよ そ中心 • 他の属性と比較して分布 の幅が小さい • 外れ値がちらほら
  41. 41. 「認知」が「把握」を加速 Sepal Length Sepal Width Petal Length Petal Width Min 4.3 2.0 1.0 0.1 1st Qu. 5.1 2.8 1.6 0.3 Median 5.8 3.0 4.35 1.3 Mean 5.843 3.057 3.758 1.199 3rd Qu. 6.4 3.3 5.1 1.8 Max 7.9 4.4 6.9 2.5
  42. 42. その他にも 箱ひげ図の代わりに ヒストグラム ヒストグラムを種別毎に 表現
  43. 43. 可視化の理論
  44. 44. データセットと可視化 # ガク片幅 花弁幅 Species 1 3.5 0.2 setosa 2 3.0 0.2 setosa 3 3.2 0.2 setosa 4 3.1 0.2 setosa 5 3.6 0.2 setosa 51 3.2 1.4 versicolor 52 3.2 1.5 versicolor 53 3.1 1.5 versicolor 54 2.3 1.3 versicolor 55 2.8 1.5 versicolor 101 3.3 2.5 virginica 102 2.7 1.9 virginica 103 3.0 2.1 virginica 104 2.9 1.8 virginica 105 3.0 2.2 virginica
  45. 45. 可視化で意識する概念 データ データ変数 視覚変数 視覚記号 可視化データセット 様々なフィールドの値からなる レコードを複数含むデータ群 変数抽出・代数処理・ 尺度化処・理統計処理が済んだもの 可視化対象とするフィールドを 含むデータ。ひとつひとつが意味を 持った単位(例:SQLの行) フィールドの値そのもの 数値(メジャー)やカテゴリ変数(ディ メンジョン)。ひとつひとつが視覚変 数に置換される 視覚表現ひとつひとつを指す 位置やサイズ、色、傾き、強度(透明 度・彩度・明度)、テクスチャなど 視覚変数を集約させた記号 点や円、矩形、弧、立体など データセットのデータに対応する 記号の集合による可視化 対応 対応 対応
  46. 46. データセットと可視化 # ガク片幅 花弁幅 Species 1 3.5 0.2 setosa 2 3.0 0.2 setosa 3 3.2 0.2 setosa 4 3.1 0.2 setosa 5 3.6 0.2 setosa 51 3.2 1.4 versicolor 52 3.2 1.5 versicolor 53 3.1 1.5 versicolor 54 2.3 1.3 versicolor 55 2.8 1.5 versicolor 101 3.3 2.5 virginica 102 2.7 1.9 virginica 103 3.0 2.1 virginica 104 2.9 1.8 virginica 105 3.0 2.2 virginica データ 視覚記号
  47. 47. データセットと可視化 # ガク片幅 花弁幅 Species 1 3.5 0.2 setosa 2 3.0 0.2 setosa 3 3.2 0.2 setosa 4 3.1 0.2 setosa 5 3.6 0.2 setosa 51 3.2 1.4 versicolor 52 3.2 1.5 versicolor 53 3.1 1.5 versicolor 54 2.3 1.3 versicolor 55 2.8 1.5 versicolor 101 3.3 2.5 virginica 102 2.7 1.9 virginica 103 3.0 2.1 virginica 104 2.9 1.8 virginica 105 3.0 2.2 virginica データ変数 Y 視覚変数 X 色
  48. 48. 可視化の概念(理屈上) # Sepal.Lengt h Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 51 7.0 3.2 4.7 1.4 versicolor 52 6.4 3.2 4.5 1.5 versicolor 53 6.9 3.1 4.9 1.5 versicolor 萼片長 花弁長 種別 5.1 1.4 setosa 萼片長 5.1 比例尺度 花弁長 1.4 比例尺度 種別 setosa 名義尺度 萼片長 比例尺度 位置1 花弁長 比例尺度 位置2 種別 名義尺度 色 Sepal.Length Petal.Length Species 5.1 1.4 setosa 4.9 1.4 setosa 4.7 1.3 setosa 4.6 1.5 setosa 5.0 1.4 setosa 7.0 4.7 versicolor 6.4 4.5 versicolor 6.9 4.9 versicolor 萼片長 花弁長 種別 100 27 赤 データセット データセット (変数抽出) データ データ変数 視覚変数 視覚記号 可視化 対応 対応 対応
  49. 49. データ変数/視覚変数 萼片幅:x座標、花弁幅:y座標、種別:色 と3つのデータ変数:視覚変数を対応
  50. 50. データ変数/視覚変数 散布図だと4つくらいの変数は表現可能 ※ ただし、setosaの透明度が高く視認性が低いので・・・
  51. 51. データ変数/視覚変数 散布図だと4つくらいの変数は表現可能 ※ ただし、setosaの透明度が高く視認性が低いので・・・ データ変数の「値」と「面 積」を対応付ける!! 「半径」を対応付けてしま うと面積は自乗される!
  52. 52. 視覚変数の特性 選択性:色、方向など 視覚変数が異なる場合、弁別が可能 関連性:色、形状など 視覚変数が異なる場合、同一グループの認識が可能 定量性:サイズ、位置など 視覚変数が異なる場合、2つの差を識別することが可能 順序性:強さ(透明度、彩度)など 視覚変数が異なる場合、順序の大小を識別することが 可能
  53. 53. データ変数の尺度 名義尺度:カテゴリ、名称など 同じかそれ以外かの比較しかできない 順序尺度:徒競走の順位、3択のアンケートなど 同じかどうか・大小比較はできるが、加減など の演算はできない 等差尺度:日付など 差の比較はできるが、ゼロ点がなく比の意味が無い 比例尺度:人数、回数、経過秒数など ゼロ点があり、差の比較、比の比較が可能
  54. 54. 視覚変数の特性 これも掲載すればよかったと反省しています Designing Data Visualizations (2011, O REILLY)
  55. 55. 視覚変数の特性 (推奨) これも掲載すればよかったと反省しています Designing Data Visualizations (2011, O REILLY) カテゴリを示すなら一択 カテゴリを示すなら一択テクスチャ系は図が煩雑に なりやすい
  56. 56. Webでの可視化のいいところ
  57. 57. 利点 Webで共有し、多くの人にデータに含まれ る事実を届けることができる 税金はどこに行った? マウスやキーボードによるインタラクショ ンが利用できる アニメーションが利用できる 時間軸を実際の時間に割り当てることで、表 現できるデータ変数を1つ増やすことができる
  58. 58. Webでの共有 http://spending.jp/
  59. 59. インタラクション http://square.github.io/crossfilter/ http://www.cs.umd.edu / bederson/papers/index.html
  60. 60. アニメーション https://www.youtube.com/watch?v=ezVk1ahRF78#t=4m23s
  61. 61. SVGについて
  62. 62. SVGとは Scalable Vector Graphics 大きくしても綺麗 XML Document (DOM) Inspectorで見やすい
  63. 63. SVGで使えるタグ svg g defs, symbol, use path, line, rect, circle ellipse, polyline, polygon ! あとはフィルター周りがたくさんありますが ほとんど使う機会はありません
  64. 64. SVGはこんな感じ <svg width="400" height="300">! <g transform="translate(50,50)">! <circle r="5" cx="128.571" cy="111.733" fill="blue"></circle>! <circle r="5" cx="21.428" cy="121.600" fill="red"></circle>! <circle r="5" cx="77.142" cy="138.4" fill="blue"></circle>! <circle r="5" cx="111.428" cy="135.2" fill="blue"></circle>! <circle r="5" cx="300" cy="0" fill="red"></circle>! <circle r="5" cx="0" cy="73.066" fill="red"></circle>! <circle r="5" cx="244.285" cy="192.266" fill="blue"></circle>! <circle r="5" cx="270" cy="200" fill="red"></circle>! <circle r="5" cx="51.428" cy="173.333" fill="red"></circle>! </g>! </svg>
  65. 65. SVGについてはこちらを http://www.slideshare.net/kadoppe/inline-svghttp://www.slideshare.net/ssuser99dc16/svg- maniaxcss-nite-after-dark7-svgmatsuda
  66. 66. D3.js
  67. 67. D3.jsとは URL (http://d3js.org/) Data-Driven-Documents data に基づいて html/svg document object の処理を行う、というコンセプト SVG操作 + 数値処理 + 可視化ユーティリティ の総合JavaScriptライブラリ SVG:selector/attr/style 数値処理:scale/nest/array/math 可視化ユーティリティ: scale/axis/layout
  68. 68. 具体例 <!doctype html>! <html lang="ja">! <head>! <meta charset="utf8">! <title>d3 introduction</title>! <style>! .axis line, .axis path { fill: none; stroke: grey; }! </style>! </head>! <body>! ! <div>! <p>0th paragraph</p>! <p>1st paragraph</p>! <p>2nd paragraph</p>! </div>! ! <script type="text/javascript" charset="utf8" src="../components/d3/d3.min.js"></script>! <script type="text/javascript" charset="utf8" src="./introduction.js"></script>! </body>! </html>
  69. 69. 具体例 (属性/スタイル操作) var paragraphs = d3.select('body').selectAll('p');! paragraphs.style({background: 'cyan'});
  70. 70. 具体例 (属性/スタイル操作) var paragraphs = d3.select('body').selectAll('p');! var pdata = [! {text: "modified: 0th paragraph"},! {text: "modified: 1th paragraph"},! {text: "modified: 2th paragraph"}! ];! paragraphs.data(pdata).text(function(d){ return d.text; }); .data()でデータを紐付ける(ひとつのpに対して、ひとつの データ) .attr()/.text()/.style()などは引数に紐付けられたデータを 取り、それに応じた処理を行う
  71. 71. 具体例 (データに基づく追加) var pdata = d3.range(0, 5)! .map(function(id){! return {! id: id,! text: id + "th paragraph"! };! });! ! paragraphs.data(pdata).enter()! .append('p')! .text(function(d){! return d.text;! }); 増えた!
  72. 72. 具体例 (データに基づく追加) でも2つしか増えてない! データの長さは(pdata.length=)5 なぜか? 既存のp 3 差分 2 ▶ これが増えた分! データ 5
  73. 73. var pdata = d3.range(0, 5)! .map(function(id){! return {! id: id,! text: id + "th paragraph"! };! });! ! paragraphs.data(pdata).enter()! .append('p')! .text(function(d){! return d.text;! }); 具体例 (データに基づく追加) .enter()によって、データ-DOMを処理の対象にする
  74. 74. 具体例 (データに基づく削除) var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove(); 「.data().exit()」 .exit()によって、DOM-データを処理の対象にする データ 2 差分 1 ▶ これが.remove()した分 既存のp 3
  75. 75. Selection .select()/.selectAll()で取得したDOM や.append()によって追加したDOMを selectionといいます .data()によりデータを紐付けることができ ます .attr()/.style()/.text()などでは紐付け られたデータを利用してDOMを処理するこ とができます
  76. 76. Data Driven Documents
  77. 77. Selection 紐付けたデータ既存のDOM .exit() selection .enter()
  78. 78. Selection (例えば) 紐付けたデータ既存のDOM .exit() selection .enter() 属性・スタイル・テキ ストの変更などを行う 新規にDOMを追加 し、同時に属性・スタ イル・テキストをセッ トする 既存のDOMを削除し たり、透明度を上げた りを行う
  79. 79. 作成するときのコツ SVGは基本 後に追加したものが上に表示される Layer(gタグ)を使って制御するとうまく 書けます transform属性をうまく使うと楽です text周りは難しいです(kadoppeさんも 言ってます)
  80. 80. <svg width="500" height="500">! <g width="480" height="480" transform="translate(10,10)">! <g class="background-layer">! <g class="ruler">! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="0" y2="0"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="48" y2="48"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="96" y2="96"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="144" y2="144"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="192" y2="192"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="240" y2="240"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="288" y2="288"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="336" y2="336"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="384" y2="384"></line>! <line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="432" y2="432"></line>! </g>! </g>! <g class="chart-layer">! <g><rect x="10" width="100" height="22" y="458" fill="#1f77b4"></rect></g>! <g><rect x="170" width="100" height="209" y="271" fill="#ff7f0e"></rect></g>! <g><rect x="330" width="100" height="478" y="2" fill="#2ca02c"></rect></g>! </g>! <g class="info-layer"></g>! </g>! </svg>
  81. 81. まとめ
  82. 82. データ可視化とは The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman ! データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである !
  83. 83. 可視化が果たすべき役割 視覚表現という「経験的」「認知的」に理解 をサポートする表現に変換するのが可視化 データを記号に、データセットを可視化に変 換する 「よく使われる可視化」はそれだけで理解が 進む可視化 理解が阻まれたら、それはすでに可視化じゃ ない!
  84. 84. 可視化の目的 ☓「どう可視化するか?」 ⃝「何を可視化するか?」 ◎「なんのために可視化するか?」
  85. 85. 可視化の目的 事実を発掘できてこその可視化 事実を活用できてこその可視化 ! 改善行為の促進のための可視化 (ビジネス、政治、家計など)
  86. 86. データ可視化のマントラ Overview First, Zoom and Filter, Then Details-on-Demand Overview First, Zoom and Filter, Then Details-on-Demand Overview First, Zoom and Filter, Then Details-on-Demand Ben Shneiderman !
  87. 87. 時間があったら
  88. 88. 作ってみよう! 萼片長を高さとする棒グラフ
  89. 89. 用意するもの コード: https://gist.github.com/ muddydixon/9295829 Webサーバ: http://blog.kamipo.net/entry/ 2013/02/20/122225 好きなサーバを立ち上げてください
  90. 90. html <!doctype html>! <html lang="ja">! <head>! <meta charset="utf8">! <title>d3 scatter plog</title>! <style>! .axis line, .axis path { fill: none; stroke: grey; }! </style>! </head>! <body>! <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>! <script type="text/javascript" charset="utf8" src="./iris.js"></script>! </body>! </html>
  91. 91. JavaScript データの読み込み var WIDTH = 500, HEIGHT = 500, margin = 50;! var width = WIDTH - 2 * margin, height = HEIGHT - 2 * margin;! var key = 'Sepal.Length';! ! // iris.csv ファイルを読み込む! d3.csv(! "./iris.csv",! // 行の型を修正! function(d){! for(var attr in d){! if(! isNaN(Number(d[attr]))){! d[attr] = +d[attr];! }! return d;! }! },! // データを取得! function(err, data){!
  92. 92. JavaScript SVG要素の作成 // データを取得! function(err, data){! ! // svg要素を追加! var svg = d3.select('body').append('svg').attr({! width: WIDTH,! height: HEIGHT! });! // マージンを確保して、軸などを表示できるようにする! var main = svg.append('g').attr({! width: width,! height: height,! transform: "translate("+margin+","+margin+")"! });! ! // 色の尺度! var color = d3.scale.category10();
  93. 93. JavaScript データの整形と整理 // データを入れ子にする! var speciesData = d3.nest()! // 種類ごとに分類するキーを指定! .key(function(d){ return d.Species;})! // 出力をキーにマッチした配列から、平均値に変更! .rollup(function(values){! return d3.mean(values, function(d){ return d[key]; });! })! // 値を配列で取得! .entries(data);! ! // 種類のキー一覧を取得! var species = speciesData.map(function(d){ return d.key; });! ! // 全体の高さの範囲を取得! var domain = d3.extent(data, function(d){ return d[key]; });!
  94. 94. JavaScript 尺度作成 // y座標の尺度を取得! var yScale = d3.scale.linear()! // 変換後の範囲(値域)! .range([0, height])! // 変換前の範囲(定義域)! .domain([0, domain[1]]);! ! // x座標の尺度を取得! var xScale = d3.scale.ordinal()! // 変換後の範囲(値域)! .rangeBands([0, width], .2)! // 変換前の範囲(定義域)! .domain(species);
  95. 95. JavaScript 棒を描画 // 棒(のグループ)要素を作成! var bar = main.selectAll('g')! .data(speciesData)! .enter()! .append('g')! .attr({! transform: function(d){! return "translate("+xScale(d.key)+","+height+")";! }! });! ! // 棒を描画! bar.append('rect').attr({! // 矩形の高さ! height: function(d){ return yScale(d.values); },! // 矩形の位置! y: function(d){ return -yScale(d.values); },! // 矩形の幅! width: xScale.rangeBand(),! // 矩形の色! fill: function(d){ return color(d.key); }! });!
  96. 96. JavaScript 棒に値を描画 // 棒(のグループ)要素を作成! var bar = main.selectAll('g')! .data(speciesData)! .enter()! .append('g')! .attr({! transform: function(d){! return "translate("+xScale(d.key)+","+height+")";! }! });! ! // 棒を描画 (前述)! // 値を描画! bar.append('text')! // テキストは分類した時のキー! .text(function(d){! return d.values.toFixed(2);! })! .attr({! // 位置を棒の上に! dy: function(d){ return - yScale(d.values); },! dx: xScale.rangeBand() / 2,! fill: 'black'! }).style('text-anchor', 'middle');
  97. 97. JavaScript 軸の描画 // x軸生成のユーティリティ! var xAxisSvg = d3.svg.axis().scale(xScale);! // y軸生成のユーティリティ! var yAxisSvg = d3.svg.axis().scale(yScale.copy()! .range([height, 0])).orient('left');! // x軸を生成! var xAxis = main.append('g').call(xAxisSvg).attr('class', 'axis')! .attr("transform", "translate(0,"+height+")");! // y軸を生成! var yAxis = main.append('g').call(yAxisSvg).attr('class', 'axis');! ! // y軸のラベルを記述! main.append('text').text(key).attr({! transform: "translate(-30,"+(height / 2)+") rotate(-90)"! });
  98. 98. 課題 棒グラフ 折線グラフ 散布図 インタラクション アニメーション ジオマッピング

×