Example of SVG elements drawing with D3.js

In this demo, we are showing how to use D3.js to draw a few common SVG elements,

• rectangles
• circles and ellipses
• line (whose co-ordinates you can chose)
• polygon
• randomized data-driven path.

---

Draw a box

---

Draw a few circles

---

Draw overlapping ellipses

---

Draw a couple of polygons

---

Draw a line

(you can try various co-ordinates for the line but you have to reload the page each time)

Draw a line with these co-ordinates (Enter x1, y1, x2, y2 four positive numbers).

x1 (20-100): , y1 (20-100): , x2 (100-300): , y2 (40-100):

---

Draw a path

(The path is randomly generated but you have to reload the page each time you want to draw a new path)