SVG と D3.js でちょっとリッチなデータ可視化

•

6 likes•4,169 views

HTML,CSSに並ぶかもしれない要素、SVG（Scalable Vector Graphics）を紹介。SVGはInternetExplorer9で正式対応され、スマートフォン対応サイトなど、多種多様な画面サイズに対応しなければならない現代において活躍が期待される画像フォーマットです。このスライドでは、Code for KOSEN加盟高専一覧データや、センサデータをD3.jsを利用して可視化してみます

By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on web
http://mangaonweb.com

https://github.com/mbostock/d3/wiki/Gallery
https://github.com/mbostock/d3/wiki

http://c4k-branchmap.herokuapp.com/
http://snowboarder-gyro-graph.herokuapp.com/

… D3.js用に拡張されたGeoJSON
http://www.naturalearthdata.com/
Shape → GeoJSON → TopoJSON

By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on web
http://mangaonweb.com

Recommended

Crucible @ M3, Inc.

Crucible @ M3, Inc.

Crucible @ M3, Inc.

名前付け入門

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

2014/4/6に明石高専/松江オープンソースラボで開催された「Code for KOSEN勉強会#1」にて発表しました「外国人旅行者向けラーメン店検索アプリを作る話」の発表スライドです． ※諸事情に付き一部ページを削っております．本スライドで利用しているスライドにある佐藤秀峰作「ブラックジャックによろしく」の改変画像については，すべて漫画 on Web(http://mangaonweb.com)より引用しております．

D3.jsを使ったデータビジュアライズ勉強会

D3.jsを使ったデータビジュアライズ勉強会

D3.jsを使ったデータビジュアライズ勉強会

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」Fumihito Yokoyama

ワークショップ「D3.js」入門

ワークショップ「D3.js」入門

ワークショップ「D3.js」入門

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

d3jsではじめるデータビジュアライゼーション入門

d3jsではじめるデータビジュアライゼーション入門

d3jsではじめるデータビジュアライゼーション入門

Recommended

Crucible @ M3, Inc.

Crucible @ M3, Inc.

Crucible @ M3, Inc.

名前付け入門

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

外国人旅行者向けラーメン店検索アプリを作る話@Code for KOSEN勉強会#1

2014/4/6に明石高専/松江オープンソースラボで開催された「Code for KOSEN勉強会#1」にて発表しました「外国人旅行者向けラーメン店検索アプリを作る話」の発表スライドです． ※諸事情に付き一部ページを削っております．本スライドで利用しているスライドにある佐藤秀峰作「ブラックジャックによろしく」の改変画像については，すべて漫画 on Web(http://mangaonweb.com)より引用しております．

D3.jsを使ったデータビジュアライズ勉強会

D3.jsを使ったデータビジュアライズ勉強会

D3.jsを使ったデータビジュアライズ勉強会

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」

Osc2014 聞くだけじゃもったいない！観客と発表者の双方向通信を実現する「投げ銭box」Fumihito Yokoyama

ワークショップ「D3.js」入門

ワークショップ「D3.js」入門

ワークショップ「D3.js」入門

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

d3jsではじめるデータビジュアライゼーション入門

d3jsではじめるデータビジュアライゼーション入門

d3jsではじめるデータビジュアライゼーション入門

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

2015.3.29 CIVIC TECH FORUMで発表した資料です。「オープンソースがもらたした、生駒のムーブメント」オープンソースである5374.jpの横展開から、生駒のムーブメントは広がりました。横展開したところから市との繋がりが生まれ、コミュニティが大きくなっていき、多くの人と繋がりました。CODE for IKOMAは、益々地域に根ざした活動を目指していきます。

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

2015.6.22 アーバンデータチャレンジキックオフイベントで、CODE for IKOMAのこれまでの活動と、2015年度の今後の活動をご紹介しました。 2015年度は、アーバンデータチャレンジ、Mashup Awards、はならぁととのコラボレーションと盛り沢山な内容となっています。DKANで立ちあげた、データポータルサイトも活用していきます。

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜Takahiro Inoue

データ可視化勉強会

Daichi Morifuji

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Keiichiro Seida

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

Yoshinori Kobayashi

2014年9月秋のJavascript祭り　でのプレゼン資料です。 D3.jsを使って、データビジュアライゼーションの説明と使い方を説明しました。 D3.jsは学習コストが高いですが、非常に細かく、高度なビジュアル表現できます。人口統計データを活用して、東京23区の人口情報の動きを作ってみました。 http://www.slideshare.net/YoshinoriKoba/d3js-38787078 個人的には、次の３つポイントだと思います。１．メソッドチェーン　jQuery とよく似ていて、D3.jsでは多用される。２．スケール（縮尺）　実データの分布を、実際の描画位置にマッピングする。３．Dataメソッド　データを保存して、１つずつ取り出しができるようにする今回デモサイトを作成してみて、思い通りうごくまでなかなか時間がかかりました。 D3.ｊｓの独特のお作法があるので、これを理解しないとどのようにコードしたらわらかない。あと、jQueryと同様のことができるので、実際の制作では、セレクタやセットをjQueryで行うのか、D3.jsで混乱する場面があります。極力、D3.jsで行い、できないことをｊQueryで行うのがよいかなという印象です。

特盛！Heroku

OSS についてあれこれ

More Related Content

Viewers also liked

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

2015.3.29 CIVIC TECH FORUMで発表した資料です。「オープンソースがもらたした、生駒のムーブメント」オープンソースである5374.jpの横展開から、生駒のムーブメントは広がりました。横展開したところから市との繋がりが生まれ、コミュニティが大きくなっていき、多くの人と繋がりました。CODE for IKOMAは、益々地域に根ざした活動を目指していきます。

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

2015.6.22 アーバンデータチャレンジキックオフイベントで、CODE for IKOMAのこれまでの活動と、2015年度の今後の活動をご紹介しました。 2015年度は、アーバンデータチャレンジ、Mashup Awards、はならぁととのコラボレーションと盛り沢山な内容となっています。DKANで立ちあげた、データポータルサイトも活用していきます。

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜Takahiro Inoue

データ可視化勉強会

Daichi Morifuji

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Keiichiro Seida

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

Yoshinori Kobayashi

2014年9月秋のJavascript祭り　でのプレゼン資料です。 D3.jsを使って、データビジュアライゼーションの説明と使い方を説明しました。 D3.jsは学習コストが高いですが、非常に細かく、高度なビジュアル表現できます。人口統計データを活用して、東京23区の人口情報の動きを作ってみました。 http://www.slideshare.net/YoshinoriKoba/d3js-38787078 個人的には、次の３つポイントだと思います。１．メソッドチェーン　jQuery とよく似ていて、D3.jsでは多用される。２．スケール（縮尺）　実データの分布を、実際の描画位置にマッピングする。３．Dataメソッド　データを保存して、１つずつ取り出しができるようにする今回デモサイトを作成してみて、思い通りうごくまでなかなか時間がかかりました。 D3.ｊｓの独特のお作法があるので、これを理解しないとどのようにコードしたらわらかない。あと、jQueryと同様のことができるので、実際の制作では、セレクタやセットをjQueryで行うのか、D3.jsで混乱する場面があります。極力、D3.jsで行い、できないことをｊQueryで行うのがよいかなという印象です。

特盛！Heroku

OSS についてあれこれ

Viewers also liked (15)

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150301 iko mama papaアプリ開発提案プロジェクトハッカソン

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

20150329 オープンソースがもらたした、生駒のムーブメント（CIVIC TECH FORUM 2015）

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

実践! D3.jsで可視化入門

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150622 アーバンデータチャレンジ CODE for IKOMAのご紹介

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150221 子育てアプリアイデアワークショップvol.2 〜インターナショナルオープンデータデイ in 生駒〜

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

20150404 CODE for IKOMA × 門前おかげ楼アイデアワークショップ

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

CODE for IKOMAと生駒市の協働プロジェクト

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

20150211 子育てアプリアイデアワークショップ・インターナショナルオープンデータデイ in 生駒ご紹介

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

この Visualization がすごい2014 〜データ世界を彩るツール6選〜

データ可視化勉強会

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

Neo4j の「データ操作プログラミング」から「ビジュアライズ」まで

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

特盛！Heroku

OSS についてあれこれ

SVG と D3.js でちょっとリッチなデータ可視化

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20. By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on web http://mangaonweb.com

21.

22.

23.

24. https://github.com/mbostock/d3/wiki/Gallery https://github.com/mbostock/d3/wiki

25. http://c4k-branchmap.herokuapp.com/ http://snowboarder-gyro-graph.herokuapp.com/

26. … D3.js用に拡張されたGeoJSON http://www.naturalearthdata.com/ Shape → GeoJSON → TopoJSON

27.

28.

29.

30.

31. By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on web http://mangaonweb.com