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)
すでに各地で勉強会も開かれているようだ。
関連記事
UnityのuGUIチュートリアル
現在公開されているWeb API一覧
大河原邦男オリジナルデザイン『iXine(イグザイン)』
Perfumeのライブパフォーマンスのビジュアル
ManimML：機械学習の概念を視覚的に説明するためのライブ...
Netron：機械学習モデルを可視化するツール
Manim：Pythonで使える数学アニメーションライブラリ
Polyscope：3Dデータ操作用GUIライブラリ
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...
『日本の巨大ロボット群像』を見てきた
プロダクトデザイン概論
Webページ制作のためのメモ
フィクションに登場するUIデザインのまとめサイト
Math Inspector：科学計算向けビジュアルプログラ...
法線マップを用意してCanvas上でShadingするサンプ...
Transformer Explainer：テキスト生成モデ...
Swark：コードからアーキテクチャ図を作成できるVSCod...
TorchStudio：PyTorchのための統合開発環境と...
書籍『データビジュアライゼーションのデザインパターン20』読...
3DCG Meetup #4に行ってきた
触れば分かる ユニバーサルデザインな腕時計『The Brad...
ブログのデザイン変えました
ブログをwpXレンタルサーバーからwpX Speedへ移行
映画から想像するVR・AR時代のGUIデザイン
TensorSpace.js：ニューラルネットワークの構造を...
ヘッドマウントディスプレイとビジュアリゼーションの未来
線画を遠近法で描く
Profilograph
JavaScriptとかWebGLとかCanvasとか
『メカニックデザイナー 大河原邦男展』に行ってきた
ドラマ『ファーストクラス』のモーショングラフィックス
GitHub Pagesで静的サイトを作る
ブログがダウンしてました
アクセス元IPアドレスから企業名が分かるアクセス解析『Use...
viser：Pythonで使える3D可視化ライブラリ
日本でMakersは普及するだろうか？
MLDemos：機械学習について理解するための可視化ツール
Rerun：マルチモーダルデータの可視化アプリとSDK
WordPressのテーマを自作する
Webスクレイピングの勉強会に行ってきた
Gource：バージョン管理の履歴を可視化するツール
コメント