Submit Search
Upload
ちゃんと学ぶ D3.js
•
22 likes
•
3,670 views
Takeshi Osoekawa
Follow
可視化ライブラリとして人気の D3.js を学ぶときの手掛かりになるオンラインリソースを集めました。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 19
Download now
Download to read offline
Recommended
Rustのテストやエコシステム
Rustのテストやエコシステム
KiyotomoHiroyasu
Rosのリアルタイムツールの紹介
Rosのリアルタイムツールの紹介
gakky1667
Rustで3D graphics programming
Rustで3D graphics programming
KiyotomoHiroyasu
Feature StoreをRustで実装した話
Feature StoreをRustで実装した話
emakryo
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
KiyotomoHiroyasu
Customizing cargo for cross compiling
Customizing cargo for cross compiling
emakryo
Rosとgazeboを使った3d空間での3次元畳み込みニューラルネットによる物体認識
Rosとgazeboを使った3d空間での3次元畳み込みニューラルネットによる物体認識
Hiroaki Kaneda
20190828 sd by kitazaki_t0
20190828 sd by kitazaki_t0
Ayachika Kitazaki
Recommended
Rustのテストやエコシステム
Rustのテストやエコシステム
KiyotomoHiroyasu
Rosのリアルタイムツールの紹介
Rosのリアルタイムツールの紹介
gakky1667
Rustで3D graphics programming
Rustで3D graphics programming
KiyotomoHiroyasu
Feature StoreをRustで実装した話
Feature StoreをRustで実装した話
emakryo
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
KiyotomoHiroyasu
Customizing cargo for cross compiling
Customizing cargo for cross compiling
emakryo
Rosとgazeboを使った3d空間での3次元畳み込みニューラルネットによる物体認識
Rosとgazeboを使った3d空間での3次元畳み込みニューラルネットによる物体認識
Hiroaki Kaneda
20190828 sd by kitazaki_t0
20190828 sd by kitazaki_t0
Ayachika Kitazaki
D3.jsによるDOM操作
D3.jsによるDOM操作
清水 正行
OITEC19_TFS
OITEC19_TFS
sady_nitro
RubySeminar16_Analyze
RubySeminar16_Analyze
sady_nitro
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
Kohei Ota
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Masaki Ito
Windows で動かす TensorFlow
Windows で動かす TensorFlow
Takeshi Osoekawa
Learning stochastic neural networks with Chainer
Learning stochastic neural networks with Chainer
Seiya Tokui
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
Seiya Tokui
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
Masaki Ito
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
Kohei Ota
みんな大好き機械学習
みんな大好き機械学習
sady_nitro
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
清水 正行
論文紹介 Pixel Recurrent Neural Networks
論文紹介 Pixel Recurrent Neural Networks
Seiya Tokui
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
D3.js講習会〜1回目〜
D3.js講習会〜1回目〜
Yukihiro Moriyama
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
Masaki Ito
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
Masaki Ito
Spc2016_わが家のルーツアー
Spc2016_わが家のルーツアー
Kaigi Senden
Spc2016_共通点お知らせメール
Spc2016_共通点お知らせメール
Kaigi Senden
Spc2016_献血をしてもらう企画
Spc2016_献血をしてもらう企画
Kaigi Senden
More Related Content
Viewers also liked
D3.jsによるDOM操作
D3.jsによるDOM操作
清水 正行
OITEC19_TFS
OITEC19_TFS
sady_nitro
RubySeminar16_Analyze
RubySeminar16_Analyze
sady_nitro
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
Kohei Ota
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Masaki Ito
Windows で動かす TensorFlow
Windows で動かす TensorFlow
Takeshi Osoekawa
Learning stochastic neural networks with Chainer
Learning stochastic neural networks with Chainer
Seiya Tokui
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
Seiya Tokui
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
Masaki Ito
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
Kohei Ota
みんな大好き機械学習
みんな大好き機械学習
sady_nitro
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
清水 正行
論文紹介 Pixel Recurrent Neural Networks
論文紹介 Pixel Recurrent Neural Networks
Seiya Tokui
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
D3.js講習会〜1回目〜
D3.js講習会〜1回目〜
Yukihiro Moriyama
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
Masaki Ito
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
Masaki Ito
Spc2016_わが家のルーツアー
Spc2016_わが家のルーツアー
Kaigi Senden
Spc2016_共通点お知らせメール
Spc2016_共通点お知らせメール
Kaigi Senden
Spc2016_献血をしてもらう企画
Spc2016_献血をしてもらう企画
Kaigi Senden
Viewers also liked
(20)
D3.jsによるDOM操作
D3.jsによるDOM操作
OITEC19_TFS
OITEC19_TFS
RubySeminar16_Analyze
RubySeminar16_Analyze
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
交通・観光ビッグデータがもたらす変革 ナビタイムジャパン CSISシンポジウム2016
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Tronshow2016 公共交通オープンデータサミット「IT×公共交通の可能性IT×公共交通の可能性」
Windows で動かす TensorFlow
Windows で動かす TensorFlow
Learning stochastic neural networks with Chainer
Learning stochastic neural networks with Chainer
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
ITがもたらす公共交通の可能性とオープンデータの役割(能美市公共交通アイディアソン向け)
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
工学院大学 オープンカレッジ 鉄道講座 「乗換検索サービスとビッグデータがもたらす公共交通の変革」
みんな大好き機械学習
みんな大好き機械学習
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
論文紹介 Pixel Recurrent Neural Networks
論文紹介 Pixel Recurrent Neural Networks
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
D3.js講習会〜1回目〜
D3.js講習会〜1回目〜
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
東京都市大 大学院特別講義 「ITによって進化する公共交通の最前線」 後編:データ編
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
地図調製技術協会シンポジウム資料 公共交通への理解を深め利用を促進するスマートフォンアプリの可能性
Spc2016_わが家のルーツアー
Spc2016_わが家のルーツアー
Spc2016_共通点お知らせメール
Spc2016_共通点お知らせメール
Spc2016_献血をしてもらう企画
Spc2016_献血をしてもらう企画
ちゃんと学ぶ D3.js
1.
ちゃんと学ぶD3.js by Takeshi
'osoken' OSOEKAWA
2.
自己紹介 Takeshi OSOEKAWA
某ITベンダーでデータ分析の仕事 Data Visualization Japan 運営 Hackathon によくでてる
3.
D3.js とは によって書かれた
JavaScript ライブラリ The New York Times Protovis に勤めている Mike Bostock の作者でもある GitHub 上でコードを公開(ライセンスは修正BSD) データの可視化をメインターゲットにして開発された
4.
基本的なチャート A B
C D E F G H I J K L M N O P Q R S T U V W X Y Z 12% 11% 10% 9% 8% 7% 6% 5% 4% 3% 2% 1% 0% Frequency Bar Chart by Mike Bostock
5.
アニメーション AAPL AMZN
IBM MSFT D3 Show Reel by Mike Bostock
6.
レイアウター Force-Directed Graph
by Mike Bostock
7.
インタラクション 東京 有楽町
新橋 浜松町 田町 品川 大崎 目黒五反田 恵比寿 渋谷 池袋 目白 高田馬場 新大久保 代々木 原宿 新宿 大塚 巣鴨 駒込 田端西日暮里 日暮里 鶯谷 上野 御徒町 秋葉原 神田 Yamanote direction signs by Takeshi Osoekawa
8.
地図 Interrupted Goode
Homolosine by Mike Bostock
9.
おすすめオンラインリソース bl.ocks.org/mbostock 公式のギャラリー
GUMMA GIS GEEK D3 Tips and Tricks
10.
bl.ocks.org/mbostock http://bl.ocks.org/mbostock 作者の作品集。短めのソースコードのサンプルが豊富
11.
公式のギャラリー https://github.com/mbostock/d3/wiki/Gallery ページ下部の
Basic Charts が学習向け
12.
GUMMA GIS GEEK
http://shimz.me/blog/category/d3-js 地図系の可視化に D3.js を使ったものが参考になる。地図データ の加工などの記事もある
13.
D3 Tips and
Tricks https://leanpub.com/D3-Tips-and-Tricks/read Malcolm Maclean が勉強しながら書いた(?)記事が元になってい る
14.
D3.js 以外で必要な知識 SVG
JavaScript の Array のメソッド その他
15.
SVG svg 要素の基本的な使い方まとめ
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm MDN の SVG リファレンス https://developer.mozilla.org/ja/docs/Web/SVG W3C 勧告 http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
16.
JavaScript の Array
のメソッド forEach, map, filter, sort をデータの整形によく使う オライリー社のJavaScript リファレンス 第6版
17.
その他 HTMLタグは基本 CSS
のセレクタでセレクション セレクションしたものに対して操作する
18.
さらなるトピック D3 Cheat
Sheet http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf 公式のAPIリファレンス https://github.com/mbostock/d3/wiki/API-Reference D3js.jp (facebook グループ) https://www.facebook.com/groups/d3js.jp/ bl.ocks.org http://bl.ocks.org/osoken
19.
まとめ 豊富なサンプルをひたすら読むのがよさそう 「ちょっと変える」は意外と大変
日本語のドキュメントも着々と増えている 詰まるのは D3.js じゃない部分かも
Download now