例ごとにD3.JSデータの視覚化を作成することを学びます

d3.js：JavaScript

を使用して動的なデータの視覚化を描画します この記事では、動的でインタラクティブなデータの視覚化を作成するための強力なJavaScriptライブラリであるD3.JSについて説明します。 HTML、SVG、およびCSSを使用して、Webブラウザーでデータをレンダリングします。

コアポイント：

D3.JSは、HTML、SVG、CSSを使用して、開発者がWebブラウザーで動的でインタラクティブなデータ視覚化を作成できる多用途のJavaScriptライブラリです。
ライブラリは、データ処理のための豊富なツールを提供し、生データを意味のある視覚表現に変換するためのツールを提供し、ユニークな創造的なアイデアに合わせて広くカスタマイズできます。
d3.jsは、スケールバーを使用して、データ値をサイズや色などの視覚的な表示プロパティにマッピングし、データを正確に反映するチャートやその他の視覚要素を作成します。
この記事では、バーチャート、ラインチャート、アニメーションの視覚化の実用的な例を提供し、D3.JSを使用してシンプルで複雑なデータグラフをレンダリングする方法を示しています。
D3.JSは、トランジションやアニメーションなどの高度な機能をサポートしているため、開発者はユーザーエクスペリエンスとデータインタラクションを強化する視覚的に魅力的で動的に更新された視覚化を作成できます。

d3.jsは、データベースのドキュメント操作JavaScriptライブラリです。 HTML、SVG、CSSを使用してデータを実現するのに役立ちます。 すべてのWeb開発者が学習すべき3つのJavaScriptライブラリは、jQuery、Underscore、およびD3です。これらのライブラリは、コードを新しい方法で考えることができます。データ処理とグラフィカルプログラミング。 D3が初めての場合は、その印象的な例を閲覧して、それが何ができるかを確認してください。これはあなたの父親の時代からのチャートライブラリではありません。 William Playfairは、1786年に

barチャート、ラインチャート、エリアチャートを発明し、1801年にパイチャートを発明しました。これらは、ほとんどのデータセットが今日提示されている主な方法です。これらのチャートは優れていますが、D3はユニークなWebデータの視覚化を作成するツールと柔軟性を提供し、創造性が唯一の制限要因です。 D3は、HTMLおよびSVGドキュメントにデータをマッピングするためのjQueryのようなAPIを備えた非常に柔軟な低レベルの視覚化ライブラリです。データ変換と物理的計算のための多数の有用な数学機能が含まれていますが、その機能のほとんどは、SVGの幾何学的図と経路の操作からのものです。この記事の目的は、D3機能の高レベルの概要を提供することを目的としています。各例では、入力データ、の変換およびoutputを変換することができます。ドキュメント。各関数が何をするかを説明するのではなく、代わりにコードを表示します。それがどのように機能するかについて大まかなアイデアを得ることができるはずです。私は最も重要な概念にのみ入ります：scaleおよびselect。

バーチャート

HTMLを使用したシンプルなバーチャートの作成は、D3がデータをドキュメントに変換する方法を理解する最も簡単な方法の1つです。コードは次のとおりです

このコードは、入力データを出力HTMLにマップします。

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

github貢献チャート[4, 8, 15, 16, 23, 42]

わずか数行のコードを使用すると、上記のバーチャートをGitHubと同様の貢献チャートに変換できます。

データの数値に応じて高さを設定することはなく、背景色を設定します。

SVGの初心者

D3の機能のほとんどは、サークル、ポリゴン、パス、テキストなどの2Dグラフィックを描画するためのラベルが含まれるSVGで動作するという事実に由来しています。

circular

d3は、より複雑なデータ型を処理できます。

行チャート

SVGでラインチャートを描くのは非常に簡単です。

スケール

スケールは、入力ドメインを出力範囲にマップする関数です。

アニメーションフライトの視覚化

これは、メルボルンとシドニー間のフライトを示すアニメーションの視覚化の例です。

結論

この記事は、D3.JSライブラリのごく一部のみをカバーしています。 この高度な概要といくつかの実用的な例により、選択、スケール、変換の使用方法が得られることを願っています。 データを表現し、独自の独自のデータ視覚化を作成するための最良の方法を考えてください。

（画像の位置は変わらないままです）

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