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

Drawing a Circle

Explore the process of drawing an SVG circle using D3.js by learning about essential attributes such as the circle's center coordinates, radius, and fill color. Understand how to define and manipulate these properties to create basic shapes within an SVG canvas.

We'll cover the following...

SVG circle

Let’s explore another important SVG element, the circle. The circle is represented by the <circle> tag in D3.js.

Drawing the circle in D3.js is very easy. Let’s draw an SVG circle in the following code.

Explanation

Let’s dive into an explanation of the above code to better understand how to draw a circle.

  • From line 2 to line 6 in the JavaScript tab, we defined the SVG canvas of size 300 by 300 pixels with the red boundary.

  • From line 8 to line 12 in the JavaScript tab, we have created a circle.

We have used the following attributes in defining the circle. Let’s discuss them one by one:

cx: The x-coordinate of the center of the circle relative to the origin.

cy: The y-coordinate of the center of the circle relative to the origin.

r: The radius of the circle.

fill: The function used to give color to the graphical element.

The following illustration will help you in understanding different attributes of the circle and will show the relative position of circle to the origin.