Here are some d3 svg shapes examples.
The first example begins with a ‘svg’ element appended to the selected id value of ‘svgTriangle’. The width attribute is set to a value of ‘360’ pixels. The height attribute is set to a value of ‘250’ pixels. A background attribute is added with a hexadecimal color value of ‘#dff0d8’.

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

Now a ‘polyline’ element is added with points defined to create a triangle. The ‘points’ are defined as (55 225) for the bottom left point of the triangle. Then (180 25) for the middle top point of the triangle and finally (305,225) for the bottom right point of the table. In each set of coordinates the first number is the plot for the x-Axis and the second number is the plot for the y-Axis. The ‘fill’ attribute for the triangle defined by the points in the polyline is a hexadecimal value of ‘#3c763d’.

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

An octagon is defined as ‘a plane figure with eight straight sides and eight angles’. First begin by adding a svg element to the DOM. Add a width, height and fill attribute to create a beige background.

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

And here is an octagon created using the ‘polygon’ element.

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

The polygon element has points defined. These can be explained as such:

  • (75,52.5) – top left corner.
  • (250,52.5) – top right corner.
  • (262.5,65) – top right side.
  • (262.5,190) – bottom right side.
  • (250,202.5) – bottom right corner.
  • (75,202) – bottom left corner.
  • (62.5,190) – bottom left side.

Finally the octagon is given some styling by adding a couple of style attributes such as ‘fill’, ‘stroke’ and ‘stroke-width’.

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

Here is a very basic example to finish up on. A straight line. Perhaps you may like to dive into the code and see manipulate the coordinates.

See the Pen svgD3LineExample 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 *