ChatGPT先生と一緒に学ぶフロントエンド　D3.js編 その1

はじめに

ChatGPTなど大規模言語モデルを活用したサービスの登場により、プログラミング言語などを学ぶ初期コストが大きく下がりました。そこで、まず第一弾としてフロントエンドのデータ可視化を中心とした情報設計に有用なJavaScriptのD3.jsをChatGPT先生と一緒に学びます。

 

使う教材

メルカリで990円で購入した以下の書籍を使用します。

 

データビジュアライゼーションのためのD3.js徹底入門

データビジュアライゼーションのためのD3.js徹底入門

Amazon

書籍は全体の構造として15章に分かれていますが、大きく以下の3部に分割できます。

  • 1~6章　基礎的な知見、操作
  • 6~14章　主要なチャートの作成方法
  • 15章　地図データの可視化

本の中のサンプルコードは以下ページで公開されています。

https://www.sbcr.jp/product/4797368864/

ではさっそく2章（1章はD3.jsとは何かの読み物なので飛ばします）から学び始めます。

 

第2章 D3.jsの基本 D3.jsでグラフを描く

D3.jsでのデータ可視化は以下の6つのフローで構成されます。

  1. データ読み込み
  2. 表示するグラフを指定
  3. SVG図形を用意・生成
  4. 図形の属性値を変更
  5. アニメーション処理
  6. イベント処理

本章では各フローをデータを棒グラフで可視化するサンプルコードで順に追いながら学びます。章末のサンプルコードをChatGPT先生（以下では先生とします）に読ませて、上記6つのフローに対応する部分を説明してもらいました。サンプルコード自体は上記の出版社ホームページに公開されています。

  1. データ読み込み
    d3.csv("mydata.csv", function(error, data){で、D3のcsv関数を使って、"mydata.csv"というファイルからデータを読み込んでいます。読み込みが完了したら、callback関数の中で読み込んだデータを引数として受け取っています。この場合は、受け取ったデータをdataという名前で扱っています。

  2. 表示するグラフを指定
    d3.select("#myGraph")で、HTMLの要素を指定しています。この場合は、idが"myGraph"の要素を選択しています。d3.select()は、指定されたCSSセレクタに一致する最初の要素を選択します。

  3. SVG図形を用意・生成 d3.select("#myGraph").selectAll("rect").data(dataSet).enter().append("rect")で、SVGの四角形要素を生成しています。ここで使われているのは、D3のデータバインディング機能です。まず、selectAll("rect")で、idが"myGraph"の要素以下にある、すべての四角形を選択しています。その後、data()で、dataSetという配列をバインディングします。その後、enter()で、データに対して四角形が不足している場合に、四角形を生成するように指示しています。最後に、append("rect")で、新しい四角形を生成するようにしています。

  4. 図形の属性値を変更
    attr()やstyle()を用いて、四角形のX座標、Y座標、高さ、幅、塗りのスタイルなどを変更しています。たとえば、attr("x", 10)で、四角形のX座標を10に指定しています。また、attr("height", "20px")で、四角形の高さを20pxに指定しています。style("fill", "cyan")では、クリック時に四角形の塗りのスタイルを水色に変更しています。

  5. アニメーション処理

    transition()や、delay()、duration()を用いて、グラフの描画時にアニメーションを行っています。たとえば、transition()で、各四角形の属性値が変化する際にアニメーションを実行しています。また、delay()で、各四角形のアニメーション開始時間をずらしています。duration()で、各四角形のアニメーションの時間を指定しています。

     

  6. イベント処理
    on()を用いて、クリック時に四角形の塗りのスタイルを変更するイベント処理を実装しています。on()は、指定されたイベントが発生したときに、指定された関数を実行するように設定します。たとえば、on("click", function(){})で、クリック時に関数を実行するようにしています。この関数の中で、d3.select(this)で、クリックされた要素を選択しています。そして、style("fill", "cyan")で、選択された要素の塗りのスタイルを水色に変更しています。

なお、章末に「D3.jsのメソッドとその利用の流れをドラマ制作に例える」コラムがあったので、先生にも同様の例示を投げてみました。

>具体的なメソッド名を挙げながら、D3.jsのメソッドとその利用の流れをドラマ制作に例えてください。

 

はい、以下に具体的なメソッド名を挙げながら、D3.jsのメソッドとその利用の流れをドラマ制作に例えて説明します。

  1. プロットの用意 「ドラマの脚本」として、D3.jsにおけるデータを用意します。これは、ストーリーの根幹をなすもので、D3.jsにおけるデータと同じように、ドラマの展開に必要な情報を格納したものと考えることができます。D3.jsでは、例えば、d3.csv()やd3.json()などのメソッドを使って、外部のデータを取得することができます。

  2. シーンの指定 「シーン」を指定して、グラフや図形を生成します。これは、D3.jsにおけるグラフや図形と同じように、ドラマを構成する要素の一つで、ある時間的・空間的な場所で行われる出来事を表します。D3.jsでは、SVG要素やHTML要素を生成するためのメソッドとして、例えばd3.select()やd3.selectAll()などを使うことができます。

  3. キャストの選定 「キャスト」を選定して、グラフの要素や属性の値を設定します。これは、D3.jsにおけるグラフの要素や属性の値を設定するための関数と同じように、ドラマを構成する登場人物や役割を定めるものです。D3.jsでは、例えば、以下のようなメソッドを使って、グラフの要素や属性の値を設定します。

  • attr()やstyle()などのメソッドを使って、グラフの属性値を設定する。
  • text()やhtml()などのメソッドを使って、グラフのテキストを設定する。
  • append()やinsert()などのメソッドを使って、グラフに要素を追加する。
  1. 演出の調整 「演出」を調整して、アニメーションやイベント処理を実装します。これは、D3.jsにおけるアニメーションやイベント処理と同じように、ドラマにおける動きや出来事を調整するためのものです。D3.jsでは、例えば、以下のようなメソッドを使って、演出を調整します。
  • transition()やdelay()、duration()などのメソッドを使って、アニメ

    ーションを実装する。

    • on()などのメソッドを使って、イベント処理を実装する。
    • scale()などのメソッドを使って、スケールや軸を設定する。
    1. プレゼンテーションの実施 最後に、「プレゼンテーション」を実施して、作成したグラフを表示します。これは、D3.jsにおける描画の実行と同じように、作成したグラフを実際に表現するためのものです。D3.jsでは、例えば、以下のようなメソッドを使って、グラフを表示します。
    • append()やinsert()などのメソッドを使って、要素を追加する。
    • call()やselect()などのメソッドを使って、SVG要素やHTML要素を選択する。
    • html()やtext()、attr()などのメソッドを使って、要素の属性値やテキストを設定する。

    以上のように、D3.jsのメソッドとその利用の流れを、ドラマ制作に例えて説明しました。プロットを用意してシーンを指定し、キャストを選定して演出を調整して、最後にプレゼンテーションを実施するという流れは、D3.jsのデータ可視化でも同じです。