Primero examinamos los datos. Las etiquetas de escritura rodean los datos para que podamos colapsar las secciones para aumentar la visibilidad de las secciones que contienen el código de Dimple. Los datos que se muestran en la imagen de abajo son sólo una breve porción. Para ver los datos en su totalidad consulte la fuente descargada de Github.com.
Los datos son simplemente un conjunto de objetos JSON. La fuente de datos fue creada como un objeto interno para poder ver toda la información de este código en un solo lugar.
Hay tres pares de valores en cada objeto JSON: LineLabel, Tiempo y Temperatura en cada objeto.
Ahora colapsando el CSS y el Data Script, el resto del código se ve como sigue:
D3 y Dimple
Primero, anota las líneas 46 y 47. La línea 46 primero se refiere a la biblioteca d3.v4 y la línea 47 se refiere a la biblioteca dimple.v2.3.0. Primero se requiere D3, y las dos bibliotecas deben ser sincronizadas a las versiones adecuadas… que son. Diferentes versiones de Dimple requieren diferentes versiones de D3.
Las líneas 50-54 contienen el elemento div y los elementos de texto para las ChartLabels.
Elementos de hoyuelo
A continuación, examinaremos la segunda Sección de Guión, que contiene el Código de Hoyuelos.
La línea 203 define la variable svg, junto con las dimensiones de altura y anchura. También adjunta el SVG al elemento «cuerpo».
var svg = hoyuelo.newSvg(«cuerpo»,700, 400);
A continuación, en la línea 204, creamos la variable myChart a partir de la variable svg y la variable de datos que contiene nuestra matriz de objetos JSON:
var myChart = new dimple.chart(svg, data);
La línea del 205 es sólo un comentario, es una línea de ejemplo para mostrar cómo dimensionar el myChart si no usamos el espacio por defecto del hoyuelo.
//myChart.setBounds(80, 40, «75%», «60%»);
Por defecto, Dimple inicializa la altura al 80% de la altura del SVG y la anchura al 80% de la anchura del SVG.
Las líneas 206-208 es donde hacemos que el eje secuencial actúe como una secuencia de años. Esencialmente, tratamos el número como si designara años:
123var x = myChart.addTimeAxis("x", "Time", "%Y","%-Y");x.timePeriod=d3.timeYear;x.timeInterval=10;Línea 209, pon el texto de la etiqueta en el eje x:x.title=»Tiempo en minutos»;
En la línea 211, activamos las cuadrículas del eje X. Observen lo simple que es agregar esta funcionalidad en Dimple:
x.showGridlines = true;
En la línea 213, declaramos la variable y y añadimos el MeasureAxis al eje y a partir del par de datos-valor de temperatura:
var y =myChart.addMeasureAxis(«y», «Temperatura»);
A continuación, en la línea 213, activamos las cuadrículas del eje y también, al igual que las cuadrículas de la X:
y.showGridlines=verdad;
En la línea 216, Dimple realiza la magia de separar las líneas basadas en los pares de valores de LineLabel de nuestra matriz de objetos JSON:
var s = myChart.addSeries(«LineLabel», dimple.plot.line);
La variable s ahora contiene la serie de gráficos.
La línea a 217, establece el peso de las líneas a 6px:
s.linePeso=6;
La línea 218 aún no ha sido incluida en ninguna de las visualizaciones, pero añadirá los tooltips interactivos de Dimple en los puntos de datos del gráfico, como se muestra a continuación, con sólo encender los marcadores de línea:
s.lineMarkers=verdad;
Líneas 220-226, agregue la gama de colores para las líneas:
1234567myChart.defaultColors = [ new dimple.color("rgba(255,255,256,1)"), new dimple.color("rgba(255,255,100,1)"), new dimple.color("rgba(255,153,255,1)"), new dimple.color("rgba(153,255,255,1)"), ];Como nota al margen, me decepcionó bastante que los colores estén ligeramente enmascarados. Los colores disponibles no reflejan los verdaderos valores RGB, lo que dificulta que los colores nativos de D3 coincidan con los colores que me hubieran gustado.
La última línea del 229, realiza la representación gráfica:
myChart.draw();
Gráfico ajustado
El siguiente es el gráfico de Dimple, más funcional, con interactividad para el usuario:
A continuación, consideremos las eficiencias de codificación que la versión de Dimple nos proporcionó al examinar el código D3 para lograr todo lo que nuestro simple gráfico de Dimple hizo, excepto los marcadores de línea que crean la interactividad para los elegantes consejos de herramientas.