How can I use Javascript / D3 to create a color scale mapping 5 hex colors to 17 colors?

Question

How can I use Javascript / D3 to create a color scale mapping 5 hex colors to 17 colors?

If I start with the array of hexadecimal colors

['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000']

in JavaScript, I can achieve the color scale I desire by adjusting the steps on the scales website from 5 to 17. This simplifies the process as I can use 6-hex hex values.

Currently, my method involves converting hex values to RGB values and then iterating through them in a cumbersome manner. Here is a snippet of what I'm doing, disregarding the `green` variables:


    green0pct = { r: 17, g: 71, b: 255 };
    green7p5pct = { r: 134, g: 216, b: 255 };
    green15pct = { r: 252, g: 233, b: 70 };
    green22p5pct = { r: 255, g: 125, b: 17 };
    green30pct = { r: 243, g: 0, b: 0 };

    for (let j = 0; j <= 30; j++) {
        if (j % 2 === 0) {
            if (j < 7.5) {
                newR = green0pct.r - (j * (green0pct.r - green7p5pct.r) / 7.5);//
                newG = green0pct.g - (j * (green0pct.g - green7p5pct.g) / 7.5);
                newB = green0pct.b - (j * (green0pct.b - green7p5pct.b) / 7.5);
            } else if (j < 15) {
                newR = green7p5pct.r - ((j - 7.5) * (green7p5pct.r - green15pct.r) / 7.5);
                newG = green7p5pct.g - ((j - 7.5) * (green7p5pct.g - green15pct.g) / 7.5);
                newB = green7p5pct.b - ((j - 7.5) * (green7p5pct.b - green15pct.b) / 7.5);
            } else if (j < 22.5) {
                newR = green15pct.r - ((j - 15) * (green15pct.r - green22p5pct.r) / 7.5);
                newG = green15pct.g - ((j - 15) * (green15pct.g - green22p5pct.g) / 7.5);
                newB = green15pct.b - ((j - 15) * (green15pct.b - green22p5pct.b) / 7.5);
            } else {
                newR = green22p5pct.r - ((j - 22.5) * (green22p5pct.r - green30pct.r) / 7.5);
                newG = green22p5pct.g - ((j - 22.5) * (green22p5pct.g - green30pct.g) / 7.5);
                newB = green22p5pct.b - ((j - 22.5) * (green22p5pct.b - green30pct.b) / 7.5);
            }
            displayPct = playerOrTeam === 'Team' ? (j - 15) / 2 : j - 15;
            greenScale.push({ text: `${displayPct}%`, col: `rgb(${newR},${newG},${newB})` });
        }}

javascript d3.js colors

Answer 1

Answer №1

To create a gradient effect, consider utilizing a d3-interpolator:

d3.interpolateRgbBasis(colors) <>

This function generates a smooth transition of colors using a B-spline interpolator through the specified array of colors. These colors are then converted to RGB color space. The interpolator automatically calculates control points so that the output at 0 is colors[0] and at 1 is colors[colors.length - 1]. (source)

To start, you can create a new set of n colors using an array of colors and the interpolator as shown below:

// Initial colors:
var colors = ['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'];

// Create an interpolator:
var interpolate = d3.interpolateRgbBasis(colors);

// Generate 17 new colors: 
var n = 17;
var newColors = d3.range(n).map(function(d) {
  return interpolate(d/(n-1));  // d/(n-1) ranges from 0 to 1
})

Here's an example of how this can be executed:

var colors = ['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'];
var interpolate = d3.interpolateRgbBasis(colors);

var n = 17;
var newColors = d3.range(n).map(function(d) {
  return interpolate(d/(n-1));
})

console.log(newColors);

d3.select("svg")
  .selectAll("rect")
  .data(newColors)
  .enter()
  .append("rect")
  .attr("fill", function(d) { return d; })
  .attr("width", 10)
  .attr("height",10)
  .attr("x", function(d,i) {
    return i*12;
  })
  .attr("y", 20);

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

Answer 2

To create a gradient effect, consider utilizing a d3-interpolator:

d3.interpolateRgbBasis(colors) <>

This function generates a smooth transition of colors using a B-spline interpolator through the specified array of colors. These colors are then converted to RGB color space. The interpolator automatically calculates control points so that the output at 0 is colors[0] and at 1 is colors[colors.length - 1]. (source)

To start, you can create a new set of n colors using an array of colors and the interpolator as shown below:

// Initial colors:
var colors = ['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'];

// Create an interpolator:
var interpolate = d3.interpolateRgbBasis(colors);

// Generate 17 new colors: 
var n = 17;
var newColors = d3.range(n).map(function(d) {
  return interpolate(d/(n-1));  // d/(n-1) ranges from 0 to 1
})

Here's an example of how this can be executed:

var colors = ['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'];
var interpolate = d3.interpolateRgbBasis(colors);

var n = 17;
var newColors = d3.range(n).map(function(d) {
  return interpolate(d/(n-1));
})

console.log(newColors);

d3.select("svg")
  .selectAll("rect")
  .data(newColors)
  .enter()
  .append("rect")
  .attr("fill", function(d) { return d; })
  .attr("width", 10)
  .attr("height",10)
  .attr("x", function(d,i) {
    return i*12;
  })
  .attr("y", 20);

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

How can I use Javascript / D3 to create a color scale mapping 5 hex colors to 17 colors?

Answer №1

d3.interpolateRgbBasis(colors) <>

Similar questions

Steps for dynamically loading the content of a Bootstrap 4 Modal

ClassSerializerInterceptor in NestJS does not show the _id field

Exploring the use of single character alternation in regex with Webstorm's Javascript Regex functionality

How to arrange elements at the same level in Node.js using sequelize-hierarchy?

Steps to eliminate a choice from the MUI Datagrid Column Show/Hide feature

Ways to remove all attributes from a JSON data type

Reposition the initial element to the end of an array using setInterval() within a React component

Ways to safeguard your API endpoint

Ways to dynamically update a Vuetify 3 element's placeholder text?

ESLint has detected an unexpected use of an underscore in the variable name "__place". Avoid using dangling underscores in variable names to follow best coding practices

In Vue firebase, ensure that the prop is only passed down after it has been

Having trouble loading background color or image in three.js

What causes the function execution to not be delayed by setTimeout?

Is there a way to make this variable function properly within the google.maps.LatLng() method?

Issue encountered: Unable to fetch username and password from request

Internet Explorer displaying incorrect formatting for HTML CSS tables

Inaccurate Guild Member Filtering

What is the best way to handle an AJAX request within an if-else statement?

Implement AJAX in order to circumvent fees from Google Maps and display maps exclusively upon user interaction by clicking a designated button

Difficulty with AngularJS pagination and encountering errors when trying to read the property 'slice' of an undefined value