d3.js
Haciendo robusto, responsivo y reutilizable (r3) para d3

Introducción

Gráfico de dispersión

Este ejemplo contiene más de 1000 líneas de código en total (demasiado para ser incrustado aquí). Por eso todo el código es accesible en http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (alternativamente alojado en https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Tenga en cuenta que bl.ocks.org usa iframe para ver el cambio de tamaño que tendrá que hacer clic en el botón abierto (esquina inferior derecha del iframe). Dado que hay una gran cantidad de código, se ha dividido en varios archivos y el segmento de código relevante será referencia tanto por nombre de archivo como por número de línea. Por favor abre este ejemplo a medida que avanzamos.

¿Qué hace un gráfico?

Hay varios componentes centrales que entran en cualquier gráfico completo; a saber, estos incluyen:

• título
• hachas
• etiquetas de ejes
• los datos

Hay otros aspectos que pueden incluirse según el gráfico, por ejemplo, una leyenda del gráfico. Sin embargo, muchos de estos elementos pueden ser evitados con información sobre herramientas. Por esa razón, hay elementos específicos de gráficos interactivos, por ejemplo, botones para cambiar entre datos.

Dado que el contenido de nuestro gráfico será interactivo, sería apropiado que el gráfico sea dinámico, por ejemplo, cambie el tamaño cuando cambie el tamaño de la ventana. SVG es escalable, por lo que podría permitir que su gráfico se amplíe manteniendo la perspectiva actual. Sin embargo, dependiendo de la perspectiva establecida, el gráfico puede ser demasiado pequeño para ser legible incluso si todavía hay suficiente espacio para el gráfico (por ejemplo, si el ancho es mayor que la altura). Por lo tanto, puede ser preferible simplemente volver a dibujar el gráfico en el tamaño restante.

Este ejemplo cubrirá cómo calcular dinámicamente la ubicación de los botones, títulos, ejes, etiquetas de ejes, así como también manejar conjuntos de datos de cantidades variables de datos.

Preparar

Configuración

Dado que nuestro objetivo es reutilizar el código, debemos crear un archivo de configuración que contenga opciones globales para aspectos de nuestro gráfico. Un ejemplo de este archivo de configuración es charts_configuration.json .

Si miramos este archivo, podemos ver que he incluido varios elementos que ya deberían tener un uso claro para cuando hagamos nuestro gráfico:

• archivos (almacena la cadena donde se guardan nuestros datos de gráficos)
• document_state (el botón seleccionado actualmente para nuestro gráfico)
• chart_ids (ID de html para los gráficos que haremos)
• svg (opciones para el svg, por ejemplo, tamaño)
• plot_attributes
  • título (establecer varios atributos de fuente)
  • información sobre herramientas (establecer varias propiedades de estilo de información sobre herramientas)
  • ejes (establecer varios atributos de fuente)
  • Botones (establecer varios atributos de fuente y estilo)
• parcelas
  • Dispersión (establezca varios aspectos de nuestro diagrama de dispersión, por ejemplo, radio del punto)
• colores (una paleta de colores específica para usar)

Funciones de ayuda

Además de configurar estos aspectos globales, necesitamos definir algunas funciones de ayuda. Estos se pueden encontrar en helpers.js

• ajax_json (carga archivos json de forma síncrona o asíncrona)
• keys (devuelve claves del objeto dado - equivalente a d3.keys ())
• parseNumber (un número general de parseNumber en caso de que no sepamos qué tipo o número es)
• typeofNumber (devuelve el tipo de número)

index.html

Por último deberíamos configurar nuestro archivo html. Para el propósito de este ejemplo, pondremos nuestro gráfico en una etiqueta de section donde la id coincide con la identificación proporcionada en el archivo de configuración (línea 37). Dado que los porcentajes solo funcionan si se pueden calcular a partir de su miembro principal, también incluimos algunos estilos básicos (líneas 19-35)

Haciendo nuestro diagrama de dispersión

Vamos a abrir make_scatter_chart.js . Ahora prestemos mucha atención a la línea 2, donde muchas de las variables más importantes están predefinidas:

• svg - d3 selección de svg del gráfico
• chart_group - d3 selección del grupo dentro del svg en el que se colocarán los datos
• lienzo - aspectos centrales del extracto svg para mayor comodidad
• márgenes - los márgenes que debemos tener en cuenta
• maxi_draw_space los valores x e y más grandes en los que podemos dibujar nuestros datos
• doc_state - el estado actual del documento si estamos usando botones (en este ejemplo estamos)

Es posible que haya notado que no incluimos el svg en el html. Por lo tanto, antes de que podamos hacer algo con nuestro gráfico, debemos agregar el svg a index.html si aún no existe. Esto se logra en el archivo make_svg.js mediante la función make_chart_svg . Al ver make_svg.js , vemos que usamos la función auxiliar parseNumber en la configuración del gráfico para el ancho y la altura de svg. Si el número es un flotante, hace que el ancho y la altura del svg sean proporcionales al ancho y la altura de su sección. Si el número es un entero, simplemente lo establecerá en esos enteros.

Las líneas 6 a 11 prueban, en efecto, si esta es la primera llamada o no y establece el chart_group (y el estado del documento si es la primera llamada).

Las líneas 14 a 15 extraen los datos seleccionados actualmente mediante el botón en el que se hizo clic; línea 16 establece data_extent . Mientras que d3 tiene una función para extraer la extensión de datos, es mi preferencia almacenar la extensión de datos en esta variable.

Las líneas 27 a 38 contienen la magia que configura nuestra gráfica al hacer los márgenes, los botones, el título y los ejes. Todos estos están determinados dinámicamente y pueden parecer un poco complejos, por lo que veremos cada uno a su vez.

make_margins (en make_margins.js)

Podemos ver que el objeto de márgenes toma en cuenta algún espacio a la izquierda, derecha, arriba y abajo del gráfico (x.left, x.right, y.top, y.bottom respectivamente), el título, los botones y los ejes

También vemos que los márgenes de los ejes se actualizan en la línea 21.

¿Por qué hacemos esto? Bueno, a menos que especifiquemos el número de marcas, la marca etiqueta el tamaño de marca y la fuente de la etiqueta, no podríamos calcular el tamaño que necesitan los ejes. Incluso entonces tendríamos que estimar el espacio entre las etiquetas de tick y las ticks. Por lo tanto, es más fácil hacer algunos ejes ficticios utilizando nuestros datos, ver qué tan grandes son los elementos svg correspondientes y luego devolver el tamaño.

En realidad, solo necesitamos el ancho del eje y y la altura del eje x, que es lo que se almacena en axes.y y axes.x.

Con nuestros márgenes predeterminados establecidos, luego calculamos max_drawing_space (líneas 29-34 en make_margins.js)

make_buttons (en make_buttons.js)

La función crea un grupo para todos los botones y luego un grupo para cada botón, que a su vez almacena un círculo y un elemento de texto. La línea 37 - 85 calcula la posición de los botones. Para ello, puede ver si el texto a la derecha de la longitud de cada botón es más largo que el espacio permitido para que dibujemos (línea 75). Si es así, coloca el botón en una línea y actualiza los márgenes.

make_title (en make_title.js)

make_title es similar a make_buttons en el sentido de que automáticamente dividirá el título de su gráfico en varias líneas, y se dividirá si es necesario. Es un poco pirateado ya que no tiene la sofisticación del esquema de separación de palabras de TeX, pero funciona lo suficientemente bien. Si necesitamos más líneas de una, se actualizan los márgenes.

Con los botones, el título y los márgenes establecidos, podemos hacer nuestros ejes.

make_axes (en make_axes.js)

La lógica de make_axes refleja que para calcular el espacio que necesitan los ejes ficticios. Aquí, sin embargo, añade transiciones para cambiar entre ejes.

Finalmente nuestro diagrama de dispersión

Con toda esa configuración hecha, finalmente podemos hacer nuestro diagrama de dispersión. Dado que nuestros conjuntos de datos pueden tener una cantidad diferente de puntos, debemos tener esto en cuenta y aprovechar los eventos de entrada y salida de d3 en consecuencia. En la línea 40 se obtiene el número de puntos ya existentes. La instrucción if en la línea 45 - 59 agrega más elementos de círculo si tenemos más datos, o transiciona los elementos adicionales a una esquina y luego los elimina si hay demasiados.

Una vez que sabemos que tenemos el número correcto de elementos, podemos hacer la transición de todos los elementos restantes a su posición correcta (línea 64)

Por último, agregamos información sobre herramientas en la línea 67 y 68. La función de información sobre herramientas está en make_tooltip.js

Cuadro de caja y bigotes

Para mostrar el valor de realizar funciones generalizadas como las del ejemplo anterior (make_title, make_axes, make_buttons, etc.), considere este cuadro y el gráfico de bigotes: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693c24a410ff

Si bien el código para hacer las cajas y los bigotes es más intensivo que solo colocar los puntos, vemos que las mismas funciones funcionan perfectamente.

Gráfico de barras

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248