DC.js-コンセプト

DC.jsは、ほとんどのフロントエンド開発者にとってシンプルで簡単です。 D3.jsの知識がなくても、基本的なグラフをすばやく作成できます。前に、DC.jsを使用して視覚化を作成し始めました。 Web標準に精通する必要があります。以下のWeb標準は、チャートをレンダリングするためのDC.jsの基盤であるD3.jsで頻繁に使用されます。

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

これらの各Web標準を詳細に理解しましょう。

ハイパーテキストマークアップ言語（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ドキュメントのドキュメントオブジェクトモデルは次のとおりです-

DOM

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

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

JavaScript

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

コンポーネント

DC.jsは、2つの優れたJavaScriptライブラリに基づいています。

クロスフィルター
D3.js

クロスフィルター

Crossfilterは、ブラウザで大規模な多変量データセットを探索するためのJavaScriptライブラリです。生データの数十または数十万行のグループ化、フィルタリング、集約に非常に迅速に使用されます。

D3.js

D3.jsは、データ駆動型ドキュメントの略です。 D3.jsは、データに基づいてドキュメントを操作するためのJavaScriptライブラリです。 D3は、動的、インタラクティブ、オンラインデータ視覚化フレームワークであり、多数のWebサイトで使用されています。 D3.jsは、 Mike Bostock によって作成され、 Protovis と呼ばれる以前の視覚化ツールキットの後継として作成されました。 D3.jsは、数十万のWebサイトで使用されています。

Dcjs-concepts

目次