SVG named colours grouped.

This is an example of the range of available named colours that can be used in d3.js. In this example I have used colour groupings that keep similar colours together. These are not quite all the available colours, but there's only a few missing.

Advice can be found on-line that not all browsers will render them correctly. I have tested with Chrome and Firefox and found them suitably visible.

These are used as references and described in the book D3 Tips and Tricks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

<title>Colours Page</title>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

var container = d3.select("body");

d3.csv("colours2.csv", function(error, data) {

// ****************  Individual colours  *********************
    data.forEach(function(d) { 
        
        // create the SVG area for the rectangle
        svgArea = container.append("svg")
            .attr("width", width + (2*border))    
            .attr("height", height + (2*border));
            
        // Add in the rectangle
        svgArea.append("rect")
            .attr("transform", "translate("+border+","+border+")")
            .attr("height", height)
            .attr("width", width)
            .style("fill", d.colour)
            .attr("rx", 5)
            .attr("ry", 5);

// Add in the white background for the label
        svgArea.append("text")
            .attr("transform", 
                  "translate("+(border+(width/2))+","+(border+10)+")")
            .attr("dy", ".71em")
            .attr("text-anchor", "middle")
            .style("fill", "black")
            .style("font-weight", "bold")
            .attr("class", "shadow")
            .text(d.colour);

// Add in the label
        svgArea.append("text")
            .attr("transform", 
                  "translate("+(border+(width/2))+","+(border+10)+")")
            .attr("dy", ".71em")
            .attr("text-anchor", "middle")
            .style("fill", "black")
            .style("font-weight", "bold")
            .text(d.colour); 
    });
});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js