Cómo agregar gráficos a su sitio de WordPress usando D3.js

Es posible que esté familiarizado con el término "visualización de datos", ya que se ha vuelto más común como práctica y trayectoria profesional. Hay una razón por la cual este campo emergente está en marcha: es importante que constantemente aprendamos más sobre nuestros usuarios, así como también mostrándoles los datos para respaldar nuestras afirmaciones.

Cuando los datos se presentan de manera limpia y profesional, facilitan su comprensión e interpretación. En la mayoría de los casos, sus usuarios son personas visuales, entonces, ¿qué mejor manera de ilustrar los datos que con gráficos? D3.js, también conocido como Documentos basados ​​en datos, es una excelente manera de agregar gráficos a su sitio de WordPress.

¿Por qué D3?

Esta biblioteca ayuda a los diseñadores a mostrar datos en la web. Las posibilidades son infinitas, lo que hace de esta una biblioteca muy popular. De simple a complejo a cualquier cosa intermedia, D3 se puede personalizar para representar prácticamente cualquier tipo de gráfico. Funciona muy bien con las tecnologías web estándar, puede manipular el DOM, es súper flexible y los gráficos se pueden personalizar exactamente a su gusto.

A estas alturas, lo más probable es que haya encontrado gráficos vectoriales escalables, a menudo denominados SVG. Este es el tipo de formato que crea la biblioteca D3. Los SVG son geniales porque son de tamaño pequeño, escalables e independientes de la resolución.

Para que quede claro, esta solución no viene con ningún gráfico prediseñado listo para usar: ¡tendrá que crear el suyo propio! Eche un vistazo a la galería D3 y podrá ver muchos ejemplos excelentes que lo inspirarán.

Como solución de código abierto, no tiene que preocuparse por la licencia y el costo. Debido a que es de código abierto, el desarrollo está en curso. Para mantenerse actualizado con la última versión, puede bifurcar D3 en Github.

Hacer un gráfico D3 simple

Ahora que sabemos lo genial que es D3, construyamos algo. Haremos un gráfico de anillos simple, que cubrirá los conceptos básicos de D3.

Paso uno: agregue los scripts a su sitio

Primero, deberá agregar el script D3 a su sitio de WordPress. El sitio web de d3 lo tiene disponible para descargar o puede vincular directamente a la última versión. Notarás que estoy usando una versión minimizada para este tutorial. D3 es, naturalmente, bastante pequeño en tamaño, pero el minificado es aún un poco más pequeño con solo 148 KB.

A continuación, creará un nuevo archivo JavaScript donde se ubicará la secuencia de comandos del gráfico personalizado. Asigne al archivo un nombre reconocible para que sea fácil de encontrar.

Es muy importante que se llame al script D3 antes que al JavaScript específico del gráfico. Si las cosas no se llaman en el orden correcto, los gráficos no se representarán. (Sé esto por experiencia personal, y si no lo detecta de inmediato, es probable que pase mucho tiempo tratando de arreglar las cosas que no están rotas).

Estos scripts deben agregarse a su sitio después de la etiqueta del cuerpo de cierre. Al inspeccionar la página, asegúrese de que se vea así:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Tenga en cuenta que la ruta de su archivo puede ser diferente a esta, según la estructura de su archivo.

Paso dos: agregue scripts para crear el gráfico

No tocará el archivo d3.js en absoluto, solo trabajará en su archivo de gráfico específico. En este caso, se llama charts.js .

Analicemos las cosas pieza por pieza. Primero, crea tu variable y establece lo que necesitarás en tu función. Llamaré a esta variable donut .

var donut = (function(one) {
})();

Dentro de las llaves, agregará su información de tamaño.

var width = 400,

height = 400,

radius = 200

A continuación, define tus colores. ¿Qué tal un gráfico gris y azul? El primer color que aparece aquí es un gris claro que será el color predeterminado. El segundo es el color azul que representará los datos.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Necesitará algunos datos para probar esto, así que agreguemos eso a continuación. Para este tutorial, los datos están codificados, pero también puede usar datos de hojas de cálculo y datos dinámicos con D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Ahora puede agregar más detalles que ayuden a definir cómo se representa el gráfico.

El arco define el radio interior. Imagine el radio exterior del gráfico; querrá que sea bastante grueso, por lo que restar 100 debería ser suficiente.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Esto crea el contenedor SVG y el #donut es lo que tendrá como objetivo en su página para representar el gráfico. Aquí es donde comenzará a ver los colores del paso anterior.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Código terminado

En caso de que quiera comparar lo que tiene con la muestra, aquí está el fragmento de código completo.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

viendo el gráfico

Deberá crear una nueva página o publicación para que pueda "llamar" al gráfico de anillos para verlo realmente. Asegúrese de estar en el modo de edición de texto.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Cuadro de visualización y relación de aspecto con respecto al gráfico de tamaño

Hay algo extra en la etiqueta SVG, que es viewBox y preserveAspectRatio . Esto no fue generado por D3 y es totalmente opcional. Es posible que tenga otro método preferido de dimensionamiento, pero esto tiende a funcionar bien y ayuda con la capacidad de respuesta de los gráficos.

Especialmente en este caso, dado que queremos mantener una forma perfectamente redonda, establecer una relación de aspecto garantizará que el SVG se ajuste a la escala. Aquí es donde entra en juego viewBox . La ventaja de viewBox es que define cómo se deben escalar todas las medidas y coordenadas utilizadas dentro del SVG para que quepan en el espacio disponible. Si también está utilizando 400 como medida, aquí hay una explicación rápida sobre cómo mantener la forma circular.

Tenemos dos valores de 400 que son iguales; la razón de esto es que la imagen se escala correctamente. Con nuestro viewBox="0 0 400 400" , estamos creando un sistema de coordenadas para el gráfico. Tiene 400 unidades de ancho y 400 unidades de alto. El ancho y la altura del gráfico SVG establecen el área visible y configurar un viewBox le permite especificar que sus gráficos se pueden estirar para ajustarse a un contenedor determinado (lo más probable es que la ventana gráfica sea la parte de la página web que el usuario puede ver). ver actualmente).

Hay un poco más porque incluso con viewBox definido, todavía no se escalará perfectamente. No se distorsionará, lo cual es bueno, pero hay más en la ecuación. Conozca al wingman, preserveAspectRatio . No tiene efecto a menos que haya un viewBox que defina la relación de aspecto de la imagen. La escala se ajustará para preservar la relación de aspecto, de modo que puedas mantener tu carta perfectamente circular. Al incluir preserveAspectRatio , está planeando instancias en las que viewBox no coincida con la relación de aspecto de la ventana gráfica o el contenedor en el que se encuentra el gráfico. En la mayoría de los casos, de manera predeterminada, la imagen se escalará hasta que se ajuste tanto al alto como al ancho, se centra en cualquier espacio adicional. Incluimos preserveAspectRatio="xMidYMid" que le dice al navegador que centre el gráfico dentro de la ventana gráfica en ambas direcciones.

Lo más importante es saber que el gráfico no se cortará y que es escalable. La clave para entender esto realmente es experimentar con los valores. Una buena manera de hacerlo es ver qué sucede cuando se cambian los valores y cómo se relaciona con la ventana gráfica.

Compatibilidad con navegador y d3

Lo más probable es que esté utilizando un navegador moderno, pero vale la pena mencionarlo si tiene que admitir navegadores más antiguos. En general, la compatibilidad con navegadores es excelente y probablemente no tendrá ningún problema, pero D3.js no funciona bien con navegadores más antiguos como IE8.

Crear un gráfico simple es una excelente manera de estar en funcionamiento con D3.js. Conocer los conceptos básicos y familiarizarse con los gráficos iniciales de D3 le resultará muy útil a medida que diseñe sus datos y pase a más tipos de gráficos. De simple a complejo, las opciones de diseño son infinitas.

¿Cómo resultó tu gráfico? ¡Cuéntanos en los comentarios!

¿Que sigue?

¡Descargue este libro electrónico para obtener una lista de nuestros complementos más recomendados para desarrolladores! Descubrimos que todos estos complementos son fáciles de usar, no tienen un rendimiento demasiado alto en su sitio y son francamente confiables.

¿Listo para instalar su nuevo complemento favorito? ¡Haga click abajo!