Gráficas con D3js (I)
Aprendiendo a trabajar con D3js implementando un gráfico de tarta.
Gráficas con d3js
Temario
1. Instalando d3js
Cuando queremos hacer alguna gráfica y sólo queremos adornar nuestras ventanas, lo normal es que arranquemos por alguna suite de gráficas precocinadas.
Si nuestro cliente necesita algo más serio, nos va a pedir personalizaciones y mejoras que esos gráficos precocinados puede que no nos den, es hora de arremangarse y aprender d3js.
2. Creando un gráfico de tarta
Vamos a crear el mínimo para tener una gráfica de tarta, verás que el proceso es muy directo, donde se nos va a ir el tiempo será personalizando la gráfica y añadiendo detalles, ésto lo veremos más adelante.
3. Añadiendo un texto en cada porción
Ya tenemos la gráfica, pero ahora viene nuestro jefe y nos dice... "Paco.... quiero ver los texto de que es cada cosa dentro de su quesito en la gráfica"
Vamos a ver como hacer ésto.
4. Ocultando el texto si no cabe
Mostrar un texto centrado en cada porción está bien, pero ¿ Qué pasa si no hay espacio para mostrar ese texto? Si nos ponemos en el caso de que una porción es demasiado pequeña, puede quedar bastante mal intentar mostrar un texto, vamos a ver como arreglar ésto.
5. Añadiendo un tooltip
Vamos a ver ahora como interactuar con eventos del DOM: cuando pasemos el ratón por encima de una porción, mostraremos un tooltip con el nombre del mes y venta.
¿Te apuntas a nuestro máster?
Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.