DC.js-コンセプト

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

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

これらの各Web標準について詳しく理解しましょう。

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

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

典型的な基本的な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ページにレンダリングする方法を説明します。

JavaScript

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

コンポーネント

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

Crossfilter
D3.js

クロスフィルター

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

D3.js

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