D3.js tutorial - Part 5 - Create SVG and draw a circle

Create SVG

D3.js graphics is based on SVG (Scalable Vector Graphics). SVG is an XML-based vector image format with an open standard specifications. The basic idea is to add a SVG container (SVG tag) where the D3.js chart must be rendered. The graphics will later be insterted in this container. First, let's see how to append a SVG container in the document:

var svg = d3.select("body")
            .append("svg")
            .attr("width", 300)
            .attr("height", 200)
            .style('background-color', 'lightgrey')

• The first line select the page body
• The second line append a <svg> tag in the body
• The two next lines set SVG container size (300 x 200 pixels)
• The last line set the background to grey (otherwise we couldn't see the container)

Here is a live example:

Draw a circle

To draw a circle in the SVG container, simply add a <circle> tag inside the container and specify the circle properties as attributes:

//Draw the Circle
var circle = svg.append("circle")
                .attr("cx", 150)
                .attr("cy", 30)
                .attr("r", 20);

The previous code draw a circle with the following properties:

• center = (cx, cy) = (150,30)
• raduis = 20 pixels

Here is our circle:

See also

• D3.js tutorial
• D3.js tutorial - Part 1 - Start with D3.js
• D3.js tutorial - Part 2 - Selectors
• D3.js tutorial - Part 3 - Basic methods
• D3.js tutorial - Part 4 - Method chaining
• D3.js tutorial - Part 6 - Basic shapes
• D3.js tutorial - Part 7 - Data binding
• D3.js tutorial - Part 8 - Bar chart
• D3.js tutorial - Part 9 - Resize chart
• D3.js tutorial - Part 10 - Scale chart
• D3.js tutorial - Part 11 - Responsive chart
• D3.js tutorial - Part 12 - Axes

---