最新のJavaScriptおよびD3を使用したインタラクティブなデータ視覚化

この記事では、最近構築したプロジェクトの例をご覧ください。D3ライブラリを使用した

完全にオリジナルの視覚化の種類をご覧ください。学ぶのに最適な図書館。 D3は、データ駆動型のドキュメントを表しています。これは、あらゆる種類の素晴らしいデータの視覚化とチャートを作成するために使用できるJavaScriptライブラリです。

The New York Timesの素晴らしいインタラクティブなストーリーを見たことがあるなら、D3が実際に動いているのを見たことがあります。また、ここでD3で構築された優れたプロジェクトのクールな例をいくつか見ることができます。 D3には、おそらくこれまで見たことのないいくつかの特別な癖があるため、

学習曲線はライブラリを始めるためにかなり急です。ただし、学習の最初の段階を十分に超えてD3を危険にさらすことができれば、すぐに自分のために本当にクールなものを作ることができます。

他のライブラリからD3を際立たせる3つの主な要因があります：

1. 柔軟性。 D3では、あらゆる種類のデータを取得し、ブラウザウィンドウの形状に直接関連付けることができます。このデータは、絶対に何でも優雅さ。アップデート間の滑らかな遷移
を備えたインタラクティブな要素を簡単に追加できます。ライブラリは美しく書かれています
2. 、そして構文のハングを取得したら、コードを清潔で整頓するのは簡単です。 コミュニティ。 D3を使用している素晴らしい開発者の広大なエコシステムがすでにあり、コードをオンラインで簡単に共有しています。 bl.ocks.orgやblockbuilder.orgなどのサイトを使用して、他の人が事前に作成したコードをすばやく見つけ、これらのスニペットを自分のプロジェクトに直接コピーできます。 キーテイクアウト
データ駆動型のドキュメントの立場にある
3. D3は、ニューヨークタイムズのようなプラットフォームでの広範な使用によって実証されているように、多様でインタラクティブなデータの視覚化を作成するための強力なJavaScriptライブラリです。
ライブラリは比類のない柔軟性を提供し、開発者があらゆる種類のデータをブラウザで直接グラフィカルな表現に結合できるようにし、視覚化デザインの創造性を促進します。

D3は、スムーズな移行を伴うインタラクティブでダイナミックな要素を追加し、エレガントなプログラミングと構文を通じて視覚体験とユーザーエンゲージメントを高めることに優れています。

開発者の堅牢なコミュニティはD3をサポートし、BL.OCKS.ORGなどのプラットフォームで共有コードと例の豊富なリソースを提供します。

チュートリアルでは、D3の能力を利用してデータを動的に操作および提示するための革新的な視覚化の作成を詳述し、実際のデータ値に基づいてPIEチャートRadiiのような視覚要素を調整します。

プロジェクトは、既存のコードを借用と適応させ、D3の適応性とコーディングにおけるコミュニティの重要性を実証することで、動的でインタラクティブな機能強化に移行することで繰り返し開発されました。
• 最終的なインタラクティブな視覚化には、プレイ/一時停止ボタンや1年選択のスライダーなどの機能が含まれており、D3を使用してデータの視覚化を有益であるだけでなく魅力的にする方法を示しています。
• プロジェクト
• 大学の経済学専攻として、私は常に所得の不平等に興味を持っていました。私はこのテーマについていくつかのクラスを受講しましたが、それがそうあるべき程度に完全には理解されていないものとして私を襲った。
Googleのパブリックデータエクスプローラーを使用して所得の不平等を調査し始めました…

• インフレに合わせて調整すると、世帯収入は社会の下位40％で

  が

  であり、労働者ごとの生産性は急増しています。より多くのメリットを獲得したのは、実際に

  上位20％

  でした（そして、そのブラケット内では、上位5％を見ると違いはさらに衝撃的です）。

  ここに私が説得力のある方法で伝えたいメッセージがありました。 スケッチ

  私たちはd3で作業しているので、私は多かれ少なかれ、私が考えることができる絶対に何でも

  スケッチを始めることができました。シンプルな折れ線グラフ、バーチャート、またはバブルチャートを作成するのは簡単だったでしょうが、違うものを作りたかったのです。 人々が不平等に関する懸念の反論として使用する傾向がある最も一般的な類推は、「パイが大きくなった場合、それ以上は回る」ということです。直感は、GDPの総シェアが大幅に増加することに成功した場合、たとえ一部の人々がパイのより薄いスライスを取得している場合でも、彼らはまだ。しかし、私たちが見ることができるように、パイが全体的に少なくなっているとがより大きくなることは完全に可能です。 このデータを視覚化するための私の最初のアイデアは次のように見えました：

  アイデアは、この脈動するパイチャートがあり、各スライスが米国の収入分布の5分の1を表しているということです。各パイスライスの面積は、人口のセグメントがどれだけの収入を得ているかに関連しており、チャートの総面積はGDPの合計を表します。

  しかし、私はすぐにちょっとした問題に出くわしました。人間の脳は、異なる領域のサイズを区別するのに非常に貧弱であることがわかります

  。私がこれをより具体的にマッピングしたとき、メッセージは本来あるべきほど明白ではありませんでした：

  ここで、実際には、最も貧しいアメリカ人が時間とともに

  豊かに

  を取得しているように見えます。私はこの問題についてもう少し考えましたが、私の解決策には、各アークの角度を一定に保つことが含まれ、各アークの半径は動的に変化します。
  これが実際に見えるようになった方法です：

  

  この画像は、ここで効果を控えめにする傾向があることを指摘したいと思います。単純なバーチャートを使用した場合、効果はより明白でした：

  

  しかし、私はユニークな視覚化を行うことにコミットしていました、そして、私はこのメッセージを家に持ち帰りたかったのですが、pieはを得ることができますが、そのは小さくなることがあります。今、私は自分の考えを持っていたので、D3でそれを構築する時が来ました。 貸付コード

  だから、自分が何を構築しようとしているのかがわかったので、このプロジェクトの本当の肉に入り、
  。

  最初の数行のコードをゼロから書くことから始めると思うかもしれませんが、あなたは間違っているでしょう。これはD3であり、D3で作業しているため、コミュニティから事前に書かれたコードをいつでも見つけることができます。 私たちはまったく新しいものを作成していますが、通常のパイチャートと多くの共通点があるので、bl.ocks.orgを簡単に見てみました。 D3の作成者の1人。このファイルはおそらくすでに何千回もコピーされており、それを書いた人はJavaScriptの本物のウィザードなので、すでにコードの素晴らしいブロックから始めていることを確認できます。 このファイルはD3 V3で記述されています。これは、バージョン5が先月最終的にリリースされたため、現在では2つのバージョンであります。 D3 V4の大きな変化は、ライブラリがフラットネームスペースの使用に切り替えたため、d3.scale.ordinal（）のようなスケール機能は、代わりにd3.scaleordinal（）のように書かれていることでした。バージョン5では、最大の変更は、データ読み込み関数が約束として構成されているため、複数のデータセットを一度に処理しやすくすることでした。

  混乱を避けるために、私はすでにこのコードの更新されたV5バージョンを作成するのに苦労しました。また、ES5匿名関数をArrow関数に切り替えるなど、ES6コンベンションに適合するように構文を変換しました。

  これが私たちがすでに始めていることです：

  次に、これらのファイルをワーキングディレクトリにコピーし、自分のマシンですべてを複製できるようにしました。このチュートリアルを自分でフォローしたい場合は、GitHubリポジトリからこのプロジェクトをクローンできます。ファイルStarter.htmlのコードから始めることができます。このコードを実行するためにサーバー（このようなものなど）が必要になることに注意してください。

  このコードがどのように機能しているかを簡単に説明させてください。

  コードを歩く

  最初に、ファイルの上部にいくつかの定数を宣言しています。これを使用して、パイチャートのサイズを定義します。

  これにより、コードが非常に再利用可能になります。なぜなら、それを大きくしたり小さくしたいのであれば、ここでこれらの値を変更することを心配する必要があるからです。

  次に、SVGキャンバスを画面に追加します。 SVGについてあまり知らない場合は、キャンバスをページ上のスペースを描くことができるスペースとして考えることができます。この領域の外側にSVGを描画しようとすると、画面に表示されません：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  d3.select（）への呼び出しを使用して、チャートエリアのIDを使用して空のdivを手に入れています。また、D3.Append（）メソッドを使用してSVGキャンバスを取り付けており、d3.attr（）メソッドを使用して幅と高さにいくつかの寸法を設定しています。 また、このキャンバスにSVGグループ要素を添付しています。これは、要素を一緒に構築するために使用できる特別なタイプの要素です。これにより、グループ要素の変換属性を使用して、視覚化全体を画面の中心にシフトできます。 その後、パイのすべてのスライスに新しい色を割り当てるために使用するデフォルトのスケールを設定しています：

  次に、D3のパイレイアウトをセットアップするいくつかの行があります：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  D3では、レイアウトはデータセットで呼び出すことができる特別な関数です。レイアウト関数は、特定の形式で一連のデータを取り入れ、自動的に生成された値を使用して

  変換された配列を吐き出します。

  次に、アークを描くために使用できるパスジェネレーターを定義する必要があります。パスジェネレーターを使用すると、WebブラウザでPATH SVGSを描画できます。 D3が実際に行うのは、画面上のデータの形状を形成することだけですが、この場合、単純な円や正方形よりも複雑な形状を定義したいと考えています。 PATH SVGは、その間に描かれるラインのルートを定義することにより機能します。これは、そのD属性で定義できます。 これがこれがどのように見えるかもしれませんか：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  d属性には、ブラウザが必要なパスを描画できる特別なエンコードが含まれています。この文字列の意味を本当に知りたい場合は、MDNのSVGドキュメントでそれについて知ることができます。 D3でのプログラミングの場合、この特別なエンコードについては何も知る必要はありません。これは、いくつかの単純なパラメーターで初期化する必要があるジェネレーターがあるためです。

  アークの場合、パスジェネレーターにピクセルの内部段階と外radius値を与える必要があります。ジェネレーターは、私たちの各角度を計算する複雑な数学を整理します。
  チャートでは、innernradiusにゼロの値を使用しています。これにより、標準のパイチャートが表示されます。ただし、代わりにドーナツチャートを描きたい場合は、必要なのは、outourradius値よりも小さい値をプラグインすることだけです。

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  いくつかの関数宣言の後、d3.json（）関数を使用してデータにロードしています：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  D3バージョン5.xでは、d3.json（）への呼び出しが約束を返します。つまり、d3はjsonファイルのコンテンツを取得し、それを与える相対パスで見つけて、それを与える相対パスで見つけ、その関数を実行することを意味します。ロードされたら、当時（）メソッドを呼び出します。その後、コールバックのデータ引数で見ているオブジェクトにアクセスできます。 また、ここに関数リファレンスを渡しています - タイプ - これは、私たちがロードするすべての値を数値に変換する予定です。
  console.log（data）を追加した場合; d3.jsonコールバックの上部への声明、私たちが現在取り組んでいるデータを見ることができます：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  データはここで2つの異なる配列に分割され、それぞれリンゴとオレンジのデータを表しています。

  この行を使用すると、ラジオボタンの1つがクリックされるたびに見ているデータを切り替えます：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  また、視覚化の最初の実行でupdate（）関数を呼び出し、初期値（「リンゴ」アレイを使用して）を通過する必要があります。
  アップデート（）関数が何をしているかを見てみましょう。 D3に慣れていない場合、D3の最も難しい部分の1つであるため、これは混乱を引き起こす可能性があります…

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  まず、値に対してデフォルトの関数パラメーターを使用しています。更新（）関数に引数を渡す場合（初めて実行しているとき）、その文字列を使用します。私たちの無線入力。
  次に、D3の一般的な更新パターン

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  を使用して、アークの動作を処理します。これには通常、データ結合の実行、古い要素の終了、画面上の既存の要素の更新、データに追加された新しい要素の追加が含まれます。この例では、画面に常に同じ数のパイスライスがあるため、要素の終了を心配する必要はありません。

  最初に、データが参加しています：

  <span>const arc = d3.arc()
  </span>  <span>.innerRadius(0)
  </span>  <span>.outerRadius(radius);
  </span>

  視覚化が更新されるたびに、これにより、新しい一連のデータが画面上のSVGと関連付けられています。データ（「リンゴ」または「オレンジ」の配列のいずれか）をpie（）レイアウト関数に渡しています。これは、アークを描画するために使用できるいくつかの開始角と端の角度を計算しています。このパス変数には、画面上のすべてのアークの特別な

  仮想選択

  が含まれるようになりました。 次に、データアレイにまだ存在する画面上のすべてのSVGを更新します。ここでトランジションを追加します - D3ライブラリの素晴らしい機能 - これらの更新を200ミリ秒以上拡大します：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  d3.transition（）呼び出しでattrttione（）メソッドを使用して、d3が各アークの位置を更新するために使用するカスタム遷移を定義しています（D属性を使用して遷移）。ほとんどの属性に移行を追加しようとしている場合、これを行う必要はありませんが、異なるパス間の移行のためにこれを行う必要があります。 D3はカスタムパス間を移行する方法を実際に把握できないため、ARCTWEENE（）関数を使用して、D3にそれぞれのパスをどのように描画するかを毎回描画する方法を知らせています。

  この関数がどのように見えるかは次のとおりです
  ここではd3.interpolate（）を使用して、インタープロレーターと呼ばれるものを作成しています。 0から1の間の値でi変数に保存する関数を呼び出すと、this._currentとaの間のどこかにある値を取り戻します。この場合、this._currentは、私たちが見ているパイスライスの開始角と終了角を含むオブジェクトであり、aは更新している新しいデータポイントを表します。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  インタープロレーターをセットアップしたら、this._current値を更新して、最後に持つ値（i（a（a））を含むと、計算する関数を返します。このt値に基づいて、私たちのアークが含めるべきパス。私たちの遷移は、クロックのすべてのティック（0〜1の間の引数を渡す）でこの関数を実行します。このコードは、私たちの遷移がいつでもどこに描かれるべきかを知ることを意味します。

  最後に、更新（）関数は、以前のデータにない新しい要素を追加する必要があります。

  このコードのブロックは、この更新関数が最初に実行されるときに、各アークの初期位置を設定します。ここでのEnter（）メソッドは、画面に追加する必要があるデータのすべての要素を提供します。その後、attr（）メソッドでこれらの各要素をループして、それぞれの充填と位置を設定できます。アーク。また、それぞれのアークに白い境界線を与えています。最後に、これらの各ARCのthis.currentプロパティをデータのアイテムの初期値として設定します。これをarctweene（）関数で使用しています。

  D3のかなり高度なトピックであるため、これがどのように機能しているかを正確にフォローできない場合でも心配しないでください。このライブラリの素晴らしいところは、強力なものを作成するためにその内部のすべての仕組みを知る必要がないことです。変更する必要があるビットを理解できる限り、完全に不可欠ではない詳細を抽象化することは問題ありません。

  それは私たちをプロセスの次のステップにもたらします…
  コードの適応

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  ローカル環境にコードがあり、それが何をしているのかを理解しているので、私たちが見ているデータを切り替えて、興味のあるデータで動作するようにします。 。

  プロジェクトのデータ/フォルダーに操作するデータを含めました。この新しいincomes.csvファイルは今回はCSV形式であるため（Microsoft excelで開くことができるファイルの種類です）、d3.json（）の代わりにd3.csv（）関数を使用します（ ）関数：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  この関数は、基本的にd3.json（）と同じことを行います - データを使用できる形式に変換します。また、ここでは2番目の引数としてtype（）初期化関数を削除します。これは古いデータに固有のものだったからです。

  console.log（data）ステートメントをd3.csvコールバックの上部に追加すると、作業中のデータの形状が表示されます。
  50個のアイテムの配列があり、各アイテムはデータに1年を表しています。その後、毎年、5つの収入グループのそれぞれのデータと他のいくつかの分野のデータがあります。ここでは、ここでパイチャートを作成できますが、最初に適切な形式になるように、データを少しシャッフルする必要があります。 D3と結合してデータを書きたい場合は、各アイテムがSVGに関連付けられる配列を渡す必要があります。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  最後の例では、画面に表示したいすべてのパイスライスにアイテムを備えた配列があったことを思い出してください。これを現時点で持っているものと比較してください。これは、描きたい各パイスライスを表す1〜5のキーを持つオブジェクトです。 これを修正するために、reptedata（）という新しい関数を追加して、以前に持っていたtype（）関数を置き換えます。
  毎年、この関数は値配列を備えたオブジェクトを返し、データ結合に渡されます。これらの各値に名前フィールドにラベルを付けているので、すでに持っていた収入価値に基づいて数値を与えています。また、比較のために毎年の平均収入を追跡しています。

  この時点で、操作できる形式のデータがあります。

  データの最初の年のチャートを生成することから始めます。その後、残りの年の間に更新することを心配します。

  現時点では、データは2015年に始まり、1967年に終了するため、他のことをする前にこの配列を逆にする必要があります。

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  通常のパイチャートとは異なり、グラフでは、各アークの角度を修正し、視覚化の更新として半径を変更するだけです。これを行うには、パイレイアウトの値（）メソッドを変更して、各パイスライスが常に同じ角度を取得するようにします。

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  次に、視覚化が更新されるたびに半径を更新する必要があります。これを行うには、使用できるスケールを作成する必要があります。スケールとは、2つの値の間に入力を取得するD3の関数であり、ドメインとして渡され、2つの異なる値の間で出力を吐き出します。範囲として。使用するスケールは次のとおりです

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  データにアクセスできるようになったらすぐにこのスケールを追加し、入力はデータセットの最大値から最大値の範囲であると言っています。これは昨年の最も豊かなグループからの収入ですデータ（データ[49] .Values [4] .Value）で。ドメインの場合、出力値が間に範囲する間隔を設定しています。 これは、ゼロの入力がゼロのピクセル値を与える必要があることを意味し、データの最大値の入力は、幅または高さの半分の値の値を与える必要があります。 >

  ここでは

  平方根スケール

  を使用していることに注意してください。私たちがこれを行っている理由は、パイスライスの面積が半径ではなく、各グループの収入に比例することを望んでいるからです。領域=πr

  2

  であるため、これを説明するには平方根スケールを使用する必要があります。 その後、このスケールを使用して、アップデート（）関数内のARCジェネレーターのoutourradius値を更新できます。 データが変更されるたびに、それぞれのアークに使用する半径値を編集します。 また、最初にアークジェネレーターを設定したときにアウターラディウスへの呼び出しを削除する必要があります。 最後に、この更新（）関数をいくつか編集する必要があります。そうすれば、すべてが新しいデータと一致するようにする必要があります。

  ラジオボタンを使用するつもりはもうないので、電話をかけて使用したい1年目のオブジェクトを通過するだけです。

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  最後に、フォーム入力用に設定したイベントリスナーを削除します。すべてが計画に行った場合、データの最初の年には美しい見た目のチャートが必要です。
  動的にする

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  次のステップは、異なる年の間に視覚化サイクルを持つことであり、収入が時間とともにどのように変化しているかを示すことです。これを行いますjavascriptのsetinterval（）関数を呼び出します。これを使用して、コードを繰り返し実行できます。

  この時間変数でタイマーを設定し、200msごとにこのコードがステップ（）関数を実行します。これにより、チャートが来年のデータに更新され、タイマーがタイマーの場合はタイマーをインクリメントします。値49（データの昨年）の値で、それ自体をリセットします。これにより、継続的に実行される素敵なループが得られます。

  

  物事をもう少し便利にするために。また、生の数字を提供するいくつかのラベルも追加します。ファイルの本文にあるすべてのHTMLコードをこれに置き換えます：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  ここでは、Bootstrapのグリッドシステムを使用してページを構成しています。これにより、ページ要素をボックスにきちんとフォーマットできます。

  データが変更されるたびに、これらすべてをjQueryで更新します。

  また、ファイルの上部にあるCSSをいくつか編集します。これにより、各アークの凡例が表示され、見出しの中心になります。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  私たちが終わらせるのは、かなり提示可能なものです：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  ここでこれらのアークがどのように時間の経過とともに変化したかを見るのはかなり難しいので、いくつかのグリッドラインを追加して、データの最初の年に収入分布がどのように見えるかを示したいと思います。

  array.foreach（）メソッドを使用してこれを達成していますが、D3の通常の更新パターン

  を再度使用することもできました（join/exit/update/Enter）。 また、米国の平均収入を示すために行を追加したいと思います。これについては毎年更新します。まず、平均行を初めて追加します。
  その後、年が変更されるたびに更新（）関数の最後にこれを更新します：

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  これらのサークルのそれぞれを追加することが重要であることに注意する必要があります

  この時点で、私たちがもう少し明確に作業しているデータを伝えるものがあります：

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  <span>const arc = d3.arc()
  </span>  <span>.innerRadius(0)
  </span>  <span>.outerRadius(radius);
  </span>

  インタラクティブにする

  最後のステップとして、ユーザーが特定の年に掘り下げられるように、いくつかのコントロールを追加してほしい。 の再生/一時停止ボタンと1年のスライダーを追加して、ユーザーが特定の日付を選択して見ることができるようにしたい。 これらの要素を画面に追加するために使用するHTMLは次のとおりです。

  これらの両方の要素にイベントリスナーを追加して、探している動作を設計する必要があります。

  最初に、私たちの

  Play/Pauseボタンの動作を定義したいです。ボタンで停止してタイマーを起動できるようにするために、以前に間隔のために書いたコードを置き換える必要があります。視覚化は「一時停止」状態で始まり、このボタンを押して物事をキックオフする必要があると仮定します。

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  ボタンがクリックされるたびに、ボタンが「再生」ボタンか「一時停止」ボタンであるかによって、ここのif/elseブロックが異なる動作を定義します。クリックしているボタンが「再生」と書かれている場合、ボタンを「一時停止」ボタンに変更し、インターバルループを開始します。または、ボタンが「一時停止」ボタンの場合、テキストを「再生」に変更し、ClearInterval（）関数を使用してループの実行を停止します。

  スライダーには、jQuery UIライブラリに付属のスライダーを使用したいと思います。これをHTMLに含めて、画面にこれを追加するためにいくつかの行を書きます：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  ここでは、スライドオプションを使用して、イベントリスナーをスライダーに添付しています。スライダーが別の値に移動するたびに、この新しい値にタイマーを更新し、その年にデータをデータで実行しています。

  アップデート（）関数の最後にこの行を追加できるように、スライダーがループが実行されているときに適切な年に移動することができます。

  また、updatehtml（）関数（視覚化が変更されるたびに実行される）にラインを追加します。これは、データの今年に基づいてラベルの値を調整できます。
  CSSにさらにいくつかの行を投げ入れて、すべてを少しきちんと見せるようにします：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  そして、私たちはそれを持っています - 私たちの最終製品 - 完全に機能するインタラクティブなデータの視覚化、すべてが期待どおりに機能します。

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  うまくいけば、このチュートリアルがD3の本当の力を実証し、想像できるものを絶対に作成できるようにします。

  D3をゼロから始めることは常に難しいプロセスですが、報酬には価値があります。独自のカスタム視覚化を作成する方法を学びたい場合は、役立つ可能性のあるオンラインリソースをいくつか紹介します。

  SitePointのD3.jsコンテンツの概要
  • D3のホームページの図書館の紹介。これは、最も基本的なコマンドのいくつかを実行し、D3で最初のいくつかのステップを作成する方法を示しています。
  D3の作成者であるMike Bostockによる「バーチャートを作成しましょう」 - ライブラリで最も単純なグラフの1つを作成する方法を初心者に示しています。 Elijah Meeks（$ 35）による行動中の D3のSlackチャンネルは、D3の新人を非常に歓迎しています。また、優れたリソースのコレクションを備えた「学習材料」セクションもあります。
このオンラインUdemyコース（20ドル）は、一連のビデオ講義で図書館のすべてをカバーしています。これはJavaScript開発者を対象としており、4つのクールなプロジェクトが含まれています。
• bl.ocks.orgおよびblockbuilder.orgで利用可能な視覚化の例の多数。
D3 APIリファレンスは、D3が提供するすべてのものについて徹底的な技術的説明を提供します。
そして忘れないでください、私が記事で使用していたコードの完成バージョンを見たい場合は、githubリポジトリで見つけることができます。 JavaScriptおよびD3
• を使用したインタラクティブデータの視覚化に関するよくある質問（FAQ） インタラクティブデータの視覚化におけるD3の重要性は何ですか？
• D3は、データ駆動型のドキュメントを表し、インタラクティブなデータの視覚化の作成に広く使用されているJavaScriptライブラリです。任意のデータをドキュメントオブジェクトモデル（DOM）にバインドし、ドキュメントにデータ駆動型の変換を適用できます。 D3は、考えられるすべての機能を提供しようとするモノリシックなフレームワークではありません。代わりに、問題の核心：データに基づいたドキュメントの効率的な操作を解決します。これは独自の表現を回避し、並外れた柔軟性を提供し、HTML、SVG、CSSなどのWeb標準の完全な機能を公開します。他のライブラリでは不可能なデータの視覚化を作成する柔軟性を提供するため、ユニークです。これにより、DOMを直接操作できます。つまり、視覚化の最終的な外観を完全に制御できます。 D3は宣言的アプローチも使用します。つまり、最終結果がどのように見えるかを定義し、D3はそこに到達する方法を示しています。はい、D3は大規模で複雑なデータセットを処理できます。あらゆる形式でデータを操作できる強力なデータ操作機能を備えています。 D3には、さまざまなソースからデータをロードするための組み込み機能もあり、既存のデータインフラストラクチャと統合しやすくなります。

  D3 Visualizationsをインタラクティブにするにはどうすればよいですか？

  D3は、視覚化にインタラクティブ性を追加するためのいくつかの方法を提供します。イベントリスナーを使用して、クリックやマウスの動きなどのユーザーアクションに応答することができ、トランジションを使用してデータの変更をアニメーション化できます。 D3はズームとパンニングもサポートします。これは、大きなデータセットの調査に役立ちます。科学からビジネスへ。いくつかの一般的なユースケースには、インタラクティブマップの作成、動的チャートとグラフの構築、複雑なネットワークの視覚化、カスタムデータ駆動型のアニメーションの作成が含まれます。 、D3を効果的に使用するには、JavaScriptの基本的な理解が必要です。 D3はJavaScriptライブラリなので、視覚化を作成するにはJavaScriptコードを記述する必要があります。ただし、D3のAPIは直感的で学習しやすいように設計されているため、JavaScriptの専門家でなくても、D3で強力な視覚化を作成できます。 ？

  はい、D3は他のJavaScriptライブラリまたはフレームワークと一緒に使用できます。たとえば、D3を使用して、ReactやAngularなどのフレームワークで構築されたより大きなアプリケーションの視覚化コンポーネントを作成できます。リアルタイムのデータ視覚化に適しています。柔軟なデータ更新メカニズムがあり、新しいデータが入っているときに視覚化を簡単に更新できます。これにより、D3はダッシュボードやライブデータフィードなどのアプリケーションに最適です。 >

  D3の学習に利用できるリソースはたくさんあります。公式のD3ウェブサイトには豊富なドキュメントと例があり、D3を詳細にカバーする多くのオンラインチュートリアルとコースがあります。練習も重要です - D3を使用すればするほど、その概念とAPIでより快適になります。いくつかの制限があります。 JavaScriptとWeb標準を十分に理解する必要があります。これは、初心者にとっての障壁になる可能性があります。また、D3は開発者に多くの決定を任せます。これは、どこから始めればよいかわからない場合は圧倒的です。最後に、D3は大規模なデータセットを処理できますが、パフォーマンスは非常に大きいまたは複雑な視覚化で問題になる可能性があります。

以上が最新のJavaScriptおよびD3を使用したインタラクティブなデータ視覚化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。