![具体例 (属性/スタイル操作)
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()などは引数に紐付けられたデータを
取り、それに応じた処理を行う](https://image.slidesharecdn.com/random-140302011336-phpapp02/85/-41-320.jpg)
![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){!](https://image.slidesharecdn.com/random-140302011336-phpapp02/85/-53-320.jpg)
![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]; });!](https://image.slidesharecdn.com/random-140302011336-phpapp02/85/-55-320.jpg)
![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);](https://image.slidesharecdn.com/random-140302011336-phpapp02/85/-56-320.jpg)
![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)"!
});](https://image.slidesharecdn.com/random-140302011336-phpapp02/85/-59-320.jpg)
テ?ータ可视化勉强会
- 1. データ可視化の基礎 と D3のデモ データ可視化勉強会 2014/03/02 http://www.zusaar.com/event/3927003 @muddydixon ニフティ株式会社 森藤大地
- 2. ! muddydixon " muddy.dixon # muddydixon ! Node.js Perl Visualization Statistics TimeSeries NeuralNetwork
- 5. 可视化とは
- 6. データ可视化とは $ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである Vitaly Friedman
- 7. つまり % 情報を伝えそびれている可視化 % 明確ではない可視化 % 効率的ではない可視化 ! 上記は「可視化」ではない
- 9. なぜ可視化するとよいか 視覚的な表現=視覚記号(後述)のアナロジー 大きさ、位置、濃淡、色、傾きなどの、経験的? 認知的な既存知識を効率的に利用した理解の促進 ! 値の大小?? ? 値の大小 ??? 上昇傾向 ??? 下降傾向 ??? 同じカテゴリ ? 高さの大小 面積の大小 右上がりの傾き 右下がりの傾き 同じ色
- 10. 認知機能?経験をフルに使う # 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
- 13. これなら なんとか
- 14. 図形の経験?认知能力を利用
- 18. 重要なこと
- 19. データ可视化とは(再掲) $ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである Vitaly Friedman
- 20. 可视化の理论
- 21. データ可视化の书籍
- 30. 视覚変数について
- 32. 視覚変数の特性 Designing Data Visualizations (2011, O REILLY) これも掲載すればよかったと反省しています
- 33. 視覚変数の特性 (推奨) カテゴリを示すなら一択 テクスチャ系は図が煩雑に カテゴリを示すなら一択 なりやすい Designing Data Visualizations (2011, O REILLY) これも掲載すればよかったと反省しています
- 35. 奥别产での可视化のいいところ
- 37. D3.js
- 38. 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
- 39. 具体例 ! ! <!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=/muddydixon/ss-31811179/"../components/d3/d3.min.js"></script>! <script type="text/javascript" charset="utf8" src="./introduction.js"></script>! </body>! </html>
- 40. 具体例 (属性/スタイル操作) var paragraphs = d3.select('body').selectAll('p');! paragraphs.style({background: 'cyan'});
- 41. 具体例 (属性/スタイル操作) 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()などは引数に紐付けられたデータを 取り、それに応じた処理を行う
- 42. 具体例 (データに基づく追加) 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;! }); 増えた！
- 44. 具体例 (データに基づく追加) 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を処理の対象にする
- 45. 具体例 (データに基づく削除) var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove(); 「.data().exit()」 .exit()によって、DOM-データを処理の対象にする 既存のp 3 データ 2 差分 1 ? これが.remove()した分
- 52. 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=/muddydixon/ss-31811179/"http:/d3js.org/d3.v3.min.js" charset="utf-8"></script>! <script type="text/javascript" charset="utf8" src="./iris.js"></script>! </body>! </html>
- 53. 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){!
- 54. 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();
- 55. 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]; });!
- 56. 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);
- 57. 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); }! });!
- 58. 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');
- 59. 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)"! });
- 60. まとめ
- 61. データ可视化とは $ The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである Vitaly Friedman
- 63. データ可視化のマントラ $ 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