SVG colour names

This is an example of athe range of available named colours that can be used in d3.js. These are of couse the SVG named colours.

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("colours.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