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
.