D3 Examples - Color scale

Color scale and pivot

You can easily create a color scale that map a particular domain of values. In this example, the number from 1 to 20 are mapped to the colors from white to blue.

You can even define a pivot in your scale; the color reaches its maximumal value at a given point of the domain, and then go back.

Click on the button to change the pivot

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Colors</title>
<style>
.clear {
  clear:both;
}
​
.cell {
    min-width: 20px;
    min-height: 10px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
​
}
body {
    font-family: "helvetica";
}
button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
​
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}
​
​
</style>
<body>
<div id="color" class="clear">
  <span>Linear color Interpolation <br></span>
</div>
<div id="color-diverge" class="clear">
  <span>Linear color Interpolaton <br></span>
</div>
<div class="control-group clear">
    <button onclick="render(data, divergingScale(5), '#color-diverge')">Pivot at 5</button>
    <button onclick="render(data, divergingScale(10), '#color-diverge')">Pivot at 10</button>
    <button onclick="render(data, divergingScale(15), '#color-diverge')">Pivot at 15</button>
    <button onclick="render(data, divergingScale(20), '#color-diverge')">Pivot at 20</button>
</div>
</body>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
 var max=21, data = [];
 var colorScale = d3.scale.linear().domain([0,max]).range(["white","#4169e1"]);
 function divergingScale(pivot) {
  var divergingColorScale = d3.scale.linear().domain([0,pivot,max]).range(["white","#4169e1","white"])
  return divergingColorScale;
 }
 for (var i=0;i<max;i++) data.push(i);
​
 function render(data,scale,selector) {
  var selection =  d3.select(selector).selectAll("div.cell").data(data);
  selection.enter()
    .append("div")
    .classed("cell",true)
    .append("div.test")
    .append("span");
  selection.data(data).exit().remove();
  selection.style("display","inline-block")
    .style("background-color",function(d){
      return scale(d);
    })
    .select("span").text(function(d,i){ return i;});
 }
 render(data,colorScale, "#color");
 render(data,divergingScale(5),"#color-diverge");
</script>
​
​
    