Escalas de colores

En los siguientes ejemplos vamos a coger una escala que empieza y termina en los colores mostrados abajo (, ). Vamos a mapearla como una escala lineal en D3 y aplicaremos diferentes interpolaciones de color.



El código común a todas las escalas es el siguiente:

var width = 700,
    height = 175,
    lenght = 20;  // Cantidad de colores en cada barra
var unit = width/lenght;  // Ancho de cada color

/**
 * Renderiza una barra de colores en un contenedor SVG
 *   usando un interpolador de D3.
 *
 * @param {string} svgId - Identificador del elemento SVG
 *   donde será renderizada la barra de colores.
 * @param {object} interpolator - Interpolador D3 usado
 *   para construir la escala.
 **/
var renderColorsBar = function(svgId, interpolator) {
    var colorScale = d3.scaleLinear()
        .domain([1, lenght])
        .interpolate(interpolator)
        .range([d3.rgb(color1), d3.rgb(color2)]);

    for (var i = 0; i < lenght; i++) {
       d3.select(svgId)
          .attr("height", height)
          .attr("width", width)
        .append("rect")
          .attr("x",  i*unit )
          .attr("y", 0)
          .attr("width", unit)
          .attr("height", 200)
          .style("fill", colorScale(i));
    }
}

Interpoladores desde d3-interpolate

d3.interpolateRgb(a, b)

Devuelve un interpolador en el espacio de color RGB entre los colores a y b con un parámetro gamma configurable (1 si no es especificado).

Podemos cambiar el parámetro gamma de un interpolador con la función interpolator.gamma(x).

Input

<svg id="colors-interpolate-rgb-gamma"></div>

<script>
  var interpolator = d3.interpolateRgb.gamma(2);
  renderColorsBar("#colors-interpolate-rgb-gamma", interpolator);
</script>

Output

d3.interpolateHsl(a, b)

Devuelve un interpolador en el espacio de color HSL entre los colores a y b.

d3.interpolateLab(a, b)

Devuelve un interpolador en el espacio de color Lab entre los colores a y b.