1

d3 で構築された標準の 50 州マップがあり、さまざまなデータセットに従って州を動的に色付けしています。データセットが何であれ、値は 0 から 1 のスケールで正規化されます。1 は最高値を持つ州に対応します。正規化されたデータ ポイントの値を使用して状態の陰影を計算する方法を探しています。

過去に、好きな基本色 (たとえば #900) を選択しfill、各状態の をその色に設定opacityし、 を正規化された値に設定しました。これは、2 つの問題を除けば問題なく機能します。

  • キャンバスに背景色がある場合、すべての陰影状態の下に空白の白い状態を描画する必要があります。と
  • この方法で色をフェードアウトすると、ペースト状に見えることがあります

しかし、データのビンやグラデーションの RGB 値のプリセット配列を処理するよりも、色を動的に設定できることが本当に気に入っています。そこで、何か良い方法がないか検討中です。別のカラー システムがうまく機能する場合は、変換を処理できます。

d3にはHSLコンバーターが組み込まれているので、これを試しました：

// 0 <= val <= 1 
function colorize(val) {
    // nudge in the extremes
    val = 0.2 + 0.6 * val;
    return d3.hsl(0, val, 1 - val);
}

これは問題なく動作します -- これは、メイン州とオレゴン州で最も普及している釣りの仕事の地図です -- しかし、もっと良い方法があると思います. アイデア？

ここに画像の説明を入力

4

1 に答える 1

1

私はあなたが実際にしたことを気に入っていますが、何か違うことをしたい場合は、いつでも D3 スケールを行うことができます. 例えば：

 var scale =  d3.scale.linear().domain([rangeMin, rangeMid,
 rangeMax]).range(["#Color1","#Color2","#Color3"]);

そして、各状態を次のように設定します

return scale(dataValue);

rangeMin 変数と rangeMax 変数をデータの最小値と最大値に設定できます。追加した中央値 rangeMid はオプションです。色にバリエーションを持たせたい場合はこちらがおすすめです。このスケール機能を使用して、非常に優れた単語頻度ヒートマップを作成しました。少しでもお役に立てれば幸いです！

注: CSS 16 進数値でこれを使用しましたが、RGB と HSL も機能すると思います。

于 2013-05-06T19:27:05.333 に答える