SlideShare a Scribd company logo
1 of 62
Download to read offline
Inside Frontend #1
データビジュアライゼーション
の作り方
Created by /Masayuki Shimizu @_shimizu
1
群馬県高崎市在住2015年11月に転職日本経済新聞社メディア戦略部DataViz/GIS エンジニア
自己紹介
清水正行
2
主なお仕事
3
日経:Visual Data日経:Visual Data
4
5
6
7
8
9
本日の目録
VDataコンテンツの作り方D3.js
バッドノウハウ集Z-indexが効かない問題Pathのトランジション折り返さない問題svgをpngに変換(つらい)
10
VDataコンテンツの作り方
11 . 1
制作フロー
1. 企画発案(記者より)
2. データ収集・分析・整形
3. デザイン案やモックを作って打ち合わせ
4. デザイン決定
5. 実装
6. 宣伝用の素材等作成
(SNSに流す用のグラフィックスや動画など)
11 . 2
作成チーム
PM1人
デザイナー3人
エンジニア2人
2ライン(デザイナー1、エンジニア1)
作成期間(2週間~4週間)、速報(6時間)
一点物が多い
11 . 3
これらの条件を踏まえ、日経ビジュアルデータで
はD3.jsというライブラリを採用しています。
11 . 4
D3.js
データビジュアライゼーションライブラリ
12 . 1
特徴
Data-Driven Document
デファクトスタンダード
チャートライブラリではない
学習コストが高いと言われている(誤解?)
12 . 2
D3 GalleryD3 Gallery
12 . 3
D3.jsを使っても公式サイトのGalleryに掲載されて
いるような複雑なデータビジュアライゼーション
が簡単に作れるわけではありません。
12 . 4
忘れましょう。
12 . 5
データビジュアライゼーションで必要になる作業
12 . 6
データを図表で表現する
12 . 7
Data -> Document
12 . 8
データの内容をエレメントの属性やスタイルに
反映する処理を繰り返す
12 . 9
面倒なこと
エレメントとデータのリレーション管理
トランジション
値の正規化や座標計算
12 . 10
D3は、データビジュアライゼーション作成の上で
面倒な処理を肩代わりしてくれる。
12 . 11
Data-Driven Document
var data = [{id:0, value:100}, {id:1, value:200}, {id:2, value:300}]
//選択した要素にデータを束縛する
const div = d3.selectAll("div").data(data, (d) => d.id)
//要素が足りない時は追加
const appendDiv = selector.enter().append("div")
//要素が多すぎる時は削除
const removeDiv = selector.exit().remove()
//アトリビュートの内容をアップデートする
div.merge(appendDiv).attr("width", d=> d.value )
12 . 12
複雑なデータになっても
市区町村境界データ
GeoJSON
6MB
1755 Features
15795 Properties
12 . 13
操作は変わらない
const projection = d3.geoMercator()
.fitExtent([[0, 0], [1240, 800]], geojson)
const desc = d3.geoPath().projection(projection)
//path要素にデータを束縛する
const path = svg.selectAll("path").data(geojson.features)
//path要素が足りなければ追加する
const appendPath = path.enter().append("path")
//path要素が多すぎるなら削除する
const removePath = path.exit().remove()
12 . 14
12 . 15
可視化
//人口が2万人以上・以下で塗り分ける
maps.attr("fill", d => (d.properties.pop > 20000) ? "green" : "blue"
//群馬県に所属する市区町村だけ赤く塗る
maps.filter(d => d.properties.pref === "群馬県").attr("fill", "red"
12 . 16
12 . 17
D3.jsはデータを基にエレメントを操作する機能
と、トランジションや計算処理など最低限の機能
のみを提供する。自由度は高いが作り手側でやら
なくてはならないことも多い。
また、ブラウザ間の差異を埋めるような機能はな
い。
12 . 18
BAD KNOWHOWBAD KNOWHOW
13 . 1
z-indexが効かない
13 . 2
13 . 3
重なり合う要素が多い場合
13 . 4
対応策
最初にレイヤーを作っておき、手前に出したいエ
レメントをコピーして表示する
<svg>
<g class="axisLayer"></g>
<g class="plotLayer">
<circle class="orgin">
</g>
<g class="overlay">
</g>
</svg>
<svg>
<g class="axisLayer"></g>
<g class="plotLayer">
<circle class="orgin">
</g>
<g class="overlay">
<circle class="copy"> // <!-- 他の
</g>
</svg>
13 . 5
copy tips
束縛されたデータもコピーしておく
var plotLayer = d3.select(".plotLayer")
var ovarlay = d3.select(".overlay")
plotLayer
.selectAll("rect")
.on("mouseover", copy(overlay))
function copy(layer){
return function(){
var node = d3.select(this).node()
var nodeName = node.nodeName
var nodeAttr = node.attributes
var data = d3.select(this).data()
13 . 6
ポイント
はじめにレイヤーの構成をしっかり決めておく
要素を並べ替えるより、コピーしてしまう方が
管理がしやすい
オリジナルの要素にバインドされているデータ
も一緒にコピーしておくと便利
13 . 7
pathトランジション
13 . 8
例えば地形を変形する場合
13 . 9
問題点
13 . 10
SAMPLE
13 . 11
対応策
頂点の数を揃える
function geo2square(coordinates, width, height) {
var centroid = d3.polygonCentroid(coordinates)
width = (width) ? width : 0 ;
height = (height) ? height : 0 ;
var p = []
var i = 0
var length = coordinates.length
var qtr = ~~(length/4)
var nScale = d3.scaleLinear().domain([0, qtr]).range([0, width
var sScale = d3.scaleLinear().domain([0, qtr]).range([width,
13 . 12
ポイント
頂点数の多いpathに合わせて、調整する
行政区ポリゴンが複数のパスで作られている場
合は、面積を計算して一番大きなポリゴンを変
形させる
13 . 13
折り返さない問題
13 . 14
問題点
SVGには折り返すという機能がないため、レスポ
ンシブに対応するためにはリサイズのたびにすべ
ての座標を再計算して更新する必要がある。
text要素も折り返しが効かないので、地味に困る。
13 . 15
対応策
tspanで括る
var textArray = ["1行目、あ","2行目", "3行目あああああ"
d3.select("svg").append("text")
.datum(textArray)
.attr("transform", "translate(100, 100)"
.each(leftLinebreak)
function leftLinebreak(array){
d3.select(this).selectAll("tspan"
.data(array)
.enter()
.append("tspan")
.attr("x", "0em")
.attr("y", function(d,i)
<text>
<tspan x="0em" y="0em">1行目、あ</tspan
<tspan x="0em" y="1em">2行目</tspan>
<tspan x="0em" y="2em">3行目あああああ<
<tspan x="0em" y="3em">4行目あ</tspan>
</text>
13 . 16
SAMPLE
13 . 17
foreignObject
SVGの中にHTMLを埋め込める。折り返しも効く。
※ IE11未対応
<svg>
<foreignObject width="200" height="200">
<html>
<div style="width:100px">あああああああああああああああああああああああああああ
</html>
</foreignObject>
</svg>
13 . 18
aout wrap
13 . 19
ポイント
SVG要素のレスポンシブ対応は割と大変
scale()やviewBoxで対応できる場合もある
13 . 20
SVGをPNGに変換する
13 . 21
SNS投稿用素材ダウンロードページ
 
13 . 22
SVGをラスタライズする方法
1. SVG要素をdata URIスキームに変換してimageオ
ブジェクトにする
2. imageオブジェクトをcanvasにdrawImageする
3. canvasから取得したデータをdata URI化する
13 . 23
問題点
ブラウザによって動かない(IE)
SVGに適用されているCSSが反映されない
画像、webフォントが反映されない
13 . 24
対応策
ブラウザ縛り
要素を辿ってスタイルを属性に変換する
素材は全てdata URIスキームに変換してSVGに
埋め込む
13 . 25
SAMPLE
13 . 26
ポイント
なんでもかんでもフロントでやろうとしない
13 . 27
まとめ
データの収集・整形なども含め、データビジュア
ライゼーションを作成するには地味で泥臭い作業
がとても重要です。
14 . 1
資料
Visual Data ~データや映像で体感:日本経済新
聞
D3.js - Data-Driven Documents
bl.ocks.org/shimizu - 今回使ったサンプルコード
14 . 2

More Related Content

What's hot

SAP on Azure Cloud Workshop Material Japanese 20190221
SAP on Azure Cloud Workshop Material Japanese 20190221SAP on Azure Cloud Workshop Material Japanese 20190221
SAP on Azure Cloud Workshop Material Japanese 20190221Hitoshi Ikemoto
 
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―Tomohiro Nakashima
 
Goでこれどうやるの? 入門
Goでこれどうやるの? 入門Goでこれどうやるの? 入門
Goでこれどうやるの? 入門zaru sakuraba
 
Azure API Management 俺的マニュアル
Azure API Management 俺的マニュアルAzure API Management 俺的マニュアル
Azure API Management 俺的マニュアル貴志 上坂
 
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)NTT DATA Technology & Innovation
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話清水 正行
 
足を地に着け落ち着いて考える
足を地に着け落ち着いて考える足を地に着け落ち着いて考える
足を地に着け落ち着いて考えるRyuji Tamagawa
 
あなたの知らないPostgreSQL監視の世界
あなたの知らないPostgreSQL監視の世界あなたの知らないPostgreSQL監視の世界
あなたの知らないPostgreSQL監視の世界Yoshinori Nakanishi
 
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話Kentaro Yoshida
 
DBスキーマもバージョン管理したい!
DBスキーマもバージョン管理したい!DBスキーマもバージョン管理したい!
DBスキーマもバージョン管理したい!kwatch
 
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Keisuke Takahashi
 
インフラエンジニアのためのRancherを使ったDocker運用入門
インフラエンジニアのためのRancherを使ったDocker運用入門インフラエンジニアのためのRancherを使ったDocker運用入門
インフラエンジニアのためのRancherを使ったDocker運用入門Masahito Zembutsu
 
やってはいけない空振りDelete
やってはいけない空振りDeleteやってはいけない空振りDelete
やってはいけない空振りDeleteYu Yamada
 
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~Recruit Lifestyle Co., Ltd.
 
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜KLab Inc. / Tech
 

What's hot (20)

SAP on Azure Cloud Workshop Material Japanese 20190221
SAP on Azure Cloud Workshop Material Japanese 20190221SAP on Azure Cloud Workshop Material Japanese 20190221
SAP on Azure Cloud Workshop Material Japanese 20190221
 
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―
広く知ってほしいDNSのこと ―とあるセキュリティ屋から見たDNS受難の10年間―
 
Goでこれどうやるの? 入門
Goでこれどうやるの? 入門Goでこれどうやるの? 入門
Goでこれどうやるの? 入門
 
WiredTigerを詳しく説明
WiredTigerを詳しく説明WiredTigerを詳しく説明
WiredTigerを詳しく説明
 
Azure API Management 俺的マニュアル
Azure API Management 俺的マニュアルAzure API Management 俺的マニュアル
Azure API Management 俺的マニュアル
 
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
 
足を地に着け落ち着いて考える
足を地に着け落ち着いて考える足を地に着け落ち着いて考える
足を地に着け落ち着いて考える
 
あなたの知らないPostgreSQL監視の世界
あなたの知らないPostgreSQL監視の世界あなたの知らないPostgreSQL監視の世界
あなたの知らないPostgreSQL監視の世界
 
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
 
JS7 JobScheduler プレビュー
JS7 JobScheduler プレビューJS7 JobScheduler プレビュー
JS7 JobScheduler プレビュー
 
PostgreSQL安定運用のコツ2009 @hbstudy#5
PostgreSQL安定運用のコツ2009 @hbstudy#5PostgreSQL安定運用のコツ2009 @hbstudy#5
PostgreSQL安定運用のコツ2009 @hbstudy#5
 
DBスキーマもバージョン管理したい!
DBスキーマもバージョン管理したい!DBスキーマもバージョン管理したい!
DBスキーマもバージョン管理したい!
 
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
 
インフラエンジニアのためのRancherを使ったDocker運用入門
インフラエンジニアのためのRancherを使ったDocker運用入門インフラエンジニアのためのRancherを使ったDocker運用入門
インフラエンジニアのためのRancherを使ったDocker運用入門
 
MongoDBの監視
MongoDBの監視MongoDBの監視
MongoDBの監視
 
やってはいけない空振りDelete
やってはいけない空振りDeleteやってはいけない空振りDelete
やってはいけない空振りDelete
 
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~
自動化を支えるCI/CDツールの私の選択 ~何をするためにCI/CDツールを選ぶか~
 
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
 
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
 

Viewers also liked

データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか清水 正行
 
衛星芸術Pbl 2011 10_11
衛星芸術Pbl 2011 10_11衛星芸術Pbl 2011 10_11
衛星芸術Pbl 2011 10_11Koichiro Mori
 
D3.jsとthree.jsによるgeoプログラミング
D3.jsとthree.jsによるgeoプログラミングD3.jsとthree.jsによるgeoプログラミング
D3.jsとthree.jsによるgeoプログラミングKoichiro Mori
 
D3.jsによるDOM操作
D3.jsによるDOM操作D3.jsによるDOM操作
D3.jsによるDOM操作清水 正行
 
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成Hiroshi Yamaguchi
 
Cvim saisentan-5-2-tomoaki
Cvim saisentan-5-2-tomoakiCvim saisentan-5-2-tomoaki
Cvim saisentan-5-2-tomoakitomoaki0705
 
Cesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化についてCesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化についてRyousuke Wayama
 

Viewers also liked (7)

データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
 
衛星芸術Pbl 2011 10_11
衛星芸術Pbl 2011 10_11衛星芸術Pbl 2011 10_11
衛星芸術Pbl 2011 10_11
 
D3.jsとthree.jsによるgeoプログラミング
D3.jsとthree.jsによるgeoプログラミングD3.jsとthree.jsによるgeoプログラミング
D3.jsとthree.jsによるgeoプログラミング
 
D3.jsによるDOM操作
D3.jsによるDOM操作D3.jsによるDOM操作
D3.jsによるDOM操作
 
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
 
Cvim saisentan-5-2-tomoaki
Cvim saisentan-5-2-tomoakiCvim saisentan-5-2-tomoaki
Cvim saisentan-5-2-tomoaki
 
Cesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化についてCesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化について
 

Similar to データビジュアライゼーションの作り方

Data Visualization meetup 2017
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017清水 正行
 
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」aitc_jp
 
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~Sotaro Kimura
 
分散グラフデータベース DataStax Enterprise Graph
分散グラフデータベース DataStax Enterprise Graph分散グラフデータベース DataStax Enterprise Graph
分散グラフデータベース DataStax Enterprise GraphYuki Morishita
 
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...Insight Technology, Inc.
 
Slide digital fabrication_08_180601
Slide digital fabrication_08_180601Slide digital fabrication_08_180601
Slide digital fabrication_08_180601hiroshimadesignlab
 
Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02Daichi Teruya
 
DataStax Enterpriseによる大規模グラフ解析
DataStax Enterpriseによる大規模グラフ解析DataStax Enterpriseによる大規模グラフ解析
DataStax Enterpriseによる大規模グラフ解析Yuki Morishita
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションKohei Kadowaki
 
R入門とgoogle map +α
R入門とgoogle map +αR入門とgoogle map +α
R入門とgoogle map +αkobexr
 
D3.js で LOD を Visualization
D3.js で LOD を VisualizationD3.js で LOD を Visualization
D3.js で LOD を Visualizationdsuke Takaoka
 
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用de:code 2017
 
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)Snowflake Architecture and Performance(db tech showcase Tokyo 2018)
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)Mineaki Motohashi
 
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)NTT DATA OSS Professional Services
 
NoOpsへ舵を切れ
NoOpsへ舵を切れNoOpsへ舵を切れ
NoOpsへ舵を切れHiromasa Oka
 
増加するコアを使い切れ!!
増加するコアを使い切れ!!増加するコアを使い切れ!!
増加するコアを使い切れ!!guestc06e54
 
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)日本マイクロソフト株式会社
 
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とEmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とToru Takahashi
 
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とEmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とToru Takahashi
 

Similar to データビジュアライゼーションの作り方 (20)

Data Visualization meetup 2017
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017
 
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
 
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~
Hadoop基盤上のETL構築実践例 ~多様なデータをどう扱う?~
 
分散グラフデータベース DataStax Enterprise Graph
分散グラフデータベース DataStax Enterprise Graph分散グラフデータベース DataStax Enterprise Graph
分散グラフデータベース DataStax Enterprise Graph
 
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...
A12 既存のデータベース環境で分析業務を加速させるには? DB2が実現するソフトウエア分析ソリューション(DB2 BLU Acceleration)の仕...
 
Gtug girls-20140828
Gtug girls-20140828Gtug girls-20140828
Gtug girls-20140828
 
Slide digital fabrication_08_180601
Slide digital fabrication_08_180601Slide digital fabrication_08_180601
Slide digital fabrication_08_180601
 
Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02
 
DataStax Enterpriseによる大規模グラフ解析
DataStax Enterpriseによる大規模グラフ解析DataStax Enterpriseによる大規模グラフ解析
DataStax Enterpriseによる大規模グラフ解析
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
R入門とgoogle map +α
R入門とgoogle map +αR入門とgoogle map +α
R入門とgoogle map +α
 
D3.js で LOD を Visualization
D3.js で LOD を VisualizationD3.js で LOD を Visualization
D3.js で LOD を Visualization
 
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用
[AI08] 深層学習フレームワーク Chainer × Microsoft で広がる応用
 
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)Snowflake Architecture and Performance(db tech showcase Tokyo 2018)
Snowflake Architecture and Performance(db tech showcase Tokyo 2018)
 
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)
Hadoop上の多種多様な処理でPigの活きる道 (Hadoop Conferecne Japan 2013 Winter)
 
NoOpsへ舵を切れ
NoOpsへ舵を切れNoOpsへ舵を切れ
NoOpsへ舵を切れ
 
増加するコアを使い切れ!!
増加するコアを使い切れ!!増加するコアを使い切れ!!
増加するコアを使い切れ!!
 
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)
【de:code 2020】 Azure Synapse Analytics 技術編 ~ 最新の統合分析プラットフォームによる新しい価値の創出(後編)
 
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とEmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
 
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤とEmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
 

データビジュアライゼーションの作り方