Javascript Girl
  1. Javascript Girl
  3. D3 mappant 4 couleurs à 4 plages numériques pour se ressembler un peu comme un plan thermique très basique
Intereting Posts
Référence non saisieError google n'est pas défini Commandé JSONObject Le fichier .js contient "un autre fichier .js Qu'est-ce que $ .when.apply ($, someArray) fait? Comment obtenir le contenu de l'objet Dom inclut-il lui-même? En utilisant javascript pour protéger le mot de passe pdf Comment un noeud DIV a-t-il été "détaché" et quel est l'utilité? Comment exécuter async / attendre en parallèle en Javascript Quels sont les différences entre les expressions régulières Python et Javascript? API de recherche Bing utilisant Jsonp ne fonctionne pas, étiquette non valide JQuery .focusout / .click conflict XMLHttpRequest pour obtenir une réponse HTTP à partir de l'hôte distant Création d'un fichier XML à l'aide de Javascript Comment obtenir tous les CSS de l'élément Problème de déploiement du projet Rails 3.1 à Heroku: impossible de trouver un tempo d'exécution JavaScript

D3 mappant 4 couleurs à 4 plages numériques pour se ressembler un peu comme un plan thermique très basique

J'essaie de faire fonctionner ce travail en tant que tel:

  • 0 = gris
  • 1-33.33 = vert
  • 33.34-66.66 = jaune
  • 66.67-100 = rouge

Il ne fonctionne pas actuellement mais j'ai un exemple de code ici: http://jsfiddle.net/JLSt4/1/

C'est le bloc de code spécifique: 

var colors = ["#CCCCCC","#55AF29","#FFD017","#B72E00"]; var heatmapColor = d3.scale.linear() .domain(d3.range(0, 1, 1.0 / (colors.length - 1))) .range(colors); var getData = d3.extent(jsondata.kpi, function (d) { return +d.status }); var c = d3.scale.linear().domain(getData).range([0, 1]);

Et l'affichage: 

  .style("fill", function(d) { return heatmapColor(c(d))});

J'ai travaillé avec la réponse à cette question, mais ce n'est pas tout à fait ce que je recherche, car cela mappe les valeurs dynamiques à un jeu de couleurs: D3: Créez une échelle de couleurs continue avec de nombreuses chaînes / entrées pour la gamme et dynamiquement Changer les valeurs du domaine

Toute aide est appréciée !!

Cela ressemble à ce que vous voulez est une échelle de quantification ou une échelle de seuil – une échelle qui prend une valeur d'entrée continue et la divise en bac pour la conversion en un ensemble discret de valeurs de sortie.

Pour les échelles de quantification, vous spécifiez le domaine comme d'habitude ( [min,max] ) et la taille des bacs est déterminée par le nombre de valeurs dans la plage, de sorte que chaque bac a la même taille.

Pour les échelles de seuil, vous spécifiez le domaine comme l'ensemble des valeurs de seuil au-dessus desquelles la prochaine valeur de la plage doit être utilisée; Il devrait y avoir une valeur de seuil inférieure, il y a des valeurs de portée.

La version utilisée par @FernOfTheAndes pour vous est une échelle polylédaire : une échelle linéaire avec différents blocs de domaine / plage. Les valeurs entre deux points du domaine sont converties en une valeur qui est la même distance entre les deux points correspondants de la plage.

Donc, pour une échelle [0,33,66,100] avec le domaine [0,33,66,100] et la plage [gray,green,yellow,red] une valeur de 0 est mappée sur gris, une valeur de 33 est mappée sur verte, mais une valeur de 15 est cartographiée À une couleur gris-vert à mi-chemin entre les deux.

En revanche, pour une échelle de seuil avec le domaine [1,33,66] et la plage [gray,green,yellow,red] , toute valeur supérieure ou égale à 1 mais inférieure à 33 sera mappée en vert pure.

Alternativement, vous pouvez utiliser une échelle de quantification avec le domaine [0,100] , la plage [green,yellow,red] et utiliser un test séparé pour attribuer la couleur grise lorsque la valeur est 0.