nick34992
3/2/2017 - 9:31 AM

D3byEX 5.7: Categorical / Ordinal Colors (Adapted to D3.js v4)

D3byEX 5.7: Categorical / Ordinal Colors (Adapted to D3.js v4)

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <meta charset=utf-8>
<head>
    <meta name="description"
          content="D3.js v4, d3.scaleOrdinal(d3.schemeCategory10)
                   categorical ordinal colors" />
</head>
<body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <script>
        var data = d3.range(0, 9);
        // ordinal scale; categorical color scheme
        var colorScale = d3.scaleOrdinal(d3.schemeCategory10); // v4
        var svg = d3.select('body')
                    .append('svg')
                    .attrs({width: 200, height: 20}); // selection multi
        svg.selectAll('rect')
           .data(data)
           .enter()
           .append('rect')
           .attrs({fill: function(d) { return colorScale(d); }, 
                   x: function(d, i) { return i * 20 }, 
                   width: 20, height: 20});
    </script>
</body>
</html>