データ可視化勉強会

データ可視化の基礎
と
D3のデモ
データ可視化勉強会 2014/03/02
http://www.zusaar.com/event/3927003
@muddydixon
ニフティ株式会社 森藤大地
! muddydixon
" muddy.dixon
# muddydixon
!

Node.js
Perl
Visualization
Statistics
TimeSeries
NeuralNetwork
今日話すこと
データ可視化とは(10分)
データ可視化の理屈(10分)
Webでのデータ可視化のいいところ(5分)
D3.jsとは(20分)
質疑応答(10分)
今日はなさないこと
あんちべさんがブログで書いたFAQ
統計の話
辛かった話
可視化とは
データ可視化とは
$

The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.

$

データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman
つまり
% 情報を伝えそびれている可視化
% 明確ではない可視化
% 効率的ではない可視化
!

上記は「可視化」ではない
可視化の定義
情報が視覚的な表現に置き換えられている
情報が明確に伝えられている
情報が効率的に伝えられている

&
'

(

)
なぜ可視化するとよいか
視覚的な表現=視覚記号(後述)のアナロジー
大きさ、位置、濃淡、色、傾きなどの、経験的・
認知的な既存知識を効率的に利用した理解の促進
!

値の大小   ▶
値の大小   ▶
上昇傾向   ▶
下降傾向   ▶
同じカテゴリ ▶

高さの大小
面積の大小
右上がりの傾き
右下がりの傾き
同じ色
認知機能・経験をフルに使う
#

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
これみても
わかるわけでは
ないですよね?
統計量で表現
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
これなら
なんとか
図形の経験・認知能力を利用
図形の経験・認知能力を利用
•
•

•

•

均等に分布
中央値がおおよ
そ中心

他の属性と比較して分布
の幅が小さい
外れ値がちらほら

•

分布の幅が広い
中央値が上に偏っている

•

大きく2つの峰がある

•

•

•

中央値が若干、上
に偏り
峰が2つ・・・?
「認知」が「把握」を加速
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
その他にも
箱ひげ図の代わりに
ヒストグラム

ヒストグラムを種別毎に
表現
重要なこと
データ可視化とは(再掲)
$

The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.

$

データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman
可視化の理論
データ可視化の書籍
他にもたくさん
ありますが
読めていません
Grammar of Graphics
SYSTATの開発者
ggplot2の開発に
も大きな影響を与
えた書籍
doryokujin先生も
読んでる
データ可視化のプロセス
1.
2.
3.
4.
5.
6.
7.
8.
9.

データセット
変数化
代数処理
尺度化処理
統計処理
幾何処理
座標系処理
装飾処理
可視化
可視化で意識する概念
データセット

対応

データセットのデータに対応する
記号の集合による可視化

様々なフィールドの値からなる
レコードを複数含むデータ群
変数抽出・代数処理・
尺度化処・理統計処理が済んだもの

データ

対応

可視化対象とするフィールドを
含むデータ。ひとつひとつが意味を
持った単位(例:SQLの行)

データ変数
フィールドの値そのもの
数値(メジャー)やカテゴリ変数(ディ
メンジョン)。ひとつひとつが視覚変
数に置換される

可視化

視覚記号
視覚変数を集約させた記号
点や円、矩形、弧、立体など

対応

視覚変数
視覚表現ひとつひとつを指す
位置やサイズ、色、傾き、強度(透明
度・彩度・明度)、テクスチャなど
可視化の概念(理屈上)
#

Sepal.Width

Petal.Length

Petal.Width

Species

1

Sepal.Lengt
h
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

データセット

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
versicolor

7.0

4.7

6.4

4.5

6.9

4.9

対応

versicolor

データセット
(変数抽出)
versicolor

萼片長

花弁長

種別

5.1

1.4

可視化

setosa

データ
萼片長

5.1
1.4

比例尺度

種別

setosa

名義尺度

データ変数

花弁長

種別

27

赤

視覚記号

比例尺度

花弁長

萼片長

100

対応

萼片長
対応

比例尺度

位置1

花弁長

比例尺度

位置2

種別

名義尺度

色

視覚変数
データ変数/視覚変数

萼片幅:x座標、花弁幅:y座標、種別:色
と3つのデータ変数:視覚変数を対応
データ変数/視覚変数

散布図だと4つくらいの変数は表現可能
※ ただし、setosaの透明度が高く視認性が低いので・・・
データ変数/視覚変数
データ変数の「値」と「面
積」を対応付ける!!
「半径」を対応付けてしま
うと面積は自乗される!

散布図だと4つくらいの変数は表現可能
※ ただし、setosaの透明度が高く視認性が低いので・・・
視覚変数について
視覚変数の特性
選択性:色、方向など
視覚変数が異なる場合、弁別が可
能

関連性:色、形状など
視覚変数が異なる場合、同一グルー
プの認識が可能

定量性:サイズ、位置など
視覚変数が異なる場合、2つの差
を識別することが可能

順序性:強さ(透明度、彩度)など
視覚変数が異なる場合、順序の大
小を識別することが可能
視覚変数の特性

Designing Data Visualizations (2011, O REILLY)
これも掲載すればよかったと反省しています
視覚変数の特性 (推奨)

カテゴリを示すなら一択

テクスチャ系は図が煩雑に
カテゴリを示すなら一択
なりやすい
Designing Data Visualizations (2011, O REILLY)
これも掲載すればよかったと反省しています
可視化の種類 / 選定
これはdoryokujinさんのスライドの方が素
晴らしいので後述
Webでの可視化のいいところ
利点
Webで共有し、多くの人にデータに含まれ
る事実を届けることができる
マウスやキーボードによるインタラクション
が利用できる
アニメーションが利用できる
D3.js
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
具体例
!

!

<!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>
具体例 (属性/スタイル操作)
var paragraphs = d3.select('body').selectAll('p');!
paragraphs.style({background: 'cyan'});
具体例 (属性/スタイル操作)
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()などは引数に紐付けられたデータを
取り、それに応じた処理を行う
具体例 (データに基づく追加)
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;!
});

増えた!
具体例 (データに基づく追加)
でも2つしか増えてない!
データの長さは(pdata.length=)5
なぜか?
データ 5
既存のp
3
差分 2 ▶ これが増えた分!
具体例 (データに基づく追加)
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を処理の対象にする
具体例 (データに基づく削除)
var lessData = pdata.slice(0, 2);!
paragraphs.data(lessData).exit().remove();

「.data().exit()」
.exit()によって、DOM-データを処理の対象にする
既存のp 3
データ
2
差分 1 ▶ これが.remove()した分
Selection
.select()/.selectAll()で取得したDOM
や.append()によって追加したDOMを
selectionといいます
.data()によりデータを紐付けることができ
ます
.attr()/.style()/.text()などでは紐付けられ
たデータを利用してDOMを処理することが
できます
Data
Driven
Documents
Selection
既存のDOM

紐付けたデータ

.exit()

.enter()
selection
Selection (例えば)
既存のDOM

紐付けたデータ

.exit()
既存のDOMを削除し
たり、透明度を上げた
りを行う

.enter()
selection
属性・スタイル・テキ
ストの変更などを行う

新規にDOMを追加
し、同時に属性・スタ
イル・テキストをセッ
トする
作ってみよう!

萼片長を高さとする棒グラフ
用意するもの
コード: https://gist.github.com/
muddydixon/9295829
Webサーバ:
http://blog.kamipo.net/entry/
2013/02/20/122225
好きなサーバを立ち上げてください
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>
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){!
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();
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]; });!
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);
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); }!
});!
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');
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)"!
});
まとめ
データ可視化とは
$

The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.

$

データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman
可視化が果たすべき役割
視覚表現という「経験的」「認知的」に理解
をサポートする表現に変換するのが可視化
データを記号に、データセットを可視化に変
換する
「よく使われる可視化」はそれだけで理解が
進む可視化
理解が阻まれたら、それはすでに可視化じゃ
ない!
データ可視化のマントラ
$

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
1 of 63

Recommended

時系列ビッグデータの特徴自動抽出とリアルタイム将来予測(第9回ステアラボ人工知能セミナー) by
時系列ビッグデータの特徴自動抽出とリアルタイム将来予測(第9回ステアラボ人工知能セミナー)時系列ビッグデータの特徴自動抽出とリアルタイム将来予測(第9回ステアラボ人工知能セミナー)
時系列ビッグデータの特徴自動抽出とリアルタイム将来予測(第9回ステアラボ人工知能セミナー)STAIR Lab, Chiba Institute of Technology
7K views134 slides
SQLアンチパターン~スパゲッティクエリ by
SQLアンチパターン~スパゲッティクエリSQLアンチパターン~スパゲッティクエリ
SQLアンチパターン~スパゲッティクエリItabashi Masayuki
7.2K views69 slides
k-means(k-平均法) by
k-means(k-平均法)k-means(k-平均法)
k-means(k-平均法)Yuta Tomomatsu
9.5K views52 slides
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話 by
DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話Koichiro Matsuoka
88K views89 slides
20090107 Postgre Sqlチューニング(Sql編) by
20090107 Postgre Sqlチューニング(Sql編)20090107 Postgre Sqlチューニング(Sql編)
20090107 Postgre Sqlチューニング(Sql編)Hiromu Shioya
8.3K views26 slides
データベース設計徹底指南 by
データベース設計徹底指南データベース設計徹底指南
データベース設計徹底指南Mikiya Okuno
114.4K views132 slides

More Related Content

What's hot

変数同士の関連_MIC by
変数同士の関連_MIC変数同士の関連_MIC
変数同士の関連_MICShushi Namba
5.5K views36 slides
第1回Rを使って統計分析を勉強する会 by
第1回Rを使って統計分析を勉強する会第1回Rを使って統計分析を勉強する会
第1回Rを使って統計分析を勉強する会Nobuto Inoguchi
3.3K views32 slides
ナレッジグラフ/LOD利用技術の入門(後編) by
ナレッジグラフ/LOD利用技術の入門(後編)ナレッジグラフ/LOD利用技術の入門(後編)
ナレッジグラフ/LOD利用技術の入門(後編)KnowledgeGraph
1.2K views30 slides
Python と型ヒント (Type Hints) by
Python と型ヒント (Type Hints)Python と型ヒント (Type Hints)
Python と型ヒント (Type Hints)Tetsuya Morimoto
38.1K views39 slides
証明プログラミング超入門 by
証明プログラミング超入門証明プログラミング超入門
証明プログラミング超入門Kyoko Kadowaki
10.9K views21 slides

What's hot(20)

変数同士の関連_MIC by Shushi Namba
変数同士の関連_MIC変数同士の関連_MIC
変数同士の関連_MIC
Shushi Namba5.5K views
第1回Rを使って統計分析を勉強する会 by Nobuto Inoguchi
第1回Rを使って統計分析を勉強する会第1回Rを使って統計分析を勉強する会
第1回Rを使って統計分析を勉強する会
Nobuto Inoguchi3.3K views
ナレッジグラフ/LOD利用技術の入門(後編) by KnowledgeGraph
ナレッジグラフ/LOD利用技術の入門(後編)ナレッジグラフ/LOD利用技術の入門(後編)
ナレッジグラフ/LOD利用技術の入門(後編)
KnowledgeGraph1.2K views
Python と型ヒント (Type Hints) by Tetsuya Morimoto
Python と型ヒント (Type Hints)Python と型ヒント (Type Hints)
Python と型ヒント (Type Hints)
Tetsuya Morimoto38.1K views
証明プログラミング超入門 by Kyoko Kadowaki
証明プログラミング超入門証明プログラミング超入門
証明プログラミング超入門
Kyoko Kadowaki10.9K views
深層ニューラルネットワークの積分表現(Deepを定式化する数学) by Katsuya Ito
深層ニューラルネットワークの積分表現(Deepを定式化する数学)深層ニューラルネットワークの積分表現(Deepを定式化する数学)
深層ニューラルネットワークの積分表現(Deepを定式化する数学)
Katsuya Ito4.5K views
線形?非線形? by nishio
線形?非線形?線形?非線形?
線形?非線形?
nishio18.4K views
Vision-and-Language Navigation: Interpreting visually-grounded navigation ins... by Yoshitaka Ushiku
Vision-and-Language Navigation: Interpreting visually-grounded navigation ins...Vision-and-Language Navigation: Interpreting visually-grounded navigation ins...
Vision-and-Language Navigation: Interpreting visually-grounded navigation ins...
Yoshitaka Ushiku2.5K views
PostgreSQL のイケてるテクニック7選 by Tomoya Kawanishi
PostgreSQL のイケてるテクニック7選PostgreSQL のイケてるテクニック7選
PostgreSQL のイケてるテクニック7選
Tomoya Kawanishi6.4K views
Deep Learningと画像認識   ~歴史・理論・実践~ by nlab_utokyo
Deep Learningと画像認識 ~歴史・理論・実践~Deep Learningと画像認識 ~歴史・理論・実践~
Deep Learningと画像認識   ~歴史・理論・実践~
nlab_utokyo355.6K views
Map Reduce 〜入門編:仕組みの理解とアルゴリズムデザイン〜 by Takahiro Inoue
Map Reduce 〜入門編:仕組みの理解とアルゴリズムデザイン〜Map Reduce 〜入門編:仕組みの理解とアルゴリズムデザイン〜
Map Reduce 〜入門編:仕組みの理解とアルゴリズムデザイン〜
Takahiro Inoue38.5K views
Active Learning 入門 by Shuyo Nakatani
Active Learning 入門Active Learning 入門
Active Learning 入門
Shuyo Nakatani51.8K views
潜在ディリクレ配分法 by y-uti
潜在ディリクレ配分法潜在ディリクレ配分法
潜在ディリクレ配分法
y-uti5.8K views
SQLチューニング入門 入門編 by Miki Shimogai
SQLチューニング入門 入門編SQLチューニング入門 入門編
SQLチューニング入門 入門編
Miki Shimogai11.7K views
文脈自由文法の話 by kogecoo
文脈自由文法の話文脈自由文法の話
文脈自由文法の話
kogecoo 31.4K views
書籍「計算社会科学入門」第9章 統計モデリング by Masanori Takano
書籍「計算社会科学入門」第9章 統計モデリング書籍「計算社会科学入門」第9章 統計モデリング
書籍「計算社会科学入門」第9章 統計モデリング
Masanori Takano3.5K views
今日からできる構造学習(主に構造化パーセプトロンについて) by syou6162
今日からできる構造学習(主に構造化パーセプトロンについて)今日からできる構造学習(主に構造化パーセプトロンについて)
今日からできる構造学習(主に構造化パーセプトロンについて)
syou616216.4K views
アドテクに機械学習を組み込むための推論の高速化 by MicroAd, Inc.(Engineer)
アドテクに機械学習を組み込むための推論の高速化アドテクに機械学習を組み込むための推論の高速化
アドテクに機械学習を組み込むための推論の高速化

Similar to データ可視化勉強会

Gtug girls-20140828 by
Gtug girls-20140828Gtug girls-20140828
Gtug girls-20140828Daichi Morifuji
2.5K views90 slides
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」 by
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」aitc_jp
1.6K views19 slides
⑱jQueryをおぼえよう!その4 by
⑱jQueryをおぼえよう!その4⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4Nishida Kansuke
1.3K views40 slides
Data Visualization meetup 2017 by
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017清水 正行
2K views58 slides
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン by
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
4.5K views65 slides
Native x Webでいいとこどり開発 ~ピグトーク~ by
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Kazunari Hara
1.5K views43 slides

Similar to データ可視化勉強会(20)

2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」 by aitc_jp
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
aitc_jp1.6K views
⑱jQueryをおぼえよう!その4 by Nishida Kansuke
⑱jQueryをおぼえよう!その4⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Nishida Kansuke1.3K views
Data Visualization meetup 2017 by 清水 正行
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017
清水 正行2K views
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン by Shumpei Shiraishi
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi4.5K views
Native x Webでいいとこどり開発 ~ピグトーク~ by Kazunari Hara
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara1.5K views
D3.js で LOD を Visualization by dsuke Takaoka
D3.js で LOD を VisualizationD3.js で LOD を Visualization
D3.js で LOD を Visualization
dsuke Takaoka3.6K views
インフォグラフィックス時代のD3.js入門 by 貴寛 益子
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子7.4K views
D3.js と SVG によるデータビジュアライゼーション by Kohei Kadowaki
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki13.8K views
d3jsハンズオン @E2D3ハッカソン by 圭輔 大曽根
d3jsハンズオン @E2D3ハッカソンd3jsハンズオン @E2D3ハッカソン
d3jsハンズオン @E2D3ハッカソン
圭輔 大曽根3K views
ftechmeetup_データバインディングはどう実装されているのか by kanatsum
ftechmeetup_データバインディングはどう実装されているのかftechmeetup_データバインディングはどう実装されているのか
ftechmeetup_データバインディングはどう実装されているのか
kanatsum128 views
Brush up your Coding! 2013 winter by Shogo Sensui
Brush up your Coding! 2013 winterBrush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui6.2K views
D3jsを使ってみた@wcan lt大会 by Takuya Ueda
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda1.6K views
20110714 j queryベーシック by 良太 増子
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
良太 増子618 views
Data Visualizationしてみた [ D3.js編 ] by weddingpark
Data Visualizationしてみた  [ D3.js編 ]Data Visualizationしてみた  [ D3.js編 ]
Data Visualizationしてみた [ D3.js編 ]
weddingpark1K views
データビジュアライゼーション Dc.jsで遊ぼう - 清水 by chome03
データビジュアライゼーション   Dc.jsで遊ぼう - 清水データビジュアライゼーション   Dc.jsで遊ぼう - 清水
データビジュアライゼーション Dc.jsで遊ぼう - 清水
chome033.8K views
Azure Webiner: より安定したWebサイト構築のためのAzure PaaS サービス群 by Daiyu Hatakeyama
Azure Webiner: より安定したWebサイト構築のためのAzure PaaS サービス群Azure Webiner: より安定したWebサイト構築のためのAzure PaaS サービス群
Azure Webiner: より安定したWebサイト構築のためのAzure PaaS サービス群
Daiyu Hatakeyama887 views
【de:code 2020】 ~すでに時代遅れ? 個人情報や紙のためにオフィスに行くのは今すぐやめよう~ 日本郵政スタッフが実現したステイ ホーム/クラウ... by 日本マイクロソフト株式会社
【de:code 2020】 ~すでに時代遅れ? 個人情報や紙のためにオフィスに行くのは今すぐやめよう~ 日本郵政スタッフが実現したステイ ホーム/クラウ...【de:code 2020】 ~すでに時代遅れ? 個人情報や紙のためにオフィスに行くのは今すぐやめよう~ 日本郵政スタッフが実現したステイ ホーム/クラウ...
【de:code 2020】 ~すでに時代遅れ? 個人情報や紙のためにオフィスに行くのは今すぐやめよう~ 日本郵政スタッフが実現したステイ ホーム/クラウ...
データビジュアライゼーションの作り方 by 清水 正行
データビジュアライゼーションの作り方データビジュアライゼーションの作り方
データビジュアライゼーションの作り方
清水 正行3.1K views

More from Daichi Morifuji

20151030 ux sketch vol5 by
20151030 ux sketch vol520151030 ux sketch vol5
20151030 ux sketch vol5Daichi Morifuji
2.1K views48 slides
neural network introduction yapc asia tokyo by
neural network introduction yapc asia tokyo neural network introduction yapc asia tokyo
neural network introduction yapc asia tokyo Daichi Morifuji
7.8K views72 slides
20150726 IoTってなに?ニフティクラウドmqttでやったこと by
20150726 IoTってなに?ニフティクラウドmqttでやったこと20150726 IoTってなに?ニフティクラウドmqttでやったこと
20150726 IoTってなに?ニフティクラウドmqttでやったことDaichi Morifuji
6.7K views92 slides
20150803 baas meetup by
20150803 baas meetup20150803 baas meetup
20150803 baas meetupDaichi Morifuji
4.3K views36 slides
Io t縛りの勉強会 #4 by
Io t縛りの勉強会 #4Io t縛りの勉強会 #4
Io t縛りの勉強会 #4Daichi Morifuji
2.7K views30 slides
Html5j data visualization_and_d3 by
Html5j data visualization_and_d3Html5j data visualization_and_d3
Html5j data visualization_and_d3Daichi Morifuji
5.7K views99 slides

More from Daichi Morifuji(15)

neural network introduction yapc asia tokyo by Daichi Morifuji
neural network introduction yapc asia tokyo neural network introduction yapc asia tokyo
neural network introduction yapc asia tokyo
Daichi Morifuji7.8K views
20150726 IoTってなに?ニフティクラウドmqttでやったこと by Daichi Morifuji
20150726 IoTってなに?ニフティクラウドmqttでやったこと20150726 IoTってなに?ニフティクラウドmqttでやったこと
20150726 IoTってなに?ニフティクラウドmqttでやったこと
Daichi Morifuji6.7K views
Html5j data visualization_and_d3 by Daichi Morifuji
Html5j data visualization_and_d3Html5j data visualization_and_d3
Html5j data visualization_and_d3
Daichi Morifuji5.7K views
Time Series Analysis by JavaScript LL matsuri 2013 by Daichi Morifuji
Time Series Analysis by JavaScript LL matsuri 2013 Time Series Analysis by JavaScript LL matsuri 2013
Time Series Analysis by JavaScript LL matsuri 2013
Daichi Morifuji3.4K views
ParamTuner 東京Node学園#8 by Daichi Morifuji
ParamTuner 東京Node学園#8 ParamTuner 東京Node学園#8
ParamTuner 東京Node学園#8
Daichi Morifuji1.9K views
オレオレMultipleInputを作る方法 by Daichi Morifuji
オレオレMultipleInputを作る方法オレオレMultipleInputを作る方法
オレオレMultipleInputを作る方法
Daichi Morifuji1.3K views
BigData Analysis with mongo-hadoop by Daichi Morifuji
BigData Analysis with mongo-hadoopBigData Analysis with mongo-hadoop
BigData Analysis with mongo-hadoop
Daichi Morifuji4.4K views
MongoDBとHadoopの蜜月関係 by Daichi Morifuji
MongoDBとHadoopの蜜月関係MongoDBとHadoopの蜜月関係
MongoDBとHadoopの蜜月関係
Daichi Morifuji1.1K views
企業と勉強会 @nifty エンジニアサポート by Daichi Morifuji
企業と勉強会 @nifty エンジニアサポート企業と勉強会 @nifty エンジニアサポート
企業と勉強会 @nifty エンジニアサポート
Daichi Morifuji1.3K views

Recently uploaded

さくらのひやおろし2023 by
さくらのひやおろし2023さくらのひやおろし2023
さくらのひやおろし2023法林浩之
91 views58 slides
JJUG CCC.pptx by
JJUG CCC.pptxJJUG CCC.pptx
JJUG CCC.pptxKanta Sasaki
6 views14 slides
01Booster Studio ご紹介資料 by
01Booster Studio ご紹介資料01Booster Studio ご紹介資料
01Booster Studio ご紹介資料ssusere7a2172
300 views19 slides
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料) by
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)NTT DATA Technology & Innovation
233 views63 slides
Windows 11 information that can be used at the development site by
Windows 11 information that can be used at the development siteWindows 11 information that can be used at the development site
Windows 11 information that can be used at the development siteAtomu Hidaka
71 views41 slides
SNMPセキュリティ超入門 by
SNMPセキュリティ超入門SNMPセキュリティ超入門
SNMPセキュリティ超入門mkoda
175 views15 slides

Recently uploaded(12)

さくらのひやおろし2023 by 法林浩之
さくらのひやおろし2023さくらのひやおろし2023
さくらのひやおろし2023
法林浩之91 views
01Booster Studio ご紹介資料 by ssusere7a2172
01Booster Studio ご紹介資料01Booster Studio ご紹介資料
01Booster Studio ご紹介資料
ssusere7a2172300 views
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料) by NTT DATA Technology & Innovation
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう!(PostgreSQL Conference Japan 2023 発表資料)
Windows 11 information that can be used at the development site by Atomu Hidaka
Windows 11 information that can be used at the development siteWindows 11 information that can be used at the development site
Windows 11 information that can be used at the development site
Atomu Hidaka71 views
SNMPセキュリティ超入門 by mkoda
SNMPセキュリティ超入門SNMPセキュリティ超入門
SNMPセキュリティ超入門
mkoda175 views
SSH応用編_20231129.pdf by icebreaker4
SSH応用編_20231129.pdfSSH応用編_20231129.pdf
SSH応用編_20231129.pdf
icebreaker4172 views
The Things Stack説明資料 by The Things Industries by CRI Japan, Inc.
The Things Stack説明資料 by The Things IndustriesThe Things Stack説明資料 by The Things Industries
The Things Stack説明資料 by The Things Industries
CRI Japan, Inc.41 views
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20... by NTT DATA Technology & Innovation
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...
「概念モデリング自動化に向けた第一歩」 ~ ChatGPT・Open AI 活用による開発対象のモデル化 by Knowledge & Experience
「概念モデリング自動化に向けた第一歩」 ~ ChatGPT・Open AI 活用による開発対象のモデル化「概念モデリング自動化に向けた第一歩」 ~ ChatGPT・Open AI 活用による開発対象のモデル化
「概念モデリング自動化に向けた第一歩」 ~ ChatGPT・Open AI 活用による開発対象のモデル化
Web3 Career_クレデン資料 .pdf by nanamatsuo
Web3 Career_クレデン資料 .pdfWeb3 Career_クレデン資料 .pdf
Web3 Career_クレデン資料 .pdf
nanamatsuo14 views
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料) by NTT DATA Technology & Innovation
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)

データ可視化勉強会