Search⌘ K
AI Features
Home
Courses
Introduction to Visualization Using D3.js

Challenge: Falling Circle

Explore how to use D3.js to draw a circle in an SVG canvas and animate its fall with a color transition upon reaching the bottom. Understand SVG manipulation, transitions, and basic animation timing for interactive visual elements.

We'll cover the following...

Problem statement

The tasks in this challenge are as follows:

  • Draw a canvas of size 500 x 500.
  • Draw a circle of radius (r=50) with the origin at (250,50).
  • The circle should transition to the bottom of the canvas and stop there.
  • The circle should change its color from black to green when it touches the base of the SVG canvas.
  • The transition time between the falling of the circle and the changing of the color when it touches the base should be 3000 ms.

Expected output

The output of your code should look like this:

Coding exercise

The problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck then refer to the next lesson which will explain the solution in detail.


If you’re stuck, click the “Show Solution” button.