¿Cómo crear un botón que añada círculos aleatorios en D3?

Autor: | Última modificación: 28 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Uno de los ejercicios más sencillos y dinámicos para el desarrollo de la visualización de datos en tu procesamiento de los macrodatos consiste en la creación de botones que activen funciones simples de formas aleatorias. Por esta razón, en este post, te enseñamos cómo crear un botón que añada círculos aleatorios en D3 (Data-Driven Documents).

¿Cómo crear un botón que añada círculos aleatorios en D3?

Como primera aclaración debes saber que, para crear un botón que añada círculos aleatorios en D3 (Data-Driven Documents), no hace falta considerar el tamaño, las etiquetas, el lienzo ni los márgenes, tan solo hace falta enunciarlo para que se produzca.

Para posiciones aleatorias, deberás utilizar una función de JavaScript que es más aleatoria. A partir de allí, este devuelve un float que es un decimal entre 0 y 1. En primer lugar, debes saber cómo funciona una consola de JavaScript, te la mostramos a continuación:

¿Cómo crear un botón que añada círculos aleatorios en D3? 1

Ahora, a partir de este punto, podrás inscribir Math Random, que te devolverá un valor aleatorio entre 0 y 1, así:

¿Cómo crear un botón que añada círculos aleatorios en D3? 2

Además, cada vez que lo llames, la consola te mostrará un valor distinto que entre en el rango entre 0 y 1. Este proceso es muy útil para crear un botón que añada círculos aleatorios en D3 (Data-Driven Documents). Ahora debes dirigirte al Index y poner HTML para que lo reconozca de la siguiente forma:

¿Cómo crear un botón que añada círculos aleatorios en D3? 3

Posteriormente, tendrás que agregar el link CSS, el script, el div y un script source. Deberás crearlo todo si aún no está creado y guardarlo. En la consola se vería así:

¿Cómo crear un botón que añada círculos aleatorios en D3? 4

A partir de allí, no se modificará más esta información. Sin embargo, una vez guardada, la buscarás en la pestaña de Sources en el menú lateral derecho para después inscribir en la consola la sintaxis que cree el botón que añada círculos aleatorios en D3 (Data-Driven Documents).

Allí, deberás establecer los valores básicos, es decir, la constante de margen y de SVG (Scalable Vector Graphics), según el interés y personalización de tu procesamiento de los datos. A continuación un ejemplo:

¿Cómo crear un botón que añada círculos aleatorios en D3? 5

Ahora, no tendrás que crear el d3.select, puesto que, como ya se ha establecido como constante, solo hace falta llamarlo con el elementGroup y sus respectivas etiquetas.

Para crear el botón que añada círculos aleatorios en D3, tendrás que seguir los siguientes pasos:

Crear un círculo cualquiera

A través de ElementGroup con la etiqueta de «círculo» y los atributos de X, Y y r.

¿Cómo crear un botón que añada círculos aleatorios en D3? 6

Crear un círculo con valores aleatorios

Para ello, podrás utilizar la función de Math.random, además de contar con la opción de var (variable), por ejemplo: *700 + 50.

Así se crean las variables en cuanto a X y Y. Para esta instancia, cada vez que se refresque la página, la consola arrojará un círculo de diferentes posiciones y tamaños.

¿Cómo crear un botón que añada círculos aleatorios en D3? 7

Crear una función que genere círculos en posiciones aleatorias

Consiste en instaurar en el JavaScript la siguiente función: ranCircle(), de manera que cada vez que la ejecutes se generen los círculos.

¿Cómo crear un botón que añada círculos aleatorios en D3? 8

Crear el botón que active la función

Este último paso consiste en crear un botón que active la función anterior: para ello, podrás hacerlo con la etiqueta de HTML de Button en el index y con el nombre personalizado que decidas de la siguiente forma:

¿Cómo crear un botón que añada círculos aleatorios en D3? 9

El botón se agregará y, para que la función de JavaScript llame en D3 a ranCircle(), tendrás que inscribir la siguiente fórmula:

¿Cómo crear un botón que añada círculos aleatorios en D3? 10

Finalmente, cada vez que hagas clic en el botón surgirán círculos de tamaños y posiciones aleatorias.

¿Cómo crear un botón que añada círculos aleatorios en D3? 11

¿Cuál es el siguiente paso Big Data?

Por medio de este post, has podido aprender cómo crear un botón que añada círculos aleatorios en D3 (Data-Driven Documents), sin embargo, ¡aún quedan muchas más funciones por aprender en esta librería de diseño visual!

Desde KeepCoding te aconsejamos el Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning. De esta forma, comprenderás que todo buen data scientist debe tener una buena base de estadística, así como también es muy importante la base de álgebra, cálculo y geometría. Además, entre muchas otras cosas, aprenderás cómo funcionan las redes neuronales y cómo aplicarlas a diferentes tipos de problemas en el estudio de los macrodatos. Todo ello se lleva a cabo de la mano de expertos en el mundo del manejo del Big Data. ¡No esperes más para inscribirte!

👉 Descubre más del Big Data, Inteligencia Artificial & Machine Learning Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 5.000 vacantes para desarrolladores de Big Data sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!