Creating simple shapes

In this recipe, we will explore a few simple built-in SVG shape formulae and their attributes. These simple shapes are quite easy to generate and are usually created manually using D3 when necessary. Though these simple shapes are not the most useful shape generator to know when working with D3, occasionally they could be handy when drawing peripheral shapes in your visualization project.

Getting Ready

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

How to do it...

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)
    ...