Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter7/simple-shapes.html

In this recipe, we will draw four different shapes in four different colors using native SVG shape elements:

<script type="text/javascript">
    var width = 600,
        height = 500;
        
    var svg = d3.select("body").append("svg");
    
    svg.attr("height", height)
        .attr("width", width);    
        
    svg.append("line") // <-A
        .attr("x1", 0)
        .attr("y1", 200)
        .attr("x2", 100)
        .attr("y2", 100);
        
    svg.append("circle") // <-B
        .attr("cx", 200)
        .attr("cy", 150)
        .attr("r", 50);
        
    svg.append("rect")
        .attr("x", 300) // <-C
        .attr("y", 100)
        .attr("width", 100) // <-D
        .attr("height", 100)
        .attr("rx", 5); // <-E
        
    svg.append("polygon")
        .attr("points", "450,200 500,100 550,200"); // <-F
</script>

The preceding code generates the following visual output:

Simple SVG shapes

We have drawn four different shapes: a line, a circle, a rectangle, and a triangle in this example using SVG built-in shape elements.

A little refresher on SVG coordinate system

SVG x and y coordinate system originates from the top-left corner (0, 0) of the canvas and ends on the lower-right corner (<width>, <height>).

All SVG shapes can be styled using style attributes directly or through CSS similar to HTML elements. Furthermore, they can be transformed and filtered using SVG transformation and filter support, however, due to limited scope in this book, we will not cover these topics in detail. In the rest of this chapter, we will focus on D3-specific supports on SVG shape generation instead.

SVG also supports ellipse and polyline elements, however, due to their similarity to circle and polygon we will not cover them in detail in this book. For more information on SVG shape elements, please visit http://www.w3.org/TR/SVG/shapes.html.