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

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)

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


関連記事

viser:Pythonで使える3D可視化ライブラリ

ブログをwpXレンタルサーバーからwpX Speedへ移行

歯を食いしばって見るべき動画

LLM Visualization:大規模言語モデルの可視化

TorchStudio:PyTorchのための統合開発環境とエコシステム

Webスクレイピングの勉強会に行ってきた

日本でMakersは普及するだろうか?

触れば分かる ユニバーサルデザインな腕時計『The Bradley』

現在公開されているWeb API一覧

生物の骨格

マンガで分かる JavaScriptプログラミング講座

映画から想像するVR・AR時代のGUIデザイン

WebGL開発に関する情報が充実してきている

変形ロボットのデザイン

天体写真の3D動画

html5のcanvasの可能性

『Geocities-izer』 どんなWebページも一昔前のダサいデザインに変えてくれるサービス

ブログがダウンしてました

ヒトデの骨格のような構造物を作成するシステム『KINEMATICS』

TensorSpace.js:ニューラルネットワークの構造を可視化するフレームワーク

畳み込みニューラルネットワーク (CNN: Convolutional Neural Network...

HTML5・WebGLベースのグラフィックスエンジン『Goo Engine』

胡散臭いデザインの参考サイト

『メカニックデザイナー 大河原邦男展』に行ってきた

東京オリンピックと案内表示

Manim:Pythonで使える数学アニメーションライブラリ

Raspberry PiでIoTごっこ

Immersive Math:線形代数をインタラクティブに学べるWebサイト

WordPressの表示を高速化する

JavaScriptとかWebGLとかCanvasとか

UnityのuGUIチュートリアル

Webサイトのワイヤーフレームが作成できるオンラインツール

Rerun:マルチモーダルデータの可視化アプリとSDK

Google XML Sitemap Generatorプラグインを3.4.1へダウングレード

ブログのデザイン変えました

『日本の巨大ロボット群像』を見てきた

書籍『データビジュアライゼーションのデザインパターン20』読了

Perfumeのライブパフォーマンスのビジュアル

このブログのデザインに飽きてきた

ZBrushで人型クリーチャー

GeoGebra:無料で使える数学アプリ

デザインのリファイン再び

コメント