D3 Examples - ordinal scales ref

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
    font-family: "helvetica";
    }
​
    .cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
    }
​
    .clear {
    clear: both;
    }
</style>
</head>
​
<body>
<div id="alphabet" class="clear"> 
    <span>Ordinal Scale with Alphabet<br></span> 
    <span>Mapping [1..10] to ["a".."j"]<br></span> 
</div> 
<div id="category10" class="clear"> 
    <span>Ordinal Color Scale Category 10<br></span> 
    <span>Mapping [1..10] to category 10 colors<br></span> 
</div> 
<div id="category20" class="clear"> 
    <span>Ordinal Color Scale Category 20<br></span> 
    <span>Mapping [1..10] to category 20 colors<br></span> 
</div> 
<div id="category20b" class="clear"> 
    <span>Ordinal Color Scale Category 20b<br></span> 
    <span>Mapping [1..10] to category 20b colors<br></span> 
</div> 
<div id="category20c" class="clear"> 
    <span>Ordinal Color Scale Category 20c<br></span> 
    <span>Mapping [1..10] to category 20c colors<br></span> 
</div> 
 
<script type="text/javascript"> 
    var max = 10, data = []; 
 
    for (var i = 1; i <= max; ++i) data.push(i); 
     
    var alphabet = d3.scaleOrdinal() 
        .domain(data) 
        .range(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]); 
         
    function render(data, scale, selector) { 
        var cells  = d3.select(selector).selectAll("div.cell") 
                .data(data); 
 
        cells.enter() 
                .append("div") 
                    .classed("cell", true) 
                    .style("display", "inline-block") 
                    .style("background-color", function(d){  
                        return scale(d).indexOf("#") >=0 ?  
                                             scale(d) : "pink"; 
                    }) 
                    .text(function (d) { 
                        return scale(d); 
                    }); 
    } 
 
    render(data, alphabet, "#alphabet"); 
render(data, d3.scaleOrdinal(d3.schemeCategory10),  
                                      "#category10"); 
render(data, d3.scaleOrdinal(d3.schemeCategory20),  
                                      "#category20"); 
render(data, d3.scaleOrdinal(d3.schemeCategory20b),  
                                      "#category20b"); 
render(data, d3.scaleOrdinal(d3.schemeCategory20c),  
                                      "#category20c");  
</script>
</body>
​
    