How to Specify Colors for the Legend

Question

This chart I am using automatically gives colors to the legend I have created but what if I want to specify which colors should be part of a specific key or value. Example, A should be green and B should be orange.

// select the svg area
var SVG = d3.select("#my_dataviz4")

// create a list of keys
var keys = ["A", "B", "C", "D"]

// Usually you have a color scale in your chart already
var color = d3.scaleOrdinal()
  .domain(keys)
  .range(d3.schemeSet1);

//var color = ["yellow", "red", "blue", "green"]

// Add one dot in the legend for each name.
var size = 20
SVG.selectAll("mydots")
  .data(keys)
  .enter()
  .append("rect")
  .attr("x", 100)
  .attr("y", function(d, i) {
    return 100 + i * (size + 5)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .attr("width", size)
  .attr("height", size)
  .style("fill", function(d) {
    return color(d)
  })

// Add one dot in the legend for each name.
SVG.selectAll("mylabels")
  .data(keys)
  .enter()
  .append("text")
  .attr("x", 100 + size * 1.2)
  .attr("y", function(d, i) {
    return 100 + i * (size + 5) + (size / 2)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .style("fill", function(d) {
    return color(d)
  })
  .text(function(d) {
    return d
  })
  .attr("text-anchor", "left")
  .style("alignment-baseline", "middle")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg id="my_dataviz4" width="550" height="500"></svg>

Answer 1

1. You can either override the scheme:

   d3.schemeSet1 = [ 'green', 'orange', 'cyan', 'purple' ];
   

2. Or you can pass in your own array:

   var customPalette = [ 'green', 'orange', 'cyan', 'purple' ];
   
   var color = d3.scaleOrdinal()
     .domain(keys)
     .range(customPalette);
   

---

Demo of first method

// Override the scheme?
d3.schemeSet1 = [ 'green', 'orange', 'cyan', 'purple' ];

// select the svg area
var SVG = d3.select("#my_dataviz4")

// create a list of keys
var keys = ["A", "B", "C", "D"]

// Usually you have a color scale in your chart already
var color = d3.scaleOrdinal()
  .domain(keys)
  .range(d3.schemeSet1); // !! Or pass yourn own array !!

//var color = ["yellow", "red", "blue", "green"]

// Add one dot in the legend for each name.
var size = 20
SVG.selectAll("mydots")
  .data(keys)
  .enter()
  .append("rect")
  .attr("x", 100)
  .attr("y", function(d, i) {
    return 100 + i * (size + 5)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .attr("width", size)
  .attr("height", size)
  .style("fill", function(d) {
    return color(d)
  })

// Add one dot in the legend for each name.
SVG.selectAll("mylabels")
  .data(keys)
  .enter()
  .append("text")
  .attr("x", 100 + size * 1.2)
  .attr("y", function(d, i) {
    return 100 + i * (size + 5) + (size / 2)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .style("fill", function(d) {
    return color(d)
  })
  .text(function(d) {
    return d
  })
  .attr("text-anchor", "left")
  .style("alignment-baseline", "middle")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg id="my_dataviz4" width="550" height="500"></svg>