D3 詳説

 (d3indepth.com)
4 ポイント 投稿者 GN⁺ 2024-05-18 | 1件のコメント | WhatsAppで共有

D3 in Depth

D3 in Depth は D3 バージョン 6 と 7 を扱う

  • ホームページ: D3 in Depth は D3.js の最新バージョンである 6 と 7 を扱うサイト。
  • 紹介: このサイトは D3.js を使ったデータ可視化について、深く踏み込んだ内容を提供する。
  • ニュースレター: ニュースレターを通じて、書籍の割引情報や D3.js 関連のニュース、Tips を受け取れる。

書籍と講座

  • Visualising Data with JavaScript: Chart.js、Leaflet、D3、React を使って、チャート、ダッシュボード、データストーリーを作る方法を教える。
    • 「私が読んだ D3 本の中でも最高の一冊。内容がとても明快で、追いやすく、概念もしっかりしている。」 - Javier García Fernández
  • カスタムデータ可視化: D3.js を使ってカスタムデータ可視化を作る方法を学べる。
  • 基礎学習: Web 上でデータ可視化を構築するための HTML、SVG、CSS、JavaScript の基本を学べる。

目次

  • D3 の紹介
  • はじめに
  • 選択（Selections）
  • データ結合（Data joins）
  • Enter、exit & update
  • スケール関数（Scale functions）
  • 図形（Shapes）
  • 軸（Axes）
  • 階層（Hierarchies）
  • コードダイアグラム（Chord Diagrams）
  • フォースレイアウト（Force layout）
  • 地図（Maps）
  • データリクエスト（Data Requests）
  • トランジション（Transitions）
  • 選択、ドラッグ、ブラッシング（Picking, Dragging and Brushing）
  • ズーム & パン（Zoom & pan）

ニュースレター

  • 購読: 書籍の割引情報や D3.js 関連のニュース、Tips を受け取れる。

著作権

  • © Peter Cook 2023

GN⁺の見解

  • D3.js の重要性: D3.js はデータ可視化ライブラリであり、複雑なデータを視覚的に表現するのに非常に有用。特に大規模なデータセットを扱うときに強力なツールとなる。
  • 学習曲線: D3.js は強力だが、学習曲線が急になることがある。このサイトは初心者から上級者まで、誰にとっても有用な資料を提供する。
  • 多様なツールとの統合: Chart.js、Leaflet、React など他のツールとの統合方法も学べるため、さまざまなプロジェクトに応用できる。
  • 実践重視: このサイトは実践重視で構成されており、実際のプロジェクトにすぐ適用できる知識を得られる。
  • 技術選定時の考慮事項: D3.js を選ぶ際には、プロジェクトの複雑さ、チームの技術レベル、保守性などを考慮する必要がある。D3.js は強力だが、シンプルな可視化にはかえって過剰になる場合もある。

関連記事

1件のコメント

 
GN⁺ 2024-05-18
Hacker Newsの意見

Hacker Newsコメントまとめ要約

  • Observable PlotとObservable Frameworkの紹介

    • D3を使ったデータ可視化に関心があるなら、より高いレベルの利便性を提供するObservable Plotを確認する価値がある。
    • Observable Frameworkは静的サイトジェネレーターで、Plot、D3、およびさまざまなライブラリをサポートし、可視化ダッシュボードを構築できる。
    • Observable Plot
    • Observable Framework

  • D3利用の難しさ

    • D3を使った経験は多いが、数年ぶりに再び使うとドキュメントがわかりにくく、最初からやり直すような感覚になる。
    • 数学の問題を解くよりも、D3のドキュメントを理解するほうが難しい。

  • D3を学ぶ価値

    • D3を専門的に使わないとしても、学ぶ価値はある。
    • データの投影と実データの違いを理解し、それをスケーリングする方法を学べる。
    • Webでなくても、ほかの環境でデータ可視化を行う際に役立つ。

  • D3.jsの発展と現代的な代替

    • D3.jsを使って多くのプロジェクトを進めてきたが、今では古く感じられる。
    • Vue 3やTypeScriptのような現代的なフレームワークに移行したが、D3.jsがもたらした良い実践には感謝している。

  • VisXのような代替手段

    • D3を学んだあとで、VisXのような構造化されたツールに移行するのがよい。
    • D3とjQueryはスパゲッティコードになりやすい。

  • Grammar of Graphicsとggplot2

    • D3はWilkinsonのGrammar of Graphicsから着想を得ている。
    • R言語のggplot2も同じ着想に基づき、より簡潔で機能的なインターフェースを提供する。

  • 力学モデルグラフの問題

    • D3のサンプルにある力学モデルグラフは好きだが、ノードとエッジが増えるとレイアウトが良くなくなる。
    • 3D可視化が必要になるかもしれない。

  • 役立つD3リソース

    • D3を理解する助けになった唯一のリソースがあった。
    • 著者のレスポンスが良く、助けになった。

  • Vegaの紹介

    • D3の上に構築されたVegaについて良い話を聞いている。
    • OpenSearch Dashboardsの依存関係の一つで、ユーザーがログや観測データ向けのカスタムダッシュボードを作成できるようにする。
    • Vega ドキュメント
    • OpenSearch DashboardsでVegaを使う

  • D3文法の複雑さ

    • D3で作られた可視化は良いが、文法があまりにも複雑で古い。
    • より宣言的な方式へ移行していてよかった。