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)
すでに各地で勉強会も開かれているようだ。
関連記事
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
Iridescence：プロトタイピング向け軽量3D可視化ラ...
Webサイトのワイヤーフレームが作成できるオンラインツール
マンガで分かる JavaScriptプログラミング講座
Gource：バージョン管理の履歴を可視化するツール
『メカニックデザイナー 大河原邦男展』に行ってきた
HTML5・WebGLベースのグラフィックスエンジン『Goo...
Google XML Sitemap Generatorプラ...
WebGL開発に関する情報が充実してきている
ブラウザ上でJavaScript,HTML,CSSを書いて共...
Perfumeのライブパフォーマンスのビジュアル
フィクションに登場するUIデザインのまとめサイト
LLM Visualization：大規模言語モデルの可視化
MLDemos：機械学習について理解するための可視化ツール
ブログをwpXレンタルサーバーからwpX Speedへ移行
『日本の巨大ロボット群像』を見てきた
Immersive Math：線形代数をインタラクティブに学...
プロダクトデザイン概論
触れば分かる ユニバーサルデザインな腕時計『The Brad...
フルCGのウルトラマン！？
線画を遠近法で描く
Transformer Explainer：テキスト生成モデ...
Netron：機械学習モデルを可視化するツール
東京オリンピックと案内表示
ZBrushで人型クリーチャー
TorchStudio：PyTorchのための統合開発環境と...
『Geocities-izer』 どんなWebページも一昔前...
法線マップを用意してCanvas上でShadingするサンプ...
書籍『データビジュアライゼーションのデザインパターン20』読...
Swark：コードからアーキテクチャ図を作成できるVSCod...
歯を食いしばって見るべき動画
ドラマ『ファーストクラス』のモーショングラフィックス
このブログのデザインに飽きてきた
現在公開されているWeb API一覧
Raspberry PiでIoTごっこ
アクセス元IPアドレスから企業名が分かるアクセス解析『Use...
書籍『伝わる イラスト思考』読了
UnityのuGUIチュートリアル
Polyscope：3Dデータ操作用GUIライブラリ
ManimML：機械学習の概念を視覚的に説明するためのライブ...
html5のcanvasの可能性
胡散臭いデザインの参考サイト
コメント