Para la comparación, he elegido dos simples gráficos de líneas, uno hecho en Dimple, y el otro hecho en el nativo D3. Mis ejemplos de códigos de comparación pueden ser descargados de https://github.com/sonisick/d3anddimpleexampleshttps://goo.gl/Vm4Frc. Descargue un archivo zip y descomprímalo. El código se ejecutará desde cualquier navegador moderno.
Los contendientes de la carta
No es exactamente un conjunto impresionante, pero tienes que empezar por algún lado. Una cosa a tener en cuenta, incluso en esta etapa, Dimple quiere mostrar su material: sólo pasa tu cursor lentamente sobre la línea de la trama de Dimple, y deberías ver el fenómeno representado abajo:
Dimple Exuberante sobre Data!
Ahora veamos el Código de los Hoyuelos.
Código del hoyuelo
Los datos de ambos provienen de una variable interna en cada una de las muestras del gráfico llamada datos. Los datos de la variable son simplemente un objeto JSON:
Datos JSON para ambos ejemplos
El objeto variable anterior está encerrado con una etiqueta de Script que se abre y se cierra, de modo que la sección puede ser colapsada mientras nos concentramos en la rutina de codificación principal. La etiqueta Estilo CSS también será colapsada y referenciada sólo cuando sea necesario.
Con la porción de datos y los Estilos CSS colapsados, el código es bastante sucinto con sólo nueve líneas de Código Dimple real:
Primer ejemplo de hoyuelo
Desglose de códigos
Después del colapso del estilo CSS, vemos en las líneas 22 y 23 dos etiquetas de script que hacen referencia a las bibliotecas D3 y Dimple. La referencia D3 siempre aparece antes de la referencia Dimple porque la biblioteca auxiliar de Dimple depende de la presencia de una biblioteca D3. Además, es necesario coordinar la versión correcta de D3 con una versión específica de Dimple. Ya que estamos usando la biblioteca D3 v4, necesitamos la biblioteca Dimple v2.3.
Después de la etiqueta del cuerpo en la línea 25, vemos el título del gráfico.
La línea 28 nos muestra la etiqueta de Script colapsada para la variable de datos JSON.
Luego, después de la etiqueta de Script abierta, tenemos el código de Dimple.
La línea 66 simplemente crea un nuevo elemento SVG con las dimensiones de 900 píxeles de ancho por 500 píxeles de alto.
Dimple por defecto asigna un área con las dimensiones de 80 por ciento de la altura y 80 por ciento del ancho para el área de la gráfica. El resto del espacio es para el eje, las etiquetas del eje y el relleno.
La línea 67 crea un nuevo gráfico de Dimple a partir de la variable svg y de la variable de datos.La línea 68 es un comentario que dejé como ejemplo de formateo del área del gráfico si los 0f 80 por ciento por defecto no son adecuados. El comando es «miGráfico.setBounds». Puedes comprobar los parámetros haciendo clic en el enlace a la Referencia API: (https://goo.gl/M2KhKt).
La línea 69 añade el eje x como un eje temporal. Los parámetros son el nombre del eje, una columna de fecha, el formato de entrada (cómo se formatean los datos) y el formato de salida. El último parámetro es la forma en que la fecha será formateada en el eje. En este ejemplo, el formato en el eje x es «yy-mm»; por ejemplo, la fecha del 1/1/2009 se formateará como 09-01.
(La siguiente es una dirección abreviada de la documentación de formato de tiempo D3: https://goo.gl/wp8NGz).
La línea 70 explícitamente enciende las líneas de la cuadrícula X.
La línea 71 añade el eje medido para el eje Y. Los únicos parámetros necesarios son el nombre del eje y el nombre de la columna Y.
La línea 72 gira explícitamente en las cuadrículas en Y.
La línea 73 crea la serie de líneas a partir de las columnas extraídas de nuestra variable de datos.
El comando addSeries tiene tres parámetros. El primero se utiliza para crear múltiples series mediante una mayor disección de los datos. En el ejemplo actual, el primer parámetro es nulo.
Un ejemplo en el que se utiliza un valor no nulo en el primer parámetro es un gráfico de líneas multiserie que elaboré para un libro titulado «The SharePoint 2013, D3 and Dimple Connection» (https://goo.gl/eqqXGT).
Los datos contenían dos series separadas: una para la carrera de producción y la otra para la carrera media o idealizada. Cada serie producía una línea en el gráfico.
El hecho de tener varias series en la misma fuente de datos se denomina desagregación o división ulterior de los datos en series múltiples.
Ejemplo de gráfico de líneas de series múltiples
En este caso del gráfico de líneas multiserie anterior, la línea addSeries tiene el siguiente aspecto:
var lines = myChart.addSeries(«Run Type», dimple.plot.line, x,y);Los datos del archivo se dividen en dos series por el primer parámetro llamado «Run Type». El resultado es que se producen dos líneas separadas: una para el Tipo de Ejecución de «Prod» y la otra para el Tipo de Ejecución de «Avg».
El segundo parámetro en la línea 73 es simplemente el nombre del objeto de gráfico de Dimple, que es esencialmente el tipo de gráfico de Dimple. En este ejemplo, estamos usando la «línea.de.gráfico.de.hoyuelos».
Los otros objetos gráficos son el área de trazado de hoyuelos, la barra de trazado de hoyuelos y la burbuja de trazado de hoyuelos. Cada uno de estos objetos corresponde a un gráfico de hoyuelos específico. El tercer parámetro indica los valores necesarios para crear un valor único combinado, en este caso para un punto de línea. Aquí estamos usando datos de las coordenadas x e y.
La línea 74 establece el peso de la línea de la trama.
La línea 75 es un comentario para mostrar cómo encender los marcadores de línea… más sobre esto más tarde.
La línea 76 realiza la magia de representar el gráfico.
Exploración de la estructura del hoyuelo
Antes de ver el gráfico codificado D3, necesitamos examinar lo que Dimple ha creado en la estructura del Modelo de Objeto de Documento (DOM). Para hacer la inspección, utilizamos las herramientas de desarrollo del navegador Chrome.
Todos los navegadores modernos tienen depuradores o herramientas de desarrollo comparables. Encuentro a Chrome más conveniente de usar. Una de mis cosas favoritas del desarrollador de Chrome es que cuando pasas el cursor por encima de un objeto DOM o haces clic en él, la herramienta resalta el área ocupada por el elemento HTML en la pantalla. En las pantallas siguientes, mostraremos muchas instancias de áreas resaltadas de objetos HTML.
El objetivo en esta etapa es ver las estructuras que Dimple crea automáticamente. Las principales estructuras en las que nos concentraremos son los elementos del grupo HTML, . El elemento de grupo es un objeto contenedor y no es directamente visible en el HTML renderizado. Agrupa elementos funcionales.
Cuando veamos el código crudo D3, veremos que se requiere mucho más trabajo de codificación para crear estos objetos de grupo que Dimple suministra sin esfuerzo.
Para abrir las herramientas de desarrollo, use la tecla F12 o haga una combinación de teclas Control Shift y «I». Además, asegúrate de tener abierta la pestaña de elementos, ya que este será el foco de nuestra exploración.
Primero, pase el cursor por encima o haga clic en la etiqueta SVG , debería ver toda el área del gráfico en azul con la etiqueta svg mostrada en la parte superior:
A continuación, haga clic para abrir la flecha triangular de la etiqueta SVG para revelar la primera etiqueta del grupo. Pase el cursor por encima o haga clic en el elemento de grupo con la clase de gráfico de hoyuelos. Su pantalla debería ser similar a la siguiente:
Del mismo modo, abrir la etiqueta del Grupo con la clase de gráfico de hoyuelos para revelar tres grupos adicionales:
Estos grupos corresponden a las cuadrículas, ejes y series, respectivamente. Tanto las líneas de la cuadrícula como el eje se extienden por toda el área del gráfico, mientras que las series sólo se extienden por el área atravesada por la línea real:
Ahora abre el primer grupo bajo el grupo de la cuadrícula de hoyuelos. Esto debería revelar dos grupos más. Uno es para las líneas verticales, y el otro es para las líneas horizontales:
Sólo exploraremos el primer grupo que sostiene las líneas verticales o garrapatas. Ahora haz clic para abrir el primer subgrupo de líneas verticales:
A medida que bajamos por los grupos de garrapatas o líneas verticales, podemos ver cada línea de cuadrícula vertical señalada sucesivamente con una etiqueta:
Grupos de cuadrículas verticales
Si abriéramos el segundo grupo que contiene las líneas o garrapatas horizontales, veríamos el mismo fenómeno de las líneas horizontales resaltadas con una etiqueta que aparece para identificar la actual al hacer clic o al pasar el ratón por encima:
A continuación, amplíe el grupo «hoyuelo del eje del hoyo – eje x» y vea los grupos de garrapatas individuales:
Estas garrapatas apuntan a etiquetas de ejes individuales. En este caso el eje X. Expandiendo una de las clases de tick revela un elemento de Texto que contiene el hoyuelo Selector CSS – etiqueta de eje personalizado usado para estilizar las etiquetas de los ejes individuales:
Haz clic en el triángulo para comprimir el elemento de la garrapata que acabamos de expandir. Luego desplácese hacia abajo y note que la etiqueta HTML de texto se ha indentado ligeramente. Si pasas el cursor sobre ella o haces clic en ella, se mostrará una etiqueta sobre el título del eje. Observa también la clase CSS de título de eje personalizado con hoyuelos dentro de los nombres de las clases de texto. Esta clase también se utiliza en la etiqueta del eje y y es lo que usamos como selector en CSS para dar estilo a ambos elementos:
A continuación, pase el cursor sobre el siguiente elemento del grupo con la clase de «hoyuelos-eje hoyuelos-y»:
No necesitamos mirar el elemento de texto que está justo debajo de nuestro grupo actual con la clase personalizada de título de eje personalizado… confía en mí que está ahí. Este elemento de texto contiene el selector CSS para estilizar la etiqueta del eje Y.
Con suerte, ahora ves de dónde saca el CSS las clases para formatear el eje y las etiquetas. La siguiente es una lista de la Hoja de Estilo CSS que fue inicialmente colapsada mientras veíamos el Código Dimple:
No culpo a nadie si has contraído «hoveritis» — es un riesgo laboral.
Antes de dejar las herramientas de desarrollo de Chrome, necesitamos ver brevemente un último elemento del grupo. Este es el último grupo bajo el gráfico de hoyuelos de la clase.
Recuerden que al principio había tres grupos antes de que nos volviéramos locos por la expansión. Podría ser útil si sigues para cerrar algunos de los grupos más bajos de la jerarquía.
Este último grupo, llamado grupo 0 de la serie de hoyuelos, contiene la información del punto de hoyuelos en la línea. Abre el grupo-serie-de-huellas-0 y justo después del elemento Path HTML, verás un número de elementos Circle HTML. Podemos ver rápidamente a qué pertenecen, ¿adivina qué? Sí, pasando el cursor sobre ellos o haciendo clic en ellos:
Al pasar el cursor o hacer clic en las etiquetas de los círculos individuales, podemos ver el marcador atravesar la página.
¡Puede que necesite una tabla de flotar después de tanto revolotear!
Todo lo que necesitamos hacer para sacar completamente los círculos de Dimple y los tooltips es descomentar una línea en nuestro código para activar los marcadores de línea:
Esto nos da la siguiente pantalla con los círculos visibles y herramientas totalmente funcionales:
Si volviéramos a mirar el grupo del hoyuelo-serie-0, encontraríamos más atributos añadidos a nuestras etiquetas de los círculos que proporcionan el tamaño y el color del círculo.
Con suerte, ahora podemos ver cómo nueve líneas de Código de Hoyuelos (diez contando el marcador de línea) pueden producir tal confluencia de objetos DOM. El enfoque de la siguiente sección no es enseñarte todo sobre D3, sino ilustrar el código D3 que Dimple eliminó mientras hacía este gráfico.
Código D3
Veamos primero el CSS. D3 no tiene la misma estructura de clase uniforme que encontramos en Dimple. En Dimple, fue fácil encontrar nuestras clases y construir nuestros selectores CSS. Hay un poco más de trabajo por hacer en D3. Necesitaremos agregar clases mientras construimos nuestros objetos. Al mirar el código que produje, notarán las adiciones de clases en varios puntos para que una etiqueta o eje pueda ser formateado a través de un Selector CSS:
Sin contar la línea de comentarios, tenemos aproximadamente 80 líneas de código que atravesar. Habrá dos pantallas, de nuevo el CSS y la variable que contiene nuestros datos de muestra no se mostrará.
Una cosa que hay que recordar sobre el nativo D3 es que tenemos mucho que posicionar y transformar para que un gráfico de líneas se vea como esperamos. De forma nativa, el eje Y aumenta en la dirección negativa. Así que el eje X estaría en la parte superior del gráfico, y el gráfico aumentaría hacia abajo.
Recuerden que Dimple asumió que el área de la parcela sería el 80% del tamaño asignado, no hay tal suposición aquí. La primera parte de la siguiente muestra trata sobre el establecimiento de los márgenes:
Desglose del código D3
Repasemos esto paso a paso
Las líneas 71-73 cubren la variable de configuración para usar en los cálculos de margen.
Las líneas 76-80 hacen un poco de formateo de los datos para que D3 se sienta cómodo con los datos.
La fecha está formateada según la función timeParse. El signo más delante de d.close asegura que se trata de un número.
Dimple parecía entender los datos sin esta función.
Las líneas 83-86 crean el elemento SVG y lo añaden al cuerpo con atributos de altura y anchura.
Las líneas 89-91 crean el grupo superior. El grupo se guarda en una variable llamada chartgrouping porque se le añadirán otros elementos.
Las líneas 94-97 escalan la x y la y a las variables de altura y anchura que fueron calculadas anteriormente. Recuerde que los márgenes fueron restados.
Las líneas 100-103 crean la función que será llamada para crear las líneas de la cuadrícula X.
Las líneas 105-108 crean la función que será llamada para crear las líneas de la cuadrícula Y.
Las líneas 111-113 crean la función de ayuda para crear los puntos de la línea.
Las líneas 115-116 establecen los dominios x e y. Los dominios se asignan a las escalas establecidas anteriormente para determinar qué valores se asignarán para una coordenada x e y dada.
Las líneas 119-125 añaden las cuadrículas de la dirección X. Observe primero que se está creando y añadiendo otro grupo bajo el grupo de agrupación de gráficos, y la transformación para mover las líneas hacia abajo usando la variable de altura. También, note la grilla de atributos de clase que se está agregando para el estilo CSS y una llamada a la función make_x_gridlines con dos parámetros.
Las líneas 128-133 añaden las cuadrículas de dirección y. Note que se está creando y añadiendo otro grupo bajo el grupo de agrupación de gráficos; luego, se añade la cuadrícula de atributos de clase para el estilo CSS. También, la función make_y_gridlines está siendo llamada con dos parámetros.
Las líneas 136-139 se adjuntan a los datos y crean el camino usando la función de ayuda de línea valueline. Además, la línea de la clase está siendo añadida para el estilo CSS.
Las líneas 142-148 crean el eje X. Primero, se crea otro grupo y se añade al grupo de agrupación de gráficos; luego, se añade la clase de eje. A continuación se produce una transformación para posicionar el eje x de forma similar a la transformación para las líneas de la cuadrícula x. A continuación, se hace una llamada a una función interna D3 llamada axisBottom con x como parámetro y un formato para las marcas de tiempo de un año de dos posiciones con un guión y un mes de dos posiciones. Finalmente, se selecciona todo el texto y se aplica el formato de anclar el texto en el centro del tick.
Las líneas 151-158 crean y dan formato a la etiqueta del eje X. Esta vez un nodo de texto se añade a la agrupación de gráficos de grupo. Se asigna una clase de dateLabel para el estilo CSS. A continuación, se realiza una transformación para centrar aproximadamente la etiqueta en el eje x. Finalmente, se asigna un estilo del centro de texto-anclas con el texto que es la fecha.
Las líneas 161-163 crean el eje Y añadiendo primero un grupo a la tabla de grupos. Finalmente, la función interna D3 axisLeft es llamada con el parámetro y.
Las líneas 166-173 crean la etiqueta para el eje Y. Primero, se añade un nodo de texto a la agrupación de gráficos de grupo. Una clase de closingLabel es asignada para el estilo CSS. A continuación, se aplica una transformación para rotar la orientación del texto en 90 grados; además, se ajusta la posición para centrarla aproximadamente dentro del eje y y colocarla un poco fuera de las garrapatas. Por último, se asigna un estilo del texto-anclas del medio con el texto como fecha.
¡Pedazo de torta! ¿Verdad?
Una cosa a tener en cuenta es que Dimple no puede realizar todas las tareas o funciones de D3. En la actualidad, realiza un conjunto limitado de funciones D3. En este simple ejemplo, Dimple maneja todas las tareas D3 bastante bien. En ejemplos más complejos, es posible que tenga que volver parcial o completamente a D3.
Recuerden que incluso con Dimple, la funcionalidad nativa D3 está disponible. Sin Dimple, sin embargo, muchas tareas se vuelven verbosas o difíciles de leer, revisar e implementar.