Elements: Circle, Ellipse, and Rectangle

What is an element?

We will begin by describing what we mean when we talk about an “element.”

There is considerable scope for confusion when talking about elements on a web page. Are we talking about HTML elements, SVG elements, or something different?

In fact, we are going to be describing a subset of SVG elements. Specifically, a collection of common shapes and objects which include circles, ellipses, rectangles, lines, polylines, polygons, text, and paths.

“Text?” I hear you say. “Doesn’t sound like a shape.” I suppose it depends on how you think of it. We can use text in different ways in D3. But for this particular exercise, we can regard text as an SVG element.

Circle

A circle is a simple SVG shape that is described by three required attributes.

• cx: The position of the centre of the circle in the x-direction (left/right) that is measured from the left-side of the screen.
• cy: The position of the centre of the circle in the y-direction (up/down) that is measured from the top of the screen.
• r: The radius of the circle from the cx, cy position to the perimeter of the circle.

The following is an example of the code section required to draw a circle: