How to draw shapes (Polygon, Ellipse, Rectangle, Circle) using D3.js?

How to draw shapes (Polygon, Ellipse, Rectangle, Circle) using D3.js?

D3.js is an advanced JavaScript library to present Data Visuals. It is simple & easy to implement. D3 supports JSON data formatting. Using D3.js you can create any kind of Charts (Bar Charts, Line Charts, Pie Charts …), Pyramids, Tree, Symbol Maps, Network Topology, Plots, Dashboard & Animations. This advanced JavaScript library supports all modern browsers. To start with D3.js you just need to refer the CDN link of D3.js in a script tag to your HTML page. In the below example I created a sample application to show you how to draw various of shapes using D3.js. In this example I did created samples for text label, image, circle, rectangle, ellipse, line & polygon.

To draw shapes using D3.js in the head section I referred the CDN link of D3.js library. To embed the D3 shapes I added a div to my HTML page with the id “d3shapes”. After this div in body part I am executing the scripts. In-side the scripts block Initially I created a variable “svg” where I am selecting the div with“#d3shapes”). Then later I am adding D3.js syntax to embed variety of shapes.

For an example to embed a “text” label I append text to svg & setting it’s attributes using attr with key & value pair. In this example to embed an image using D3.js I used image path as “images/ap.png”. Before run this application you can replace this with your image path.

Example of Creating Shapes using D3.js

<!DOCTYPE html>
<title>How to draw shapes using D3.js?</title>
<script src=""></script>
<div id="d3shapes"></div>
<script type="text/javascript">
/* Appening svg to topology Div */
var svg ="#d3shapes")
.attr("width", "100%")
.attr("height", "500px")

/* Example to display Text using D3.js */
.attr("x", "50px")
.attr("y", "50px")
.attr("class", "text")
.text("This is a sample text.");

/* Example to draw Image using D3.js */
.attr("xlink:href", "images/ap.png")
.attr("x", "80px")
.attr("y", "80px")
.attr("width", "64px")
.attr("height", "64px");

/* Example to draw circle using D3.js */
.attr("cx", "200px")
.attr("cy", "80px")
.attr("r", "20px");

/* Example to draw rectangle using D3.js */
.attr("x", "10px")
.attr("y", "10px")
.attr("width", "50px")
.attr("height", "100px");

/* Example to draw ellipse using D3.js */
.attr("cx", "50px")
.attr("cy", "50px")
.attr("rx", "25px")
.attr("ry", "10px");

/* Example to draw line using D3.js */
.attr("x1", "300px")
.attr("y1", "5px")
.attr("x2", "300px")
.attr("y2", "100px")
.attr("stroke-width", "2px")
.attr("stroke", "black");

/* Example to draw polygon using D3.js */
.attr("points", "05,30 15,10 25,30")
.attr("stroke-width", "2px")
.attr("stroke", "black");