d3 js tutorial data visualization framework
このD3.jsチュートリアルでは、D3.jsとは何か、その利点、機能、ステップバイステップのインストールプロセス、およびD3.jsをすばやく学習できるようにするための実践的な例を多数説明しています。
このチュートリアルでは、データ駆動型のオープンソースJavaScriptライブラリであるD3.jsを、HTML、ドキュメントオブジェクトモデル（DOM）、カスケードスタイルシート（CSS）、スケーラブルベクターグラフィックス（SVG）、キャンバス、およびWebブラウザを介したJavaScript。
このフレームワークを使用すると、XML、CSV、またはJSON形式の外部データを、Webサーバーを介してチャート、グラフ、または複数の視覚化形式に変換できます。
このチュートリアルでは、このJavaScriptライブラリのすべての関数について学習し、それらを利用してWebブラウザーを使用してWebサーバーを介してデータを視覚化する方法を確認します。
はじめましょう！！
学習内容：
D3.jsとは
D3.jsは、軽量のJavaScriptライブラリであり、必要なコード行が少ないデータ駆動型フレームワークであり、インタラクティブなデータ視覚化チャート、グラフ、地理空間マップを取得するために大きなデータを処理するのに適しています。
これはオープンソースのJavaScriptライブラリであり、主にWebページのDOM要素を操作してデータを探索および分析することにより、グラフィカルな視覚化をプロットするために使用されます。
配列、XML、CSV、JSONなどのデータ形式で保存されたデータは、このJavaScriptライブラリを使用してHTML要素、キャンバス、またはスケーラブルベクターグラフィックス（SVG）のグループ化形状を添付することにより、グラフ、チャート、および複数の方法に変換できます。
モバイルおよびその他のデバイスからの通話詳細レコード、メッセージ、ディスカッション、Twitter、Facebook、WhatsAppなどのソーシャルメディアプラットフォームからのツイットログ、市場動向からのログ、取引情報ログなどのビッグデータは、チャート、グラフ、またはこのJavaScriptライブラリを使用したさまざまな視覚化。
Twitter、Facebook、WhatsAppなどのさまざまなソーシャルネットワーキングプラットフォームの登場以来、twit、メッセージ、コメントログなどのさまざまなコミュニケーションをキャプチャして、チャート、グラフなどの視覚的な形式に変換し、トレンドトピックを理解して感情を生み出すことができます。分析。
電気通信塔からの容疑者の通話詳細記録のグループの手口を理解し、疑わしい犯罪活動に関与した場合に彼らの通話パターンを監視することが容易になります。
証券取引所で起こっている変化に基づいて、ボンベイ証券取引所（BSE）、国立証券取引所（NSE）など、株価の動きを反映する株価指数が市場のセンチメントを決定し、投資家の売買を導きます。在庫の。
D3.jsは、市場シェア活動を変換して、市場動向の確率をすばやく予測できるチャートやグラフ、または犯罪への容疑者の関与を調査するための通話詳細レコードの形式のモバイルデータ、または予測調査に関する情報を作成できます。
D3.jsの機能
- データ駆動型： これは主に、データの調査と分析、およびインタラクティブなリアルタイムグラフ、チャート、およびデータを視覚化するための広範な方法の作成に使用されます。
- DOM操作： これは、DOM要素を操作することによってさまざまな視覚化形式でデータを変換するオープンソースのJavaScriptライブラリです。
- Web標準を利用します： ドキュメントオブジェクトモデル（DOM）、HTML、カスケードスタイルシート（CSS）、Scalable Vector Graphics（SVG）、およびキャンバスを使用して、データ視覚化形式を作成します。
- 高速でインタラクティブ： データの変化に非常に敏感で、選択したDOM要素をある状態から別の状態にすばやくアニメーション化または変換できます。
- 動的遷移の表示： このライブラリは、DOMを使用して迅速に応答する視覚化を生成するために、高速で動的な遷移を作成するように設計されています。
D3.jsを使用する利点
- これは、Angular.JS、Ember.JS、Reactなどの他のJavaScriptフレームワークと一緒に使用できるオープンソースのJavaScriptライブラリです。
- このライブラリはオープンソースであるため、独自の機能をソースコードに追加して、目標を達成することができます。
- DOM、HTML、CSS、SVG、canvasなどのWeb標準を処理するため、ブラウザー以外のプラグインや、追加のデバッグツールや学習ツールは必要ありません。
- DOM要素を操作することにより、動的なリアルタイムの変換を作成し、待ち時間なしでデータをすばやく視覚化できます。
- これはデータを処理し、JavaScriptライブラリに含まれるデータ視覚化関数に特化して適切です。
D3.jsを学ぶための前提条件
- テキストエディタ： HTML、CSS、JavaScriptなどのプログラミングコードを記述し、それらを統合して目的の要件を作成するには、Notepad ++やVimなどのテキストエディターが必要です。
- ウェブブラウザ： Firefox、Google Chrome、Safari、Opera、IE9などの最新のWebブラウザーのいずれかをインストールして、コードの統合後に生成される出力を確認および検証する必要があります。
- HTML： HTMLタグと構造をよく理解すると、基本的なWebページを作成し、要素を揃えて視覚化を次のレベルに引き上げるのに役立ちます。
- CSS： カスケードスタイルシート（CSS）は、デザイン、レイアウト、画面サイズなどのスタイルをWebページに適用するために使用されます。
- 判定： Webドキュメントの構造とコンテンツを理解し、データを視覚化するためにD3.jsのDOM要素にアクセスしやすくなるため、ドキュメントオブジェクトモデル（DOM）を十分に理解することが不可欠です。
- JavaScript： ファンダメンタルズとJavaScriptオブジェクトに精通していることは、データの視覚化をWebサーバーで表示できるように、D3.jsを学習してアプリケーションに実装するための前提条件です。
- Webサーバー： データを配列、オブジェクト、XML、CSV、JSON形式で外部にアップロードし、D3を使用して変換できるように、Apache TomcatやIIS（インターネットインフォメーションサービス）サーバーのようなWebサーバーをインストールすることが不可欠です。 jsをグラフ、チャート、地理空間視覚化などの視覚化形式に変換します。
D3.jsのインストール/セットアップ
Webページでデータの視覚化を作成するには、HTMLWebページにD3.jsを含める必要があります。
これは、次の方法で実行できます。
- D3.jsライブラリをクライアントマシンにダウンロードし、d3.min.jsのパスをに含めます