D3.jsを使った情報可視化をしてみた

•

0 likes•770 views

K

D3.jsによる情報可視化

D3.jsを使った 
情報可視化をしてみた
2016/07/07
社内勉強会@スタジオアルカナ
スタジオアルカナ
遠藤勝也
1

あらすじ
• D3.js 
https://d3js.org
• どんなデータを可視化するかは決めていない
• かっこいい可視化がしたい
2

デモ
3

流れ
1. Ruby Twitter Gem で，キーワードを指定して 
ツイートを取得
2. RubyのNatto Gem(Mecab)を使って 
名詞と日本語のみを抽出
3. 各名詞の出現回数をカウント
4. JSONで出力
5. D3.jsで可視化
5

感想
• D3.jsはある程度の慣れが必要 
(SVGの扱い，用意するデータ)
• このページがわかりやすい 
http://ja.d3js.info/alignedleft/tutorials/d3/
• それなりにかっこいい可視化ができたと思う
6

ありがとうございました
7

Recommended

D3.jsを使った情報可視化KatsuyaENDOH

Dbda勉強会～概要説明ochi20130803

Dbda勉強会～概要説明ochi20130803

Dbda勉強会～概要説明ochi20130803Masanao Ochi

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)KatsuyaENDOH

ねぇねぇ、君は何使う？Web Design tool の話。

ねぇねぇ、君は何使う？Web Design tool の話。

ねぇねぇ、君は何使う？Web Design tool の話。Kyoko Ochiai

Webエンジニアのための プロジェクションマッピング

Webエンジニアのための プロジェクションマッピング

Webエンジニアのための プロジェクションマッピングKatsuyaENDOH

Physical Web導入の話

Physical Web導入の話

Physical Web導入の話KatsuyaENDOH

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine

役に立ちそうだけど、やっぱり役に立たなそうな技術QuineKatsuyaENDOH

実践 Redux Saga -Practical Redux Saga-

実践 Redux Saga -Practical Redux Saga-

実践 Redux Saga -Practical Redux Saga-Shinichiro Yoshida

Recommended

D3.jsを使った情報可視化KatsuyaENDOH

Dbda勉強会～概要説明ochi20130803

Dbda勉強会～概要説明ochi20130803

Dbda勉強会～概要説明ochi20130803Masanao Ochi

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)

Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)KatsuyaENDOH

ねぇねぇ、君は何使う？Web Design tool の話。

ねぇねぇ、君は何使う？Web Design tool の話。

ねぇねぇ、君は何使う？Web Design tool の話。Kyoko Ochiai

Webエンジニアのための プロジェクションマッピング

Webエンジニアのための プロジェクションマッピング

Webエンジニアのための プロジェクションマッピングKatsuyaENDOH

Physical Web導入の話

Physical Web導入の話

Physical Web導入の話KatsuyaENDOH

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine

役に立ちそうだけど、やっぱり役に立たなそうな技術QuineKatsuyaENDOH

実践 Redux Saga -Practical Redux Saga-

実践 Redux Saga -Practical Redux Saga-

実践 Redux Saga -Practical Redux Saga-Shinichiro Yoshida

CSSの光と闇Shuma Mizuno

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピングKatsuyaENDOH

運用の現場についてnob f

アルカナに入社しました。Yukihiro Katsumi

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使ったKatsuyaENDOH

まよいの墓(WebVR編)KatsuyaENDOH

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使うKatsuyaENDOH

非技術者出身のディレクター概要

非技術者出身のディレクター概要

非技術者出身のディレクター概要Kenzo Uekusa

ぱわぽYukihiro Katsumi

第7回アルカナ勉強会Kenya Kodaira

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)KatsuyaENDOH

THETA S でライブストリーミング

THETA S でライブストリーミング

THETA S でライブストリーミングKatsuyaENDOH

Reactを使ったVR環境KatsuyaENDOH

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjpHikari Fukasawa

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_studyShinichiro Yoshida

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_studyShinichiro Yoshida

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマットKenya Kodaira

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)KatsuyaENDOH

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話Shinichiro Yoshida

キミスカAIの内部実装について

キミスカAIの内部実装について

キミスカAIの内部実装についてKatsuyaENDOH

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話KatsuyaENDOH

シェーダーのお話KatsuyaENDOH

More Related Content

Viewers also liked

CSSの光と闇Shuma Mizuno

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピングKatsuyaENDOH

運用の現場についてnob f

アルカナに入社しました。Yukihiro Katsumi

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使ったKatsuyaENDOH

まよいの墓(WebVR編)KatsuyaENDOH

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使うKatsuyaENDOH

非技術者出身のディレクター概要

非技術者出身のディレクター概要

非技術者出身のディレクター概要Kenzo Uekusa

ぱわぽYukihiro Katsumi

第7回アルカナ勉強会Kenya Kodaira

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)KatsuyaENDOH

THETA S でライブストリーミング

THETA S でライブストリーミング

THETA S でライブストリーミングKatsuyaENDOH

Reactを使ったVR環境KatsuyaENDOH

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjpHikari Fukasawa

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_studyShinichiro Yoshida

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_studyShinichiro Yoshida

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマットKenya Kodaira

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)KatsuyaENDOH

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話Shinichiro Yoshida

Viewers also liked (19)

CSSの光と闇

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピング

久しぶりにWebエンジニアのためのプロジェクションマッピング

運用の現場について

アルカナに入社しました。

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使った

JavascriptでFacetrackerを使った

まよいの墓(WebVR編)

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使う

JavascriptでFaceTrackerを使う

非技術者出身のディレクター概要

非技術者出身のディレクター概要

非技術者出身のディレクター概要

ぱわぽ

第7回アルカナ勉強会

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング(途中経過)

THETA S でライブストリーミング

THETA S でライブストリーミング

THETA S でライブストリーミング

Reactを使ったVR環境

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjp

まよいの墓 - HackDay2017 #hackdayjp

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（DNS編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_study

インターネッツの繋がるしくみ（物理層編） #sa_study

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマット

2016年版フロントエンド開発フォーマット

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)

THETA S による身代わりテレビの実装(完結編)

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話

More from KatsuyaENDOH

キミスカAIの内部実装について

キミスカAIの内部実装について

キミスカAIの内部実装についてKatsuyaENDOH

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話KatsuyaENDOH

シェーダーのお話KatsuyaENDOH

自動テストを導入した際の気づき

自動テストを導入した際の気づき

自動テストを導入した際の気づきKatsuyaENDOH

第47回スタジオ・アルカナ社内勉強会

第47回スタジオ・アルカナ社内勉強会

第47回スタジオ・アルカナ社内勉強会KatsuyaENDOH

NICOGRAPH 2018 報告

NICOGRAPH 2018 報告

NICOGRAPH 2018 報告KatsuyaENDOH

人工生命の話KatsuyaENDOH

メディアとアートKatsuyaENDOH

Oculus Go アプリ開発ハンズオン

Oculus Go アプリ開発ハンズオン

Oculus Go アプリ開発ハンズオンKatsuyaENDOH

Oculus Go アプリケーション開発

Oculus Go アプリケーション開発

Oculus Go アプリケーション開発KatsuyaENDOH

GoogleHomeからの視覚的フィードバックを求めて

GoogleHomeからの視覚的フィードバックを求めて

GoogleHomeからの視覚的フィードバックを求めてKatsuyaENDOH

DeepLab v3触ってみた

DeepLab v3触ってみた

DeepLab v3触ってみたKatsuyaENDOH

無料で始めるVTuberKatsuyaENDOH

Tango Constructorから出力したモデルをちょこっと綺麗にする

Tango Constructorから出力したモデルをちょこっと綺麗にする

Tango Constructorから出力したモデルをちょこっと綺麗にするKatsuyaENDOH

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)KatsuyaENDOH

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.jsKatsuyaENDOH

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい

人間では判定できない101すくみじゃんけんをコンピュータに判定させたいKatsuyaENDOH

A-Frameで作ったギャラリーのお話

A-Frameで作ったギャラリーのお話

A-Frameで作ったギャラリーのお話KatsuyaENDOH

More from KatsuyaENDOH (18)

キミスカAIの内部実装について

キミスカAIの内部実装について

キミスカAIの内部実装について

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話

色彩と色彩語の関係を 可視化した話

シェーダーのお話

自動テストを導入した際の気づき

自動テストを導入した際の気づき

自動テストを導入した際の気づき

第47回スタジオ・アルカナ社内勉強会

第47回スタジオ・アルカナ社内勉強会

第47回スタジオ・アルカナ社内勉強会

NICOGRAPH 2018 報告

NICOGRAPH 2018 報告

NICOGRAPH 2018 報告

人工生命の話

メディアとアート

Oculus Go アプリ開発ハンズオン

Oculus Go アプリ開発ハンズオン

Oculus Go アプリ開発ハンズオン

Oculus Go アプリケーション開発

Oculus Go アプリケーション開発

Oculus Go アプリケーション開発

GoogleHomeからの視覚的フィードバックを求めて

GoogleHomeからの視覚的フィードバックを求めて

GoogleHomeからの視覚的フィードバックを求めて

DeepLab v3触ってみた

DeepLab v3触ってみた

DeepLab v3触ってみた

無料で始めるVTuber

Tango Constructorから出力したモデルをちょこっと綺麗にする

Tango Constructorから出力したモデルをちょこっと綺麗にする

Tango Constructorから出力したモデルをちょこっと綺麗にする

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい

人間では判定できない101すくみじゃんけんをコンピュータに判定させたい

A-Frameで作ったギャラリーのお話

A-Frameで作ったギャラリーのお話

A-Frameで作ったギャラリーのお話

Recently uploaded

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)NTT DATA Technology & Innovation

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルCRI Japan, Inc.

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizesatsushi061452

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...atsushi061452

20240523_IoTLT_vol111_kitazaki_v1___.pdf

20240523_IoTLT_vol111_kitazaki_v1___.pdf

20240523_IoTLT_vol111_kitazaki_v1___.pdfAyachika Kitazaki

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）keikoitakurag

【AI論文解説】Consistency ModelとRectified Flow

【AI論文解説】Consistency ModelとRectified Flow

【AI論文解説】Consistency ModelとRectified FlowSony - Neural Network Libraries

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptx

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptx

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptxssuserbefd24

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。iPride Co., Ltd.

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptxyassun7010

Recently uploaded (10)

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)

YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes

論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...

論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...

20240523_IoTLT_vol111_kitazaki_v1___.pdf

20240523_IoTLT_vol111_kitazaki_v1___.pdf

20240523_IoTLT_vol111_kitazaki_v1___.pdf

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）

Amazon Cognitoで実装するパスキー（Security-JAWS【第33回】勉強会）

【AI論文解説】Consistency ModelとRectified Flow

【AI論文解説】Consistency ModelとRectified Flow

【AI論文解説】Consistency ModelとRectified Flow

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptx

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptx

2024年5月25日Serverless Meetup大阪　アプリケーションをどこで動かすべきなのか.pptx

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。

MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx

D3.jsを使った情報可視化をしてみた

1. D3.jsを使った  情報可視化をしてみた 2016/07/07 社内勉強会@スタジオアルカナスタジオアルカナ遠藤勝也 1

2. あらすじ • D3.js  https://d3js.org • どんなデータを可視化するかは決めていない • かっこいい可視化がしたい 2

5. 流れ 1. Ruby Twitter Gem で，キーワードを指定して  ツイートを取得 2. RubyのNatto Gem(Mecab)を使って  名詞と日本語のみを抽出 3. 各名詞の出現回数をカウント 4. JSONで出力 5. D3.jsで可視化 5

6. 感想 • D3.jsはある程度の慣れが必要  (SVGの扱い，用意するデータ) • このページがわかりやすい  http://ja.d3js.info/alignedleft/tutorials/d3/ • それなりにかっこいい可視化ができたと思う 6

7. ありがとうございました 7