| license: MIT | |
| height: 1400 | |
| border: yes |
The example illustrates the categorical color schemes (n=37) defined in g3-utils package.
To use these color schemes
<!-- D3 and G3-utils libraries -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-utils.min.js"></script>To get the list of color palettes,
var all_color_names = g3utils.listPalettes();To get the colors of a specific color palette,
var colors = g3utils.getPalette("darjeeling2");| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Color schemes of g3utils.js</title> | |
| <style> | |
| .color-name { | |
| font-size: 14px; | |
| fill: #2d2d2d; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id="container"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-utils.min.js"></script> | |
| <script> | |
| var width = 660, | |
| block_w = 20, // width of color block | |
| name_w = 150, // width of color name tag | |
| section_interval = 8, // interval between color name tag and color block section | |
| block_interval = 1, // interval between color blocks | |
| line_interval = 16, // distince between color block lines | |
| margin = {l: 20, t: 20, r: 20, b: 20}; | |
| var all_color_names = g3utils.listPalettes().sort(); // sorted names of color schemes | |
| var cur_x, cur_y = margin.t - line_interval - block_w, cur_colors, color_blocks; | |
| var svg = d3.select("#container"); | |
| all_color_names.forEach(function (_name) { | |
| cur_x = name_w + margin.l; | |
| cur_y += line_interval + block_w; | |
| cur_colors = g3utils.getPalette(_name); | |
| _name = _name + " (n=" + cur_colors.length + ")"; | |
| svg.append("text") | |
| .attr("x", cur_x).attr("y", cur_y + block_w / 2) | |
| .attr("text-anchor", "end").attr("dy", ".3em").attr("class", "color-name") | |
| .text(_name); | |
| cur_x += section_interval - block_interval; | |
| // add color blocks | |
| cur_colors.forEach(function (_color) { | |
| var _block = svg.append("rect") | |
| .attr("x", function () { | |
| if (cur_x + block_w + block_interval > width - margin.r) { | |
| // new line | |
| cur_x = name_w + margin.l + section_interval + block_w; | |
| cur_y += block_w + line_interval; | |
| } else { | |
| cur_x += block_interval + block_w; | |
| } | |
| return cur_x - block_w; | |
| }) | |
| .attr("y", cur_y) | |
| .attr("width", block_w).attr("height", block_w) | |
| .attr("stroke", "#4d4d4d").style("stroke-width", 0.5) | |
| .attr("fill", _color); | |
| var _color_name_t = svg.append("text") | |
| .attr("x", cur_x - block_w / 2).attr("y", cur_y) | |
| .attr("text-anchor", "middle").attr("dy", "-0.2em") | |
| .attr("font-size", "12px").attr("font-weight", "bold") | |
| .attr("visibility", "hidden").attr("fill", _color) | |
| .text(_color); | |
| var _color_name_b = svg.append("text") | |
| .attr("x", cur_x - block_w / 2).attr("y", cur_y + block_w) | |
| .attr("text-anchor", "middle").attr("dy", "1em") | |
| .style("font-size", "12px").style("font-weight", "bold") | |
| .style("visibility", "hidden").style("fill", "black") | |
| .text(_color); | |
| _block | |
| .on("mouseover", function () { | |
| _color_name_t.style("visibility", "visible"); | |
| _color_name_b.style("visibility", "visible"); | |
| }) | |
| .on("mouseout", function () { | |
| _color_name_t.style("visibility", "hidden"); | |
| _color_name_b.style("visibility", "hidden"); | |
| }); | |
| }); | |
| }); | |
| cur_y += margin.b + block_w; | |
| svg.attr("height", cur_y).attr("width", width); | |
| </script> | |
| </body> | |
| </html> |
