El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderemos a crear gráficos de pastel utilizando D3.js. Los gráficos de pastel son una forma efectiva de mostrar proporciones y comparaciones entre diferentes categorías. A lo largo de esta sección, cubriremos los conceptos básicos, proporcionaremos ejemplos prácticos y ofreceremos ejercicios para reforzar el aprendizaje.

Conceptos Clave

Datos Categóricos: Los gráficos de pastel son ideales para representar datos categóricos, donde cada porción del pastel representa una categoría.
Arcos y Ángulos: Cada porción del gráfico de pastel se representa como un arco, cuyo tamaño es proporcional al valor de la categoría.
Colores y Estilos: La elección de colores y estilos es crucial para la claridad y la estética del gráfico.

Paso 1: Configuración Inicial

Antes de comenzar, asegúrate de tener un entorno de desarrollo configurado con D3.js. Puedes incluir D3.js en tu proyecto mediante un CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Pastel con D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Preparación de Datos

Para este ejemplo, utilizaremos un conjunto de datos simple que representa las ventas de diferentes productos:

const data = [
    { category: 'A', value: 30 },
    { category: 'B', value: 70 },
    { category: 'C', value: 45 },
    { category: 'D', value: 85 },
    { category: 'E', value: 50 }
];

Paso 3: Creación del SVG y Configuración del Gráfico

Primero, crearemos un elemento SVG y definiremos las dimensiones del gráfico:

const width = 450;
const height = 450;
const margin = 40;

const radius = Math.min(width, height) / 2 - margin;

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width / 2}, ${height / 2})`);

Paso 4: Creación de la Escala de Colores

Utilizaremos una escala de colores para diferenciar las categorías:

const color = d3.scaleOrdinal()
    .domain(data.map(d => d.category))
    .range(d3.schemeSet2);

Paso 5: Generación del Gráfico de Pastel

Utilizaremos la función d3.pie para calcular los ángulos de cada porción del pastel:

const pie = d3.pie()
    .value(d => d.value);

const data_ready = pie(data);

Paso 6: Creación de los Arcos

Utilizaremos la función d3.arc para crear los arcos del gráfico de pastel:

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);

svg.selectAll('slices')
    .data(data_ready)
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', d => color(d.data.category))
    .attr("stroke", "white")
    .style("stroke-width", "2px")
    .style("opacity", 0.7);

Paso 7: Añadir Etiquetas

Para mejorar la legibilidad, añadiremos etiquetas a cada porción del pastel:

svg.selectAll('labels')
    .data(data_ready)
    .enter()
    .append('text')
    .text(d => d.data.category)
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .style("text-anchor", "middle")
    .style("font-size", 15);

Ejercicio Práctico

Ejercicio 1: Añadir Interactividad

Añade interactividad al gráfico de pastel para que las porciones se destaquen al pasar el ratón sobre ellas.

Pistas:

Utiliza los eventos mouseover y mouseout.
Cambia el tamaño del arco o el color al pasar el ratón.

Solución:

svg.selectAll('path')
    .on('mouseover', function(event, d) {
        d3.select(this)
            .transition()
            .duration(200)
            .attr('d', d3.arc()
                .innerRadius(0)
                .outerRadius(radius + 10));
    })
    .on('mouseout', function(event, d) {
        d3.select(this)
            .transition()
            .duration(200)
            .attr('d', arc);
    });

Conclusión

En esta sección, hemos aprendido a crear gráficos de pastel utilizando D3.js. Hemos cubierto desde la preparación de datos hasta la creación de arcos y la adición de etiquetas. Además, hemos explorado cómo añadir interactividad para mejorar la experiencia del usuario. Con estos conocimientos, estás listo para crear gráficos de pastel más complejos y personalizados.

En el próximo módulo, exploraremos cómo crear diagramas de dispersión, otra herramienta poderosa para la visualización de datos.

Creando Gráficos de Pastel

Conceptos Clave

Paso 1: Configuración Inicial

Paso 2: Preparación de Datos

Paso 3: Creación del SVG y Configuración del Gráfico

Paso 4: Creación de la Escala de Colores

Paso 5: Generación del Gráfico de Pastel

Paso 6: Creación de los Arcos

Paso 7: Añadir Etiquetas

Ejercicio Práctico

Ejercicio 1: Añadir Interactividad

Solución:

Conclusión

D3.js: De Principiante a Avanzado

Módulo 1: Introducción a D3.js

Módulo 2: Trabajando con Selecciones

Módulo 3: Datos y Escalas

Módulo 4: Creando Visualizaciones Básicas

Módulo 5: Visualizaciones Avanzadas

Módulo 6: Interactividad y Animación

Módulo 7: Trabajando con Datos Reales

Módulo 8: Rendimiento y Optimización

Módulo 9: Mejores Prácticas y Técnicas Avanzadas

Módulo 10: Proyecto Final