D3 Threshold Scale Example

by Darth Vader

HTML

<script>
    var AVS_COLORS = {
		N1: "#ebebeb",
		N2: "#bbbbbb",
		N3: "#808080",
		N4: "#4d4d4d",
		B1: "#89e3f9",
		B3: "#3ebede",
		B2: "#1e92af",
		B4: "#0e5061",
		G1: "#8cf88c",
		G2: "#51dc51",
		G3: "#22b322",
		G4: "#188018",
		O1: "#fcac8b",
		O2: "#f47b19",
		O3: "#d14019",
		O4: "#9e3113",
		M1: "#fc5091",
		M2: "#c80850",
		M3: "#a40541",
		M4: "#70032d",
		P1: "#e477ff",
		P2: "#cc00ff",
		P3: "#8100a1",
		P4: "#530067",
		Y1: "#f3e220",
		Y2: "#ffb400",
		R1: "#d40f0f"
	};
</script>

JavaScript

var graphColors = ['not','red', 'yellow', 'blue', 'green'];
var colors = d3.scale.threshold().domain([1,50,90,100]).range(graphColors);


console.log('not', colors.invertExtent('not'));
console.log('red', colors.invertExtent('red'));
console.log('yellow', colors.invertExtent('yellow'));
console.log('blue', colors.invertExtent('blue'));
console.log('green', colors.invertExtent('green'));

for(var index=0; index<101;index++) {
     console.log(index, colors(index));   
}