5 SUMUP Escalas en D3 para visualización de datos

• Este tema se centra en el uso de escalas en D3 para mejorar las visualizaciones.
• Se exploran conceptos como escalas lineales, ordinales y logarítmicas.
• Se explica cómo crear escalas y la importancia de normalizar los valores para una visualización veraz.
• Se completa el gráfico con la adición de ejes, teniendo en cuenta la percepción humana en el diseño.

Escalas en D3

• Las escalas en D3 son funciones que relacionan un dominio de entrada con un rango de salida.
• La normalización de valores mediante escalas da veracidad a la visualización al conectar con el usuario y transmitir lo que se quiere decir.
• Es importante practicar y realizar cambios en el código para entender la lógica de D3.

Escala no ordinal o logarítmica

• Las escalas lineares no ordinales o logarítmicas son las más comunes y fáciles de comprender.
• El input range se refiere a los valores de entrada, que no se pueden limitar al ser la fuente de datos.
• El output range son los límites definidos para mostrar los datos, permitiendo diseñar la visualización.
• El proceso de normalización distribuye los datos entre valores de 0 a 1 para trabajar con la misma escala.
• Se crea una escala lienal en D3 con la función d3.scale.linear().
• Para que la función sea útil, se deben definir el input domain y el output range.
• Se pueden anidar las funciones domain([100, 500]) y range([10, 350]) en una sola sentencia para simplificar el código.

Scatter plot

• El input domain es definido por los datos de entrada o data source.
• Se introducen las funciones d3.min() y d3.max() para calcular los valores mínimo y máximo del dataset.
• La función para encontrar los máximos de las "y" en un dataset sería d3.max(dataset, function(d) { return d[1]; });.
• Para el eje X, se crea una función llamada xScale con d3.scale.linear, estableciendo el dominio de 0 al valor máximo del dataset y el rango de 0 a w.
• En la función, se asegura que 0 en el input domain corresponda a 0 en el output range.
• El width del SVG es determinado por la variable w.
• Similarmente, se define la función yScale para el eje Y, ajustando el dominio y rango según los datos y el height del SVG (h).
• Para corregir la orientación de los valores en el eje Y, se modifica la función yScale para invertir el rango: .range([h, 0]);.
• El código resultante genera una gráfica escalada automáticamente en función de los datos presentes en el dataset.
• Es posible ajustar visualmente los márgenes de la gráfica mediante los valores marginx y marginy.

Ejes

• Para dibujar un elemento no es demasiado complicado
• Se trabaja con una estructura simple de datos: var xAxis = d3.svg.axis();.
• Se definen los valores del eje haciendo referencia a la escala: xAxis.scale(xScale);.
• Se utiliza la función svg.append("g").call(xAxis); para dibujar el eje.
• Se puede arreglar la apariencia del eje utilizando CSS, asignando la clase "axis" al elemento g.
• Se resuelve el problema de la posición del eje mediante la transición translate(0," + (h - padding) + ")".
• Es posible limitar el número de divisiones en el eje X utilizando la función ticks(5).
• Para definir el eje Y, se utiliza var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);, y se traslada con translate(" + padding + ",0)".

Escala ordinal

• Las escalas ordinales distribuyen los datos en categorías en lugar de una evolución lineal.
• Son ejemplos de categorías las notas al estilo americano (B, A, AA+) y las categorías en cuestionarios.
• Se definen las escalas xScale e yScale para un gráfico de barras, utilizando d3.scale.ordinal() y d3.scale.linear() respectivamente.
• En las barras y en el texto, se modifican los atributos "x" e "y" para reflejar las escalas ordinales y lineales.
• Se garantiza que el orden de las barras refleje el orden del array de datos fuente.
• Se pueden generar dominios como .domain(["Totalmente en desacuerdo", "desacuerdo", "neutro", "de acuerdo", "Totalmente de acuerdo"]).
• Las escalas ordinales soportan las funciones range banding, que utilizan valores discretos determinados con anterioridad.
• Se utiliza la función rangeBands para dividir la escala en bandas basadas en la longitud del dominio.
• Se incluye un espacio entre las bandas en la visualización para mayor claridad estética con la función rangeRoundBars.
• La ventaja de las escalas ordinales frente a las lineales es su mayor sencillez matemática.
• En lugar de utilizar attr("width", w / dataset.length - barPadding), se utiliza attr("width", xScale.rangeBand()).