| license: mit |
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.
| colour | |
| aliceblue | |
| antiquewhite | |
| aqua | |
| aquamarine | |
| azure | |
| beige | |
| bisque | |
| black | |
| blanchedalmond | |
| blue | |
| blueviolet | |
| brown | |
| burlywood | |
| cadetblue | |
| chartreuse | |
| chocolate | |
| coral | |
| cornflowerblue | |
| cornsilk | |
| crimson | |
| cyan | |
| darkblue | |
| darkcyan | |
| darkgoldenrod | |
| darkgray | |
| darkgreen | |
| darkgrey | |
| darkkhaki | |
| darkmagenta | |
| darkolivegreen | |
| darkorange | |
| darkorchid | |
| darkred | |
| darksalmon | |
| darkseagreen | |
| darkslateblue | |
| darkslategray | |
| darkslategrey | |
| darkturquoise | |
| darkviolet | |
| deeppink | |
| deepskyblue | |
| dimgray | |
| dimgrey | |
| dodgerblue | |
| firebrick | |
| floralwhite | |
| forestgreen | |
| fuchsia | |
| gainsboro | |
| ghostwhite | |
| gold | |
| goldenrod | |
| gray | |
| green | |
| greenyellow | |
| grey | |
| honeydew | |
| hotpink | |
| indianred | |
| indigo | |
| ivory | |
| khaki | |
| lavender | |
| lavenderblush | |
| lawngreen | |
| lemonchiffon | |
| lightblue | |
| lightcoral | |
| lightcyan | |
| lightgoldenrodyellow | |
| lightgray | |
| lightgreen | |
| lightgrey | |
| lightpink | |
| lightsalmon | |
| lightseagreen | |
| lightskyblue | |
| lightslategray | |
| lightslategrey | |
| lightsteelblue | |
| lightyellow | |
| lime | |
| limegreen | |
| linen | |
| magenta | |
| maroon | |
| mediumaquamarine | |
| mediumblue | |
| mediumorchid | |
| mediumpurple | |
| mediumseagreen | |
| mediumslateblue | |
| mediumspringgreen | |
| mediumturquoise | |
| mediumvioletred | |
| midnightblue | |
| mintcream | |
| mistyrose | |
| moccasin | |
| navajowhite | |
| navy | |
| oldlace | |
| olive | |
| olivedrab | |
| orange | |
| orangered | |
| orchid | |
| palegoldenrod | |
| palegreen | |
| paleturquoise | |
| palevioletred | |
| papayawhip | |
| peachpuff | |
| peru | |
| pink | |
| plum | |
| powderblue | |
| purple | |
| red | |
| rosybrown | |
| royalblue | |
| saddlebrown | |
| salmon | |
| sandybrown | |
| seagreen | |
| seashell | |
| sienna | |
| silver | |
| skyblue | |
| slateblue | |
| slategray | |
| slategrey | |
| snow | |
| springgreen | |
| steelblue | |
| tan | |
| teal | |
| thistle | |
| tomato | |
| turquoise | |
| violet | |
| wheat | |
| white | |
| whitesmoke | |
| yellow | |
| yellowgreen |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Colours Page</title> | |
| <style> | |
| .bs-sidebar .nav > .active > ul { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| text.shadow { | |
| stroke: white; | |
| stroke-width: 2.3px; | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
| <script> | |
| var width = 174; | |
| var height = 32; | |
| var border = 10; | |
| 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> |
