D3 color linear scales

Etiquetas: javascript   d3   front-end   dataviz   color scales

Dentro de las bondades de d3.js, además de generar escalas lineales con valores númericos, también nos es posible generar escalas de colores, que nos ayudarán a visualizar los valores de los datos que vamos a representar gráficamente.

Escala lineal

var data = [4, 5, 9, 11, 16, 18, 27, 31, 32, 58, 59, 100, 225];
var colors = ["#D0BBEF", "#583A5E"];
var colorScaleLinear = d3
  .scaleLinear()
  .range(colors)
  .domain(d3.extent(data));

d3.select("#linear-scale")
  .selectAll(".rect")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => `${widthScale(d)}%`)
  .style("height", "25px")
  .style("margin-bottom", "7px")
  .style("background-color", d => colorScaleLinear(d));

Escala lineal con punto de quiebre en la media (promedio)

var data = [4, 5, 9, 11, 16, 18, 27, 31, 32, 58, 59, 100, 225];
var colors = ["#D0BBEF", "#795DA0", "#583A5E"];
var colorScaleLinearMean = d3
  .scaleLinear()
  .range([colors[0], colors[4], colors[9]])
  .domain([d3.min(data), d3.mean(data), d3.max(data)]); // [4, 45.76923076923077, 225]

d3.select("#linear-scale-mean")
  .selectAll(".rect")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => `${widthScale(d)}%`)
  .style("height", "25px")
  .style("margin-bottom", "7px")
  .style("background-color", d => colorScaleLinearMean(d));

Escala lineal con punto de quiebre en la mediana

var data = [4, 5, 9, 11, 16, 18, 27, 31, 32, 58, 59, 100, 225];
var colors = ["#D0BBEF", "#795DA0", "#583A5E"];
var colorScaleLinearMedian = d3
  .scaleLinear()
  .range([colors[0], colors[4], colors[9]])
  .domain([d3.min(data), d3.median(data), d3.max(data)]); // [4, 27, 225]

d3.select("#linear-scale-median")
  .selectAll(".rect")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => `${widthScale(d)}%`)
  .style("height", "25px")
  .style("margin-bottom", "7px")
  .style("background-color", d => colorScaleLinearMedian(d));

Escala lineal con dominio cuantizado

Color scale

https://hihayk.github.io/scale/#7/3/47/58/-74/-35/33/-14/806FC1/128/111/193

var data = [4, 5, 9, 11, 16, 18, 27, 31, 32, 58, 59, 100, 225];
var colors = [
  "#583A5E",
  "#63436E",
  "#6C4C7E",
  "#73558F",
  "#795DA0",
  "#7D66B0",
  "#806FC1",
  "#8077D2",
  "#AA98E2",
  "#D0BBEF"
].reverse();
var n = 10;
var quantiles = d3.range(n).map(d => {
  return d3.quantile(data, d / (n - 1));
});
// [4, 6.333333333333333, 10.333333333333332, 16, 20.999999999999996,
// 29.666666666666668, 32, 58.333333333333336, 86.33333333333331, 225]
var colorScaleQuantiles = d3
  .scaleLinear()
  .range(colors)
  .domain(quantiles);

d3.select("#linear-scale-quantiles")
  .selectAll(".rect")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => `${widthScale(d)}%`)
  .style("height", "25px")
  .style("margin-bottom", "7px")
  .style("background-color", d => colorScaleQuantiles(d));

Comparación

Blanca Azucena
López Garduño
CS Engineer. Software developer. I like music, drawing, cooking and making DIY stuff. I don't like horror movies

Contacto


Acerca de

Decidí a darle vida a este pequeño espacio con la finalidad de compartir detalles relacionados al desarrollo de software y visualización de datos. Tal vez juntos podamos seguir expandiendo lo que sabemos y aportar nuestro granito de arena.