javascript - D3：2Dアレイデータによって駆動されるグレースケール画像表示

Question

d3を使用して、グレースケール画像、つまりピクセル強度の2D配列を表示する方法を知っている人はいますか？どこにも例が見つからないようですが、注意が必要ですか？ヘルプ/リンク/ポインタをいただければ幸いです。

Answer 1

画像を表示するだけの場合は、image要素と「xlink：href」属性を使用します。例えば：

svg.append("image")
    .attr("xlink:href", "my.png")
    .attr("width", 960)
    .attr("height", 500);

グレースケール画像を色付けする場合は、分位数を使用して発散するカラースケールを作成し、知覚を向上させるためにHCL補間を使用する、この色付けされたハイトマップの例を参照してください。

他の表現でデータを使用している場合は、次の例が役立つ場合があります。

• SVGrect要素を使用したCSVからのヒートマップ
• Canvasを使用したJSONからのヒートマップ

最後に、事前に計算された2Dヒストグラムではなく個々のサンプルがある場合は、上記のヒートマップのいずれかを生成する前にデータをビニングする必要があります。