Los gráficos de torta y donas son útiles para visualizar proporciones dentro de un conjunto de datos. Estos gráficos dividen un círculo en segmentos que representan diferentes categorías. En este capítulo, aprenderemos a crear gráficos de torta y donas utilizando D3.

Datos de Ejemplo

Para este capítulo, usaremos un conjunto de datos que representa diferentes categorías y sus respectivos tamaños:

javascript

Configuración del SVG

Primero, configuramos el área del SVG donde se dibujará el gráfico de torta o dona:

javascript

Creación de un Gráfico de Torta

Configuración del Generador de Arcos

D3 proporciona una función generadora de arcos que facilita la creación de segmentos de arco basados en datos:

javascript

Generación del Diagrama de Torta

Utilizamos la función pie de D3 para calcular los valores de los arcos:

javascript

Dibujar los Arcos

Ahora dibujamos los segmentos de arco (rebanadas de la torta):

javascript

Creación de un Gráfico de Donas

Para crear un gráfico de donas, simplemente ajustamos el radio interno en el generador de arcos:

javascript

Personalización del Gráfico de Torta y Donas

Podemos personalizar el gráfico de torta o donas añadiendo etiquetas para mostrar las categorías o valores:

javascript

Añadir Interactividad

Vamos a añadir interactividad básica, como un tooltip que muestra el valor al pasar el mouse por encima de un segmento:

javascript

Resumen

En este capítulo, aprendimos a crear gráficos de torta y donas en D3. Empezamos con la configuración básica del área de dibujo y luego creamos los segmentos de arco utilizando las funciones generadoras de arcos y cuadros. Trazamos los segmentos de torta y donas y personalizamos el gráfico añadiendo etiquetas. Finalmente, añadimos interactividad básica con tooltips.

Los gráficos de torta y donas son útiles para mostrar proporciones dentro de un conjunto de datos, y ahora tienes las herramientas necesarias para crear y personalizar tus propios gráficos de torta y donas utilizando D3.

En el siguiente capítulo, exploraremos cómo añadir animaciones y transiciones en D3.