First of all to begin this D3 SVG Circle Example we need some D3 code. To start with we will create a background.

See the Pen svgD3CircleExampleOne by Daniel (@Parsons) on CodePen.

In the D3 code above a ‘svg’ element is created and appended to the selected element with an id of ‘svgCircle’. A ‘width’ and ‘height’ attribute is added to the svg as is a style attribute.

Now for the circle. All we need to add is a circle to the ‘svg’ by using append. Next we can add the ‘cx‘ attribute to the circle element to define the location for the centre of the circle on the x-Axis. We also add a ‘cy‘ attribute to the circle element to define the location for the centre of the circle on the y-Axis. The ‘r’ attribute defines the radius of the circle. Finally we add a style attribute to fill the circle with a colour.

See the Pen svgD3CircleTwoExample by Daniel (@Parsons) on CodePen.

Maybe the circle is a little pale in contrast with the background. To fix that we can change the ‘fill’ value of the circle on line 10 to a darker blue.

See the Pen svgD3CircleDifferentSyntax by Daniel (@Parsons) on CodePen.

Now for an ellipse svg created with D3.

See the Pen d3svgCircleExampleThree by Daniel (@Parsons) on CodePen.

The ‘rx‘ attribute on line 9 defines the x-radius of the ellipse. The ‘ry‘ attribute defines the y-radius of the ellipse.

And to fix the paleness simply change the ‘fill’ value to a darker colour.

See the Pen svgD3EllipseDarkerColour by Daniel (@Parsons) on CodePen.

Another possibility is to change the aspect of the ellipse from vertical to horizontal. This is simply done by making the ‘rx’ value ‘100’ pixels and ‘ry’ value ’50’ pixels. In other words flipping the values.

See the Pen svgEllipsehorizonalExample by Daniel (@Parsons) on CodePen.


More on D3 (Data Driven Documents)

D3 logo
SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *