// circle with a radius of 15px at position (20,20)
circle = d3.select('whatever')
.append('circle')
.attr('r', 15)
.attr('cx', 20)
.attr('cy', 20)
circle
.transition()
.attr('cx', 280)
.attr('cy', 80)
circle.transition()
.delay(1200)
.duration(1200)
.ease(d3.easeLinear)
.attr('cx', 280)
.attr('cy', 80)
circle
.transition()
.delay(1200)
.duration(1200)
.attr('cx', 280)
.attr('cy', 80)
.transition()
.delay(1200)
.duration(1200)
.attr('cx', 20)
.attr('cy', 20)
animation1 = {
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 100)
const circle = svg.append('circle')
.attr('r', 15)
.attr('cx', 20)
.attr('cy', 20)
while(true) {
yield svg.node()
await circle
.transition()
.delay(1200)
// try uncommenting the transitions below to see how they effect the animation
.ease(d3.easeCubicInOut)
// .ease(d3.easeLinear)
// .ease(d3.easePoly.exponent(5))
.duration(1200)
.attr('cx', 280)
.attr('cy', 80)
.transition()
.delay(1200)
.attr('cx', 20)
.attr('cy', 20)
.end()
}
}
animation2 = {
// breathing
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100)
const circle = svg.append('circle')
.attr('r', 15)
.attr('cx', 50)
.attr('cy', 50)
.style('fill', '#4269bd')
while(true) {
yield svg.node()
await circle
.transition()
.ease(d3.easeSinInOut)
.delay(500)
.duration(2000)
.attr('r', 20)
.style('fill', '#6887ca')
.transition()
.attr('r', 15)
.style('fill', '#4269bd')
.end()
}
}
animation3 = {
const data = d3.range(0, 2 * Math.PI, 2 * Math.PI/20)
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
const circle = svg
.selectAll('circle')
.data( data )
.join('circle')
.attr('r', 15)
.attr('cx', d => 150 + 130 * Math.cos(d))
.attr('cy', d => 150 + 130 * Math.sin(d))
.style('fill', (d,i) => d3.quantize(d3.interpolateRainbow, data.length + 1)[i])
while(true) {
yield svg.node()
await circle
.transition()
.duration(5000)
.attr('cx', (d,i,arr) => 300 - d3.select(arr[i]).attr('cx'))
.attr('cy', (d,i,arr) => 300 - 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.
