Javascript を使用して、D3.js でインタラクティブなデータ可視化を作成

データ可視化のためのD3.jsの理由

データの視覚化は、生の数字と人間の理解のギャップを埋めます。利用可能な多くのツールの中で、D3.js(データ駆動文書)は、開発者がドキュメントオブジェクトモデル(DOM)を直接制御することを可能にする、多様で低レベルのJavaScriptライブラリとして際立っています。限られたカスタマイズを提供する高レベルのチャートライブラリとは異なり、D3は、複雑な地理マップやネットワーク図に、必要な視覚表現を正確に作成することができます。そのデータ結合モデルは、任意のデータ設定や最適化の要素を最適化し、さまざまなデータを最適化し、最適なデータを最適化し、さまざまなデータを最適化することを可能にします。

D3.jsのコアコンセプト

D3を効果的に活用するには、その基礎原則を理解しなければなりません。選択、データ結合、スケール、SVG。 D3は、DOM要素の選択、それらへの結合データ、および変換を適用することによって動作します。 このパターンは、メソッドのチェーンを通して表現され、単純な例で説明されています。

選択とデータ結合

D3 は CSS セレクタを使用して、対象要素にデータを添付します。 メソッドは、選択したノードで値の配列に結合し、 メソッドは、対応する DOM ノードが欠けているデータポイントの新しい要素を作成します。 この入植パターンは、動的データセットを効率的に処理できます。

例えば、データセット用の円を作成する:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

スケールと軸

生データは、ピクセル座標に直接マップしない範囲に及ぶことが多い。 D3 は ] スケール] を範囲(ピクセル位置)にマップする。 一般的なスケールには、、]、] が含まれている。 Axes は ] または を組み合わせて生成される。 任意の形式は、任意の形式と任意の形式をスケールと任意の形式化します。

リニアスケールの例:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

D3.js を用いたインタラクティブな可視化の構築

対話は、静的なチャートを探索可能なストーリーに変えます。 D3はイベントハンドラ、トランジション、およびダイナミックなアップデートをサポートしています。 ツールチップ、ズーム、ドラッグ、フィルタリング、アニメーションを最小限のオーバーヘッドで追加できます。 以下では、ツールチップの展開や、一般的なインタラクティブ機能を紹介します。

ツールチップとハイライト

Tooltipsは、ホバーに正確なデータ値を提供します。 D3のイベントシステムを使用すると、詳細を示すフローティングを作成できます。 たとえば、ツールチップ付きのバーチャートを既に元のコードに表示していました。 ここでは、ホバーに色の変更を追加することもできます。

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

ズーム&パン

大規模なデータセットや時間系列データの場合、ズームとパンニングのヘルプユーザーは、関心のある領域に焦点を当てます。 D3のの動作は、座標系を変換します。 視覚要素を含むSVGグループにそれを適用します。

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

動的データ更新

インタラクティブなダッシュボードは、ページをリロードすることなくデータを更新する必要があります。 D3の更新パターンは、要素の追加、削除、および変更を適切に処理します。 キーは、新規データと結合を再実行し、追加のノードにを使用することです。

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

高度なD3テクニック

レイアウトと地理的可視化

D3には、複雑なチャート用の特殊なレイアウトモジュールが搭載されています。[]は、パイ/ラジアルデータを作成しました。[は、ネットワークグラフの物理をシミュレートし、]]プロジェクトは、GeoJSONを使用してデータをマッピングします。 これらのモジュールは、洗練された視覚化に必要なコードを大幅に削減します。 例えば、強制指向ネットワークを作成する:

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

トランジションとアニメーション

スムーズな移行により、ユーザーエクスペリエンスが向上します。 D3 の は、属性が時間とともに変化します。 持続時間、増加、遅延をコントロールできます。 例えば、バーをアニメーション化して成長します。

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

生産準備のためのベストプラクティス - レディD3

パフォーマンスの最適化

大規模なデータセット(ポイントの3つ)では、直接 DOM 操作が遅くなります。canvas]] を使用して、D3 キャンバスを介してレンダリングするか、]] WebGL] を、 デッキのようなライブラリで使用してください。 SVG ベースのビジュアルでは、 グループを使用して DOM の複雑性を減らし、すべての要素をフレームに更新しないようにします。 と [FLT] キャッシュを処理します。 [FLT] と [FLT] 選択する] キャッシュ [FLT] と [FLT] は、 [FLT] キャッシュを処理します。 [FLT] 選択します。 [FLT] キャッシュ [FLT] と [FLT] キャッシュを処理します。 [FLT] と [FLT] キャッシュ ([FLT] キャッシュ ([FLT] キャッシュ ([FLT] キャッシュを処理します。 [FLT] キャッシュを処理します。 [FLT] キャッシュ ([FLT]

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}