De couleur continue à l'échelle de domaine discret de chaînes?

Je me suis mise en œuvre d'une heatmap dans lequel la cellule de la couleur d'arrière-plan est déterminé par une d3 échelle de couleurs. Certaines valeurs sont catégoriques; leur valeur peut être de N différents arbitraire de type chaîne de catégories ["6", "7", "5ÈME", "4"].

Donné une couleur de début de la d3.rvb("bleu") et une couleur de fin d3.rvb("rouge"), comment puis-je construire une échelle de couleurs qui mappe un domaine discret de chaînes en continu d'une gamme de couleurs?

J'ai essayé

var scale = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .rangeBands( [ d3.rgb("blue"), d3.rgb("red") ] );

qui de toute évidence ne fonctionne pas.

OriginalL'auteur amergin | 2012-08-31

  1. 29

    Tout d'abord, je voudrais envisager d'utiliser l'un des facilement disponible Colorbrewer échelles; voir colorbrewer2.org. Ils sont également disponibles en tant que fichiers JavaScript et CSS en D3 du dépôt git; voir lib/colorbrewer. Par exemple, si vous avez quatre valeurs discrètes dans votre domaine et que vous souhaitez un rouge-bleu divergentes de l'échelle, vous pourriez dire:

    var color = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .range(colorbrewer.RdBu[4]);

    (Vous aurez besoin d'un <script src="colorbrewer.js"></script> quelque part avant cela, aussi.) Colorbrewer a une variété de bien-conçu séquentielle, divergentes et catégorique des échelles de couleurs.

    Si vous insistez sur le roulement de votre propre échelle de couleurs, je vous recommande fortement de l'interpolation dans L*a*b* ou HCL espace de couleur pour la perception. Vous pouvez faire cela en utilisant d3.interpolateLab ou d3.interpolateHcl. Par exemple, d3.interpolateLab("red", "blue")(.5) retourne une couleur à mi-chemin entre le rouge et le bleu.

    Pour calculer les couleurs de votre échelle ordinale de gamme, vous pouvez utiliser un interpolateur, ou vous pourriez trouver un temporaire de l'échelle linéaire plus pratique. Par exemple:

    var categories = ["6TH", "7TH", "5TH", "4TH"];

var color = d3.scale.ordinal()
    .domain(categories)
    .range(d3.range(categories.length).map(d3.scale.linear()
      .domain([0, categories.length - 1])
      .range(["red", "blue"])
      .interpolate(d3.interpolateLab)));
    Mise à jour: D3 Colorbrewer lib a déménagé à la d3-échelle chromatique référentiel.

    OriginalL'auteur mbostock

  2. 3

    Vous avez la bonne idée, vous avez juste besoin de traiter chaque R/G/B canal de couleur. Par exemple, en JavaScript natif, vous pouvez effectuer les opérations suivantes:

    var a = [255, 0, 0], //First color
    b = [0, 0, 255], //Other color
    bands = 5,       //Bands is the length of your domain
    i, 
    delta = [];      //Difference between color in each channel

//Compute difference between each color
for (i = 0; i < 4; i++){
  delta[i] = (a[i] - b[i]) / (bands + 1);
}

//Use that difference to create your bands
for (i = 0; i <= bands + 1; i++){
  var r = Math.round(a[0] - delta[0] * i);
  var g = Math.round(a[1] - delta[1] * i);
  var b = Math.round(a[2] - delta[2] * i);
  console.log("<div style='background-color: #" + dec2hex(r) + dec2hex(g) + dec2hex(b) + "'>Band " + i + "</div>");
}

//A helper function for formatting
function dec2hex(i) {
  return (i+0x100).toString(16).substr(-2).toUpperCase();
}

    Selon la d3 documentation, vous pouvez extraire chaque canal de couleur à l'aide de la r, g et b attributs d'un objet couleur:

    # d3.rgb(color)

    Construit une nouvelle couleur RVB par l'analyse de la chaîne de couleurs spécifiée. Si la couleur n'est pas une chaîne, il est contraint à une chaîne de caractères; ainsi, ce constructeur peut également être utilisé pour créer une copie d'une couleur, ou la force de la conversion d'un d3.lgv couleur de RVB.

    ...

    La couleur résultante est stockée en tant que rouge, vert et bleu canal entier des valeurs dans l'intervalle [0,255]. Les canaux sont disponibles, comme le r, g et b les attributs de l'objet retourné.

    Donc en haut de l'exemple ci-dessus, vous pourriez dire:

    var myColor = d3.rgb("blue"),
    a = [myColor.r, myColor.g, myColor.b],
...

    T-il m'aider?

    Oui, sa a bien aidé! Merci, fonctionne parfaitement.

    OriginalL'auteur Justin Ethier