5 D3JS

• D3.js facilita el dibujo de formas e interacción con colores para visualizar datos
• El foco está en el uso de escalas para manipulación de datos.
• Destaca la importancia de escalar imágenes y normalizar valores para asegurar la veracidad de la visualización y conectar con el usuario.
• Cubre la creación de ejes para completar los gráficos, algo que previamente se había omitido.
• La percepción humana influye en como las visualizaciones son interpretadas, por lo tanto escalas incorrectas llevarán a conclusiones erróneas.

Escalas no Ordinales o Logarítmicas

• Se priorizan las escalas lineales no ordinales o logarítmicas por su simplicidad.

• Los conceptos clave son:

  • Input range: se refiere a los valores de entrada, que son la fuente de datos del array.
  • Output range: se refiere a los límites definidos para mostrar los datos visualmente.

• El "output range" permite mostrar los datos visualmente.

• El proceso de normalización es distribuir los datos entre 0 y 1.

• Para crear una escala en D3:

  • var scale = d3.scale.linear();
  • para definir valores realmente útiles es necesario definir ambos valores para nuestro array scale.domain([100, 500]); scale.range([10, 350]);

• Para simplificar, todo se puede hacer en una única sentencia: var scale = d3.scale.linear().domain([100, 500]).range([10, 350]);

• Para evitar definir manualmente el input domain, se recomiendan las funciones: d3.min() d3.max()

• Define la función de máximo para el eje X:

var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);

• Asegura que 0 en el input domain corresponda a 0 en el output range.

• Es importante que el "range" sea realmente relevante para el eje.

• Ajustar la función yScale para invertir la posición de los valores en el eje Y, de modo que los valores más altos se muestren en la parte superior del gráfico:

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([0, h]);

• Para evitar que los círculos aparezcan cortados, hay que ajustar los márgenes de los gráficos.

• Aplicar márgenes al rango:

var marginx = 30;
var marginy = 30;

var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0+marginx, w-marginx]);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h-marginy, 0+marginy]);

Ejes

• Dibujar un eje en D3:

  • var xAxis = d3.svg.axis();
  • Para definir los valores, se debe pasar la escala:
  • xAxis.scale(xScale);

• Para juntar todo:

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

• Para dibujar el eje, es necesario llamar a una función:

svg.append("g")
    .call(xAxis);

• Para estilizar el eje con CSS, se asigna el atributo class al elemento g y se define una clase CSS llamada axis.

svg.append("g")
    .attr("class", "axis") //Asignar la clase “axis"
    .call(xAxis);

• Para resolver el problema de que el eje aparezca abajo, utilizar la siguiente linea:

.attr("transform", "translate(0," + (h - padding) + ")")

• Mueve el eje colocándolo en x=0 y ajustando su posición en el eje y a la altura del svg menos un padding.

• Para limitar el número de divisiones en el eje X, se usa la función ticks(5) para mostrar solo cinco divisiones (0,100,200,300,400).

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5); // # de sticks

• Código para definir el eje Y:

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

Escala Ordinal

• Las escalas ordinales distribuyen los datos en categorías en lugar de seguir una distribución continua.

• En lugar de una evolución lineal, las escalas ordinales trabajan con categorías.

• Para crear una gráfica de barras, se definen las siguientes variables y escalas:

var w = 600;
var h = 250;

var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0, h]);

• Modificar los ejes X e Y:

   .attr("x", function(d, i) {
        return xScale(i);
   })
   .attr("y", function(d) {
        return h - yScale(d);
   })
   .attr("width", xScale.rangeBand())
   .attr("height", function(d) {
        return yScale(d);
   })

• Hay que definir el dominio y utilizar la función range d3.range (dataset.length)

• Para dividir la escala en el dominio: (w - 0) / xScale.domain().length

• Divide la escala en bandas basada en la longitud del dominio.

• Además se puede incluir un pequeño espacio entre bandas para mejorar la estética con la función rangeRoundBars.

.rangeRoundBands([0, w], 0.05);

• La función range banding soporta funciones continuas siendo los valores discretos y los valores determinados con anterioridad.