Circle movement and color transitions. code for this video https://youtu.be/lXFKEqdSWIU

learn-d3-lesson-5.js

const svg = d3.select('body').append('svg')
  .attr('width', '300')
  .attr('height', '300');

svg.append('circle')
  .attr('cx', '100')
  .attr('cy', '0')
  .attr('r', '25')
  .style('fill', '#FFC56C')
  .transition()
  .style('fill', 'red')
  .attr('cy', '300')
  .duration(3000)
  .transition()
  .style('fill', '#FFC56C')
  .attr('cy', '0')
  .duration(2000);

svg.append('circle')
  .attr('cx', '200')
  .attr('cy', '50')
  .attr('r', '25')
  .style('fill', '#6EC5E9')
  .transition()
  .delay(5000)
  .style('fill-opacity', '0.1')
  .duration(3000);

svg.append('circle')
  .attr('cx', '100')
  .attr('cy', '150')
  .attr('r', '25')
  .style('fill', '#003A6F');

svg.append('circle')
  .attr('cx', '200')
  .attr('cy', '150')
  .attr('r', '25')
  .style('fill', '#FF5959');

// code used in this lesson series  https://www.youtube.com/playlist?list=PLxvyAnoL-vu68nJfSUNvJWT6AeIqQBnP8
// this is for Learn d3 Lesson #5: Circle Movement and Color Transitions