D3.js-コンセプト

D3.jsは、オープンソースのJavaScriptライブラリです-

ドキュメントオブジェクトモデル（DOM）のデータ駆動型操作。
データと形状の操作。
線形、階層、ネットワーク、および地理データの視覚要素をレイアウトします。
ユーザーインターフェイス（UI）状態間のスムーズな移行を可能にします。
効果的なユーザー対話を可能にします。

Web標準

D3.jsを使用して視覚化を作成する前に、Web標準に精通する必要があります。次のWeb標準は、D3.jsで頻繁に使用されます。

ハイパーテキストマークアップ言語（HTML）
ドキュメントオブジェクトモデル（DOM）
カスケードスタイルシート（CSS）
スケーラブルベクターグラフィックス（SVG）
JavaScript

これらの各Web標準を1つずつ詳しく見ていきましょう。

ハイパーテキストマークアップ言語（HTML）

ご存じのように、HTMLはWebページのコンテンツを構造化するために使用されます。拡張子が「l」のテキストファイルに保存されます。

例-典型的な最低限のHTMLの例は次のようになります

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

ドキュメントオブジェクトモデル（DOM）

HTMLページがブラウザによって読み込まれると、階層構造に変換されます。 HTMLのすべてのタグは、親子階層を持つDOMの要素/オブジェクトに変換されます。これにより、HTMLがより論理的に構造化されます。 DOMが形成されると、ページ上の要素の操作（追加/変更/削除）が簡単になります。

次のHTMLドキュメントを使用してDOMを理解しましょう-

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上記のHTMLドキュメントのドキュメントオブジェクトモデルは次のとおりです。

ドキュメントオブジェクトモデル

カスケードスタイルシート（CSS）

HTMLはWebページに構造を提供しますが、CSSスタイルはWebページを見やすくします。 CSSは、HTMLまたはXML（SVGやXHTMLなどのXML方言を含む）で記述されたドキュメントのプレゼンテーションを記述するために使用される*スタイルシート言語*です。 CSSは、Webページで要素をレンダリングする方法を記述します。

スケーラブルベクターグラフィックス（SVG）

SVGは、Webページに画像をレンダリングする方法です。 SVGは直接的な画像ではなく、テキストを使用して画像を作成する方法にすぎません。その名前が示すように、 Scalable Vector です。ブラウザのサイズに応じて拡大縮小するため、ブラウザのサイズを変更しても画像が歪むことはありません。 IE 8以下を除くすべてのブラウザーがSVGをサポートしています。データの視覚化は視覚的な表現であり、SVGを使用してD3.jsを使用して視覚化をレンダリングすると便利です。

SVGは、さまざまな形状をペイントできるキャンバスと考えてください。そもそも、SVGタグを作成しましょう-

<svg width = "500" height = "500"></<svg>

SVGのデフォルトの測定値はピクセルですので、ユニットがピクセルかどうかを指定する必要はありません。今、私たちは長方形を描きたい場合は、以下のコードを使用してそれを描くことができます-

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

線、円、楕円、テキスト、パスなど、SVGで他の形状を描画できます。

HTML要素のスタイル設定と同様に、SVG要素のスタイル設定は簡単です。長方形の背景色を黄色に設定しましょう。そのためには、属性「fill」を追加し、以下に示すように値を黄色として指定する必要があります-

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScriptは、ユーザーのブラウザーで実行される緩やかに型指定されたクライアント側スクリプト言語です。 JavaScriptは、Webユーザーインターフェイスをインタラクティブにするために、HTML要素（DOM要素）と対話します。 JavaScriptは、ECMA-262仕様に基づくコア機能とECMAScript標準に基づかない他の機能を含む* ECMAScript標準*を実装します。 JavaScriptの知識はD3.jsの前提条件です。

D3js-concepts

目次