Datos visuales más fáciles en el navegador con gráficos de varianza

 año, tocino 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 

 
Datos de tocino
     año    

 y agregar los siguientes estilos a una style.css expediente:

.contenedor ancho: 50%; margen: 60px auto;  .container chart ancho: 100%; altura: 400px; 

Note algunas cosas aquí:

• El marcado del gráfico se parece mucho a HTML. De hecho, es un XML válido que Variance utiliza para construir nuestro gráfico de barras. También utilizamos este etiquetado personalizado para envolver los datos CSV. Hacemos referencia a ese elemento CSV en el gráfico etiqueta.
• escala-y-lineal Nos dice cuál debe ser la escala de la dirección y. En nuestro caso, nuestro conjunto de datos llega a 16000, pero comienza tan bajo como 20. Para cubrir el rango, establecemos nuestro extremo inferior en 0, y nuestro máximo en 20000.
• guia-x / guia-y Crea una guía de marcas en los ejes respectivos..
•  recorre nuestros datos y crea elementos basados ​​en cada punto de datos.
• anotación es una etiqueta que se puede colocar alrededor de un elemento en particular, como un bar. Los frenos le permiten mostrar un dato; en nuestro caso, año está en nuestro CSV, por lo que podemos producir fácilmente el año.
• bar crea un elemento de barra, y longitud del mapadefine el ancho de la barra  tocinos mapas al CSV.

¡Genial! Ahora, ¿cómo lo hacemos menos feo??

Diseñando el gráfico

Para diseñar el gráfico, simplemente diseñamos como lo haríamos con los elementos normales en CSS. Los elementos de barra del gráfico son elementos de DOM normales a nivel de bloque y se colocan utilizando flexbox. Agregaremos algunos estilos a nuestro CSS, que luego debería verse como este.

cuerpo color: # 3f130c; altura: 100%; Familia tipográfica: sans-serif; imagen de fondo: url (… /bg.jpg); tamaño de fondo: cubierta; posición de fondo: centro; repetición de fondo: no repetición; adjunto de fondo: fijo;  h1, h2, h3, h4 familia de fuentes: Tauri, sans-serif;  .container ancho: 50%; posición: relativa; imagen de fondo: url (… /bg-blur.jpg); tamaño de fondo: cubierta; posición de fondo: centro; repetición de fondo: no repetición; adjunto de fondo: fijo; margen: 100px auto; relleno: 100px;  .bacon-chart position: relative; índice z: 999;  .bacon-chart h3 margen: 0 0 1em;  .container: after background-color: rgba (255,255,255,0.4); posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; contenido:"";  .container chart ancho: 100%; altura: 400px;  .bacon-chart bar background-color: rgba (96,28,18,0.7); frontera: ninguna; 

Nota: hemos agregado una fuente de Google al archivo de índice sobre nuestro enlace style.css:

Hemos incluido una pequeña ventaja aquí: el efecto de "ventana borrosa" se puede ver creado entre el contenedor y los elementos del cuerpo. Hacemos uso de una segunda imagen de fondo para conseguirlo..

Ahora tenemos un gráfico más útil. Pero se pone mucho, mucho mejor..

Animación y Tooltips

Tiempo para algunas florituras, comenzando con algunos consejos sobre las barras. Para comenzar, agregaremos una nueva anotación para cada barra, de modo que nuestro marcado de gráfico se vea así:

    año tocinos   

Después de eso, agregaremos algunos nuevos estilos a nuestro CSS que permitirán algunos efectos de desplazamiento interesantes y transiciones simples para la información sobre herramientas:

.barra de tabla de tocino color de fondo: rgba (96,28,18,0.7); frontera: ninguna; margen: 0! importante;  datum desbordamiento: oculto;  .tooltip ancho: auto; altura: auto; color de fondo: # 444; color: #fff; opacidad: 0; izquierda: -100%; tamaño de fuente: .6em; -webkit-transición: todos los .4s; -moz de transición: todos .4s; -ms-transición: todos .4s; -o-transición: todos .4s; transición: todos .4s; relleno: 6px;  datum: hover background-color: rgba (255,255,255,0.1);  datum: hover .tooltip display: block; opacidad: 1; izquierda: 0; 

Animación

Finalmente, queremos animar nuestras barras. Lograremos esto con una animación de fotogramas clave:

@ -webkit - keyframes barsIn 0% bottom: -100%;  100% inferior: 0; 

Que luego aplicaremos a nuestro elemento de barra:

.tocino - barra de gráficos fondo - color: rgba (96, 28, 18, 0.7); margen: 0! importante; frontera: ninguna; altura: 0; - webkit - animación: barsIn 1s; 

Esto también se puede lograr usando algo como-webkit-transform: escala (1, 0), Pero queríamos que fuera lo más simple posible. También debe asegurarse de agregar los prefijos apropiados según sea necesario.

Más sobre la variación

La varianza hace un gran trabajo de explicar ejemplos más complejos y también proporciona un gran índice de documentación. Encontrará que la varianza es capaz de visualizaciones mucho más complejas. Trataremos brevemente algunos de los puntos principales aquí..

La varianza utiliza nombres de diferentes partes centrales de un gráfico para facilitar la creación de los gráficos, incluyendo punto,punto, distancia, bar, diagrama de caja, y línea. Cada uno de estos tiene sus propios insumos determinables. Todos estos pueden usarse en combinación unos con otros, y pueden crearse de manera iterativa con el repetir bloquear.

La varianza también puede usar datos vinculados, lo que permite visualizaciones basadas en API que tienen información actualizada dinámicamente.

Conclusión

Hoy, ha aprendido cómo crear un gráfico completamente declarativo, animado y con estilo utilizando los gráficos de varianza. En un esfuerzo por comenzar rápidamente, hemos omitido muchas de las funciones disponibles en Variance, así que asegúrese de comprobarlo por sí mismo.!

Foto de Bacon por jeffreyww en Flickr, editada. Creative Commons 2.0