00:00 / 00:00
Usando layouts de D3js para representar datos
Force layout
Este ejemplo no lo comentaremos en detalle, pues daría para dos tutoriales él solo. Lo hemos añadido para demostrar que d3 permite añadir dinamismo e interactividad. Puedes acceder al código del ejemplo en el siguiente enlace
El layout
Force layout analiza todos los elementos disponibles y les añade una fuerza de atracción o repulsión que depende de las distancias, como si fueran cargas eléctricas. Una vez calculadas las fuezas, asigna hacia dónde se moverían y que posición ocuparían. Seguidamente, se mueven los elementos y se vuelve a calcular en un bucle infinito.
En nuestro ejemplo, encima, queremos que las provincias de cada Comunidad Autónoma estén juntas, por lo que los elementos se tienen que atraer entre sí de forma independiente al resto.
Collide
También hay que evitar que los círculos se superpongan. Para eso, hay que definir la función que determina si están chocando o no y parar la atraccion.
Drag and Drop
Finalmente, para que el ejemplo sea más interactivo, hay que crear la función que mueve los elementos cuando se arrastran con el ratón.
¿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.