index.html

## readme.md

      
        

          Raw
        
        
          
            
          
          
            
              readme.md
            
          
        
      
    
  
    This is in answer to this google groups question.  The aim was to create a colour scale that wasn't biased by underlying distribution of the data.  To achieve this an ordinal scale was used in conjunction with a custom colour interpolation.

  

  

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Interpolated Colour Scales</title>

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

</head>
<body>

</body>
<script type="text/javascript">
	var data = [10, 20, 100, 101, 102, 103, 104,105, 500, 700, 1000],
	 	dataRange = [];

	for (var i = 0; i < data.length; i++) {
		dataRange.push((i+1)/data.length)
	};

	var colourScale = d3.scale.ordinal()
						.domain(data)
						.range(dataRange);

	d3.select("body").selectAll("div")
		.data(data).enter()
		.append("div")
		.style("height", "25px")
		.style("width", function(d) {
			return d + "px";
		})
		.style("background", function (d,i) {
			return interp(colourScale(d));
		})
		.style("margin", "2px");

function interp(x) {
    var ans = d3.interpolateLab("#ff0000", "#0000ff")(x);
    return ans
}

</script>
</html>