Computer Graphics
Published
Edited
Jul 8, 2020
2 forks
// Un círculo
circulo = d3.select('whatever')
.append('circle')
.attr('r', 15) // tiene un radio
.attr('cx', 20) // un centro x
.attr('cy', 20) // un centro y
circulo.transition()
.attr('cx', 280) // el nuevo centro x
.attr('cy', 80) // el nuevo centro y
animacion1 = {
// 1. Creamos el área de dibujo
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
// 2. Creamos nuestro círculo
const circle = svg.append('circle')
.style('fill','#ff006e')
.attr('r', 15)
.attr('cx', 20)
.attr('cy', 20)
// 3. Bucle de animación infinito, repetimos la acción una y otra vez.
while(true){
// Retornamos
yield svg.node()
await circle.transition() // espera a que se ejecute la transición
.delay(2000)
// Demora de arranque en milisegundos
// Modos de transición, prueben cambiando el método easeCubicInOut
// por alguno de los otros que están comentados.
//También prueben cambiando los valores de delay.
.ease(d3.easeCubicInOut)
// .ease(d3.easeLinear)
// .ease(d3.easePoly.exponent(5))
.duration(500) // Demoras de desplazamiento en milisegundos
.attr('cx', 280)
.attr('cy', 80)
.transition()
.delay(2000) // Demora de retorno en milisegundos
.attr('cx', 20)
.attr('cy', 20)
.end()
}
}
animacion2 = {
// 1. Creamos el área de dibujo
const svg = d3.create('svg')
.attr('width', width2)
.attr('height', height2)
// 2. Creamos nuestro círculo
const circle = svg.append('circle')
.attr('r', 15)
.attr('cx', 50)
.attr('cy', 50)
.style('fill', '#ff006e')
// 3. Bucle de animación infinito, repetimos la acción una y otra vez.
while(true) {
// Retornamos
yield svg.node()
await circle.transition() // espera a que se ejecute la transición
.ease(d3.easeSinInOut) // prueben también con .ease(d3.easeExpIn)
.delay(500)
.duration(2000)
.attr('r', 40)
.style('fill', '#ff006e')
.transition()
.attr('r', 5)
.style('fill', '#8338ec')
.end()
}
}
// Sampleo 360 grados en tantas partes como me lo indique circles_slider
data = d3.range(0, 2 * Math.PI, 2 * Math.PI/circles_slider)
animacion3 = {
// 1. Creamos el área de dibujo
const svg = d3.create('svg')
.attr('width', width3)
.attr('height', height3)
// Centro del círculo y su radio máximo
const cx = 200
const cy = 200
const r = 170
// 2. Creamos nuestro círculos
const circle = svg.selectAll('circle')
.data( data )
.enter()
.append("circle")
.attr('r', 15)
// Posicionamos los círculos alrededor de un círculo de radio r centrado en cx,cy
.attr('cx', d => cx + r * Math.cos(d)) // Un poco de trigonometría
.attr('cy', d => cy + r * Math.sin(d)) // Un poco de trigonometría
.style('fill', (d,i) => d3.quantize(d3.interpolateRainbow, data.length + 1)[i])
// 3. Bucle de animación infinito, repetimos la acción una y otra vez.
while(true) {
yield svg.node()
// Cada punto se traslada al extremo opuesto de la pantalla
await circle.transition()
.duration(5000) // Prueben reemplazar .attr('cx') por .attr('cy') y viceversa
.attr('cx', (d,i,arr) => 400 - d3.select(arr[i]).attr('cx'))
.attr('cy', (d,i,arr) => 400 - d3.select(arr[i]).attr('cy'))
.end()
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
