DimpleとD3を使用してJavaScriptでデータの視覚化を作成します

World Wide Webは、豊富なデータを指先に置いています。このデータの膨大な量のため、際立っている方法で提示するか、メッセージを伝える方法で提示することは、しばしば難しいことがわかります。これは、データの視覚化が始まる場所です この記事では、データの視覚化の作成、つまり2015年1月に米国の車両が想起し、D3.jsの上に構築されたdimple.js javascriptライブラリを使用して、あなたを案内します。

キーテイクアウト

データの視覚化は、javascriptとdimple.jsライブラリを使用して作成できます。これは、d3.jsに構築されており、魅力的な方法で大量のデータを提示します。

プロセスには、目標を設定し、データを操作し、データをD3オブジェクトに拘束することが含まれます。この場合、2015年1月のメーカーによる車両リコールの総数を描いたバーチャートが作成されました。

データの視覚化を成功させるには、データのクリーンアップと準備が重要です。これには、関連するデータの抽出、利用可能なデータのサブセットへの列を削減し、特定の基準に基づいて手動でグループ化するデータが含まれます。
• D3.JSライブラリは、CSV、TSV、JSONなどのさまざまなデータファイル形式のすぐに使用できるサポートを提供し、処理のためのJavaScriptアレイに変換できます。
ツールチップ、審美的遷移、ラベル操作などの追加機能を追加して、データの視覚化とユーザーの相互作用を強化できます。
目標の設定
• NHTSA
/odiは、1967年以降のすべてのNHTSA安全関連の欠陥とコンプライアンスキャンペーンを含むリコールファイル（ウェブサイトからアクセス可能）を提供します。私たちの目標は、特定の月のデータを抽出することです（ 2015年1月）、およびそこからバーチャートを作成し、メーカーによる車両のリコールの総数を描いています。 D3.jsでデータを視覚化するのを見る JavaScriptでデータを説明します
• このコースをご覧ください このコースをご覧ください
このデータの視覚化は説明的ではなく（生データが表示されます）、ほとんど探索的ではありません（視聴者がそのデータから構築する物語はあまりありません）。ただし、ユーザーがバーの1つを上回ったときに、チャートの横に追加情報を表示するつもりです。
• これが私たちが最終的に次のことをします

記事の最後に（より小さな）ライブデモを見るか、Codepenでオリジナルを表示できます。

データの操作

必要なデータのみを保持してください

このセクションで説明したすべてのファイルは、githubレポで見つけることができます。

元のファイルflat_rcl.txt（link）は、正確に言うと、109,682レコードのデータのlotを含むタブ分離値ファイルです。 このデータに関連する列を詳述する添付ファイルrcl.txt（link）があります。

2015年1月のデータのみに関心があるため、またはむしろ記録作成日が2015年1月であるレコードには、残りの記録を削除できます。これを行うには、OpenOffice Calcスプレッドシートプログラムを使用しています（ただし、他のスプレッドシートソフトウェアで十分です）。結果のファイルrcl_january_2015.csv（link）は、201レコードのみをカウントします。

ここで、列を利用可能なサブセットに削減する必要があります。 記録作成日、メーカー、モデル、モデル年、製造の開始日、製造の終了日、影響を受けるユニットの潜在的な数、欠陥の要約、結果の要約、および修正概要。 次に、列名を結果のCSVファイルの最初の行、rcl_january_2015_clean.csv（link）に追加できます。

これにより、視覚化に必要な生データが得られます。

データ構造を作成します

ここで、メーカーによるリコールを手動でグループ化し、同じ欠陥を持つレコードを組み合わせる必要があります。結合されたレコードが日付ごとに、次にモデルによってソートされ、影響を受けるユニットの累積潜在的な総数があることを確認する必要があります。

このグループにJSONデータ構造を使用する予定です。 これを説明するために、rcl_january_2015_clean.csvファイルの最初の3つのエントリを処理しましょう。これらは、2013年、2014年、2015年のMCIのJ4500が同じ年の製造を伴う2013年、2015年のJ4500が同じ欠陥を示していることを示す1つのラインにグループ化できます。影響を受けるユニットの潜在的な数は、すでにこれら3つのモデルをデータセットにグループ化します。

これが私たちが使用するJSONデータ構造です：

このプロセスを繰り返した後（および二重引用符を逃がす）後、CSVファイル

rcl_january_2015_json.csv

（link）があります。簡潔にするために、私たちの作業例は、元のファイルの最初の3つのメーカーのみを示します（46のうち3つ）。 D3オブジェクトへのバインディングデータ

D3は、CSV、TSV、JSONなどのデータファイル形式にすぐにサポートされています。 Ajaxコールが実行されてファイルをフェッチし、解析されてJavaScriptアレイに変換されます。作成したCSVファイルは、次のコードでフェッチできます。

コード内のJavaScriptアレイを直接定義することもできます。これは、CodePenデモの目的のためにここで行う予定です。データ構造は、csvファイルから作成された配列D3にできるだけ近くに保たれています。

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

そして今、飛び込みましょう！

HTMLは簡単です。2つのdiv、1つはチャート用（recallschart）、もう1つはユーザーがバーの1つ（recalldetails）にhoversしている場合に追加の詳細を表示します。

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

最初にSVGオブジェクトをDIV要素に追加し、IDで参照します。次に、データを新しいチャートにリンクします。これはSVGでレンダリングされます。最後に、チャートの境界を手動で設定して、その親divに正しく配置するように設定します。

d3<span>.csv("RCL.csv", function (data) {
</span>  <span>// process the data
</span><span>});</span>

チャートのx軸をデータのメーカーフィールドに設定します。メーカーがカテゴリデータを構成するため、addcategoryaxisメソッドを使用します。 AddorderRuleメソッドを使用してアルファベット順にメーカーを注文し、X-Axisタイトル（メーカーだったでしょう）を非表示にします。メーカーの名前は自明です。

チャートのY軸を、データの影響を受ける単位の潜在的な数に設定します。ここでは、与えられた値からの線形軸を定義するAddMeasureAxisメソッドを使用することもできますが、メーカーの勝利はMCIまたはTORのいずれかの影響を受ける潜在的なユニットの20倍以上を持っているため、結果の列は他の2人をwar化していたでしょう。 。この場合、対数スケールは値が小さいため、より多くのスペースを提供するため、addlogaxisメソッドを使用します。これはデフォルトでベース10になります。

data <span>= [
</span>  <span>{
</span>    <span>'Record creation date':'20150105',
</span>    <span>'Maker':'MCI',
</span>    <span>'Potential number of units affected':'109',
</span>    <span>'JSON data': '{
</span>      <span>"items":[
</span>        <span>{
</span>          <span>"item": {
</span>            <span>"date":"January, 5 2015",
</span>            <span>"models":[
</span>              <span>"J4500 (years 2013, 2014, 2015) ..."
</span>            <span>],
</span>            <span>"units":"109",
</span>            <span>"defect":"...",
</span>            <span>"consequence":"...",
</span>            <span>"corrective":"..."
</span>          <span>}
</span>        <span>}
</span>      <span>]
</span>    <span>}'
</span>  <span>},
</span>  <span>...
</span><span>];</span>

軸を定義したので、それらを結び付けてグラフィックをレンダリングすることができます。このために、Dimple.plot.barを介してバーチャートを選択し、メーカーデータフィールドに結び付けます。 2番目のアレイ要素であるJSONデータは、JSONのデータの部分を各バーに結び付け、マウスでバーの上にホバリングするときに正しいデータにアクセスできるようになります。

<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>

デフォルトでは、プロットユニット（ここ、バー）の上にマウスでホバリングするときにツールチップが表示され、軸とシリーズのデータ​​が表示されます。私たちの場合：メーカー（X軸値）、影響を受けるユニットの潜在的な数（Y軸値）、およびJSONデータの平易なテキスト値。

getToolTiptext関数はここで過負荷になり、JSONデータを処理し、サイドの別のDivに表示します。ツールチップとして表示したいデータの配列、つまりメーカーの名前（データラインの最初の集計フィールド）と影響を受けるユニットの数（Y軸から取得し、ローカライズするユニットの数を返します。組み込みのTolocalestring JavaScriptメソッドを介した一般的な英語番号形式）。

しかし、JSONデータの解析に戻りましょう。

<span>var svg = dimple.newSvg("#RecallsChart", 800, 560);
</span><span>var myChart = new dimple<span>.chart</span>(svg, data);
</span>myChart<span>.setBounds(60, 30, 710, 355)</span>

アクセスしている2つの集約フィールド（Aggfield [0]およびAggfield [1]）は、以前に設定したデータフィールドアレイ（["Maker"、 "json data"]）と一致し、Aggfield自体はプロパティです。基礎となる要素オブジェクトの。

jQueryのParsejson関数でJSON文字列を解析し、JSONオブジェクトのキーに一致する完全な長さのタイトルを設定し、JSONオブジェクトを反復することにより、HTML文字列を構築してIDを使用してDIVに追加するrecalldetails。

最終的に、1秒の遅延で弾力性のある容易さを使用して、美的遷移でチャートを描画します。

私はついに言いましたか？さて、ここではX軸ラベルに別の審美的なトリックを追加します。

デフォルトでは、X軸ラベルは水平に記述されます。しかし、それらは簡単にオーバーラップすることができるため、代わりに垂直に書き込みます。これは、Dimpleの基礎となるD3オブジェクトの露出が便利な場所です。チャートが描かれた後にのみ変更できることに注意してください。したがって、mychart.draw（）call。 これを行うには、最初に各ラベルテキスト、または各ラベルのX軸にリンクされた一致するSVG形状を選択します。 getBbox（）メソッドはInterfacesVGlocatableに属し、境界ボックスを定義するSVGRECTオブジェクトを返し、その座標、高さ、幅を公開します。次に、SVGボックスの回転とわずかな垂直翻訳を実行して、X軸線に近づけます。

そして、ここに最終結果があります：

2015年1月のペン車両のリコールを参照してください。

このペンの幅は、記事に収まるために縮小されました。ここで元のCodepenを見ることができます

結論

この記事では、データの視覚化のためにデータをクリーンアップして準備する方法を見てきました。具体的には、念頭に置いていた最終結果と一致するデータ構造を定義します。 dimple.jsとd3.jsライブラリの両方を使用し、jqueryへのいくつかの限られた呼び出し（主にJSON処理に関連しています）を使用しました。 Dimpleのツールチップ機能をオーバーロードすることにより、データからバーチャートを描きました。また、X軸ラベルを操作するために、基礎となるD3オブジェクトにもアクセスしました。

サイドノートとして、SVGは広くサポートされていますが、事前に（たとえばModernizrを使用して）事前に確認し、必要な場所にPNG画像などのフォールバックを提供することをお勧めします。もちろん、D3.jsおよびDimple.jsの条件付き負荷も考慮する必要があります。

データの視覚化をより深く掘り下げたい場合、Udacityは、視覚化の概念、D3.JSとDimple.jsの使用、物語構造、アニメーションをカバーするDATA VISUATIALISITIONとD3.JSという自己ペースのMOOCを提供します。また、マイクボストックのサイト（D3.jsの作成者）は、このライブラリの背後にある概念を理解したい場合に最適なソースです。一方、ディンプルとD3は、学習する例のリストを提供します。JavaScript、Dimple、およびD3

を使用したデータの視覚化の作成に関するよくある質問（FAQ）

ディンプルとD3を使用してマルチラインチャートを作成するには、ディンプルとD3を使用してマルチラインチャートを作成するには、いくつかのステップが含まれます。まず、HTMLファイルを設定し、D3およびDimpleライブラリを含める必要があります。次に、データをロードする必要があります。データは、CSV、JSON、TSVなどのさまざまな形式である場合があります。データがロードされたら、新しいSVGオブジェクトを作成して寸法を設定できます。その後、新しいディンプルチャートを作成し、軸を指定し、各データシリーズの行を追加できます。最後に、チャートの外観をカスタマイズして、必要に応じてインタラクティブ性を追加できます。

ラインチャートのD3とディンプルコードの違いは何ですか？視覚化ですが、いくつかの違いがあります。 D3は、多くの柔軟性と制御を提供する低レベルのライブラリですが、複雑で冗長になる可能性があります。一方、DimpleはD3の上に構築されており、ラインチャートを含む一般的なタイプのチャートを作成するプロセスを簡素化する高レベルのAPIを提供します。ただし、より複雑な視覚化やカスタム視覚化のためにD3ほど柔軟性を提供しない場合があります。

ディンプルチャートにインタラクティブ性を追加するにはどうすればよいですか？経験と追加の洞察を提供します。ユーザーがデータポイントを上回ると、より多くの情報を表示するツールチップを追加できます。また、クリックやマウスの動きなどのユーザーアクションに応答するイベントリスナーを追加することもできます。たとえば、ユーザーがクリックしたときに行を強調表示したり、データの詳細なビューを表示したりできます。チャートの外観をカスタマイズするため。要素の色、フォント、サイズを変更できます。また、スケールと軸を調整して、データをよりよく表現することもできます。たとえば、数桁にわたるデータに対数スケールを使用したり、X軸のラベルを回転させて読みやすくすることもできます。

欠落または一貫性のないデータの処理は、データの視覚化の重要な部分です。 Dimpleは、そのようなデータを処理するためのいくつかの方法を提供します。 Dimple.FilterData（）メソッドを使用して不要な値をフィルタリングするか、Dimple.AddMeaSureAxis（）メソッドを使用してデータを集約し、欠損値を入力できます。 D3のデータ操作関数を使用して、データを視覚化する前にデータをクリーニングおよび前処理することもできます。

ディンプルとD3を使用してバーチャートを作成するにはどうすればよいですか？

ディンプルとd3を備えたバーチャートを作成するには、ラインチャートを作成するための同様の手順が含まれます。データをロードし、SVGオブジェクトを作成し、新しいディンプルチャートを作成する必要があります。ただし、行を追加する代わりに、Dimple.Addseries（）メソッドを使用してバーを追加します。また、バーの外観をカスタマイズして、必要に応じてインタラクティブ性を追加することもできます。

画像またはPDFとしてディンプルチャートをエクスポートするにはどうすればよいですか？データの視覚化を共有または提示するのに役立ちます。 D3のnode（）メソッドを使用してチャートのSVG要素を取得し、CANVGやJSPDFなどのライブラリを使用してSVGを画像またはPDFに変換できます。これには追加のセットアップと依存関係が必要になる場合があることに注意してください。

ディンプルチャートをアニメーション化するにはどうすればよいですか？

ディンプルチャートをアニメーション化すると、データの視覚化が魅力的でダイナミックになります。 D3の遷移方法を使用して、データまたはチャートの外観の変更をアニメーション化できます。たとえば、データが変更されたときに、ラインチャートのラインをアニメーション化して、ある状態から別の状態にスムーズに移行できます。 DimpleとD3を備えた散布図には、ラインまたはバーチャートを作成するための同様の手順が含まれます。データをロードし、SVGオブジェクトを作成し、新しいディンプルチャートを作成する必要があります。ただし、行またはバーを追加する代わりに、Dimple.Addseries（）メソッドを使用してポイントを追加します。また、ポイントの外観をカスタマイズして、必要に応じてインタラクティブ性を追加することもできます。

ディンプルとD3を使用してパイチャートを作成するにはどうすればよいですか？他のタイプのチャートを作成します。データをロードし、SVGオブジェクトを作成し、新しいディンプルチャートを作成する必要があります。ただし、線、バー、またはポイントを追加する代わりに、Dimple.Addseries（）メソッドを使用してパイを追加します。パイの外観をカスタマイズして、必要に応じてインタラクティブ性を追加することもできます。

以上がDimpleとD3を使用してJavaScriptでデータの視覚化を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。