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

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js