Javatpoint Logo
Javatpoint Logo

Drawing Charts in D3.js

D3.js can be used to design any SVG chart statically. It can provide its support to design the charts listed below:

  • Bar Chart
  • Bubble Chart
  • Circle Chart
  • Donut Chart
  • Line Chart
  • Pie Chart

Let's consider the charts, as mentioned above, one by one in detail.

Bar Chart

These charts are the most widely used charts among all the other charts. The bar charts are applied to compare and show the frequency, number, and other measures (like mean) for distinct, discrete groups or categories. These charts are designed in a form that the lengths and heights of the distinct bars will be proportional to any category's size they present.

Some important key-points are as follows:

  • The horizontal axis (x-axis) illustrates the distinct types of categories; it contains no scale.
  • The vertical axis (y-axis) does not have any scale, and it shows the measurement's units.
  • The bars could be created either horizontally or vertically depends on the length and category's number or category's complexity.

Drawing of Bar Charts

Let's design the bar chart with the help of the D3 in SVG. In the following-mentioned example, we will use the rect components for the text components and bars to show our values of data related to bars.

Look at the following illustration of a bar chart:



width- SVG width

scaleFactor- Scaled to the values of the pixel, i.e., visible on the screen.

barHeight- It is the horizontal bar's static height.


The result of the above code will be as follows:

Drawing Charts in D3.js

Circle Charts

Any circle chart can be defined as the circular graphic statistically, which is categorized into slices for showing the numerical proportion.

Drawing of Circle Chart

Let's make the circle chart with the help of D3 in SVG.

The example of drawing a circle chart is depicted below:

Example: In the following illustration-


width- SVG width

height- SVG height

data- Data element's array

colors- Apply colors on the circle items.

Some other attributes-

Var g= svg.selectAll("g")- Creates the group items to hold a circle.

.data(data)- Binds our array of data to any group item.

.enter()- Creates the placeholders to our group items.

.append("g")- Appends the group items for our page.


The output will be as follows-

Drawing Charts in D3.js

Pie Chart

The pie charts are the circular graphic that is designed statistically. These are categorized into some slices to display numerical proportions.

Let's learn how to design the pie chart using D3.

Drawing of Pie Chart

First of all, we have to learn two of the essential methods which are listed below:

  • d3.arc
  • d3.pie

Let's discuss the above two methods in more detail.

d3.arc: This method produces an arc. We need to fix an internal radius and also an external radius for the arc. When the internal radius contains 0, then the outcome will be the pie chart, the outcome will be the donut chart.

d3.pie: The second method, d3.pie, produces the pie chart. The d3.pie method holds the data from the dataset and determines the start and end-angle for all the pie chart's wedge.


The following is an example to display a basic pie chart. Have a look:


The output is as follows:

Drawing Charts in D3.js

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA