JavaScriptのデータビジュアライゼーションライブラリ『D3.js』

Webページで動的にデータを可視化する方法を調べてみたら、今時はJavaScriptのライブラリがたくさんあるのね。↓
https://www.publickey1.jp/blog/15/javascript52javascript_graphs.html

細々と色々あるけど、自分の学習コストを考えると、できるだけ応用範囲の広いライブラリを勉強しておきたいので、有名なものをピックアップすることにした。そこで見つけたのがD3.jsというライブラリ。D3とはData Driven Documentの頭文字らしい。

D3.js

D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、強力な視覚化コンポーネントとデータドリブン (データ駆動型)DOM 操作手法の組み合わせにより、特定のフレームワークに縛られることなく、モダンブラウザの性能をフルに 引き出すことができます。

このD3.jsは数年前からあるようだけど、XMLベースの2次元ベクターイメージ形式であるSVG(Scalable Vector Graphics)によってグラフやチャートを描画する、今時な感じのライブラリ。
公式でチュートリアル様々な実装サンプルを配布しているので、お勉強もしやすそう。


スポンサーリンク


ドットインストールにもレッスンがある。


スポンサーリンク

D3.js入門

#01 D3.jsとはなにか? (02:06)
#02 D3.jsを導入してみよう (01:57)
#03 はじめてのD3.js (02:43)
#04 styleを設定してみよう (02:55)
#05 append、removeを使ってみよう (01:25)
#06 dataを使ってみよう (02:39)
#07 update、enter、exitを理解しよう (1) (02:32)
#08 update、enter、exitを理解しよう (2) (02:58)
#09 SVG領域を設定してみよう (01:46)
#10 データを使ってcircleを描画しよう (02:36)
#11 transitionを使ってみよう (02:42)
#12 eachを使ってみよう (02:58)
#13 onでイベントを設定しよう (02:18)
#14 横棒グラフを描画してみよう (02:02)
#15 scaleを使ってみよう (03:00)
#16 axisを使ってみよう (1) (02:48)
#17 axisを使ってみよう (2) (01:30)

すでに各地で勉強会も開かれているようだ。


スポンサーリンク

関連記事

東京オリンピックと案内表示
『Geocities-izer』 どんなWebページも一昔前のダサいデザインに変えてくれるサービス
html5のcanvasの可能性
書籍『伝わる イラスト思考』読了
映画から想像するVR・AR時代のGUIデザイン
WordPressの表示を高速化する
フィクションに登場するUIデザインのまとめサイト
アクセス元IPアドレスから企業名が分かるアクセス解析『User Local スマートフォン解析』
畳み込みニューラルネットワーク (CNN:Convolutional Neural Network)
Profilograph
Webページ制作のためのメモ
ブラウザ上でJavaScript,HTML,CSSを書いて共有するサイト『jsdo.it』
オープンソースのネットワーク可視化ソフトウェアプラットフォーム『Cytoscape』
大河原邦男オリジナルデザイン『iXine(イグザイン)』
ニューラルネットワークの構造を可視化するフレームワーク『TensorSpace.js』
プロダクトデザイン概論
ヘッドマウントディスプレイとビジュアリゼーションの未来
線画を遠近法で描く
HTML5・WebGLベースのグラフィックスエンジン『Goo Engine』
デザインのリファイン再び
WebGL開発に関する情報が充実してきている
日本でMakersは普及するだろうか?
書籍『データビジュアライゼーションのデザインパターン20』読了
JavaScriptとかWebGLとかCanvasとか
Raspberry Pi 2のGPIOピン配置
UnityのuGUIチュートリアル
Perfumeのライブパフォーマンスのビジュアル
バージョン管理の履歴を可視化するツール『Gource』
歯を食いしばって見るべき動画
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語のルビを振ってくれるツール『ずるっこ!』
『メカニックデザイナー 大河原邦男展』に行ってきた
法線マップを用意してCanvas上でShadingするサンプル
マンガで分かる JavaScriptプログラミング講座
ドラマ『ファーストクラス』のモーショングラフィックス
現在公開されているWeb API一覧
機械学習について理解するための可視化ツール『MLDemos』
ブログがダウンしてました
変形ロボットのデザイン
触れば分かる ユニバーサルデザインな腕時計『The Bradley』
Raspberry PiでIoTごっこ
Webスクレイピングの勉強会に行ってきた
Webサイトのワイヤーフレームが作成できるオンラインツール

コメント