4 HVID SUM UP Escalas lineales no ordinales o logarítmicas en D3

• Se explica cómo dibujar en D3, incluyendo formas y colores para representar la intensidad de los valores.
• El objetivo es avanzar en el conocimiento utilizando escalas.
• Mike Bostock define las escalas como funciones que relacionan un dominio de entrada con un rango de salida.
• Normalizar los valores al escalar una imagen proporciona veracidad a la visualización.
• Se plantea la importancia de conectar con el usuario al escalar, para transmitir un mensaje claro y convincente.
• Se completa el gráfico con los ejes.
• La percepción humana es clave en la visualización; una escala incorrecta puede validar hipótesis incorrectas.

Escala no ordinal o logarítmica

• Se enfoca en escalas lineales no ordinales o logarítmicas.
• El ejemplo de manzanas y píxeles se utiliza para ilustrar las escalas.
• Input range se refiere a los valores de entrada, determinados por la fuente de datos.
• Output range se refiere a los límites establecidos para mostrar los datos en la visualización.
• La normalización distribuye los datos entre valores de 0 a 1.
• Se define una función en D3 para crear una escala lineal: d3.scale.linear().
• Para que la función sea útil, se deben definir el input domain y el output range.

Anidar las funciones

• Se pueden anidar las funciones para hacerlo en una única sentencia.
• Se debe definir el input domain de los datos de entrada (data source).
• Se presentan las funciones d3.min() y d3.max() para determinar los valores mínimo y máximo en un dataset.
• Se ejemplifica cómo extraer el valor máximo de los subarrays.
• Se crea una función para el eje X utilizando d3.scale.linear() y definiendo el domain y el range.
• El mínimo del eje se configura a 0 directamente, pero también se puede calcular con la función.
• El código del scatter plot se modifica para reflejar estos cambios.
• Se ajusta la función yScale para invertir la orientación del eje Y.

Ajustes Finales

• Se ajusta la función yScale para mostrar los valores más altos en la parte superior y los valores más bajos en la parte inferior del gráfico.
• El código final resulta en una gráfica perfectamente escalada y ajustada automáticamente a los datos.
• Se observa que algunos círculos aparecen cortados, por lo que se deben ajustar los márgenes.
• Se definen los valores del margen para los ejes X e Y.
• Se aplican los márgenes al range de las escalas X e Y para evitar que los elementos se corten.

Ejes

• Es recomendable resolver el ejercicio anterior antes de empezar.
• En D3, dibujar un elemento no es difícil.
• Se trabaja con una estructura simple de datos para crear un eje: d3.svg.axis().
• Se define la escala del eje y se especifica su orientación (bottom).
• Para dibujar el eje, se añade un elemento "g" al SVG y se llama a la función xAxis.
• Se muestra cómo el eje X aparece en la parte superior del gráfico.
• Se puede arreglar la apariencia del eje utilizando CSS, asignando la clase "axis" al elemento "g".

Mas ajustes

• Los elementos CSS para SVG no siempre son los mismos que en HTML.
• Se aplica una transición al elemento para que el eje aparezca en la parte inferior del gráfico.
• Se mueve el elemento en el eje Y para colocar el eje debajo del gráfico.
• Se limita el número de divisiones en el eje X utilizando la función ticks(5).
• Se define el eje Y utilizando d3.svg.axis() y se establece su orientación a la izquierda: orient("left").
• Se añaden la clase "axis" y una transición para posicionar el eje Y correctamente.

Escala ordinal

• Las escalas ordinales distribuyen los datos según categorías en lugar de una evolución lineal.
• Se dan ejemplos de escalas ordinales, como notas al estilo americano o categorías en cuestionarios.
• Para ilustrarlo, se empieza con un gráfico de bar charts.
• Se definen las variables y escalas xScale e yScale.
• Se recuerda modificar las coordenadas X e Y en las barras.
• Se asegura de que el orden de las barras corresponda al orden en el que está definido.
• Una de las cosas positivas que tienen las escalas ordinales es que soportan las funciones range banding
• A diferencia de las escalas lineales, en las ordinales se utilizan valores discretos determinados con anterioridad.
• Se puede utilizar la función rangeBands para dividir la escala en bandas basada en la longitud del dominio.
• El código de visualización incluye un pequeño espacio entre las bandas para mejorar la claridad estética con rangeRoundBars.
• La ventaja de las escalas ordinales es su sencillez en comparación con las escalas lineales y las matemáticas facilitadas.