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:

Example:

Attributes

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.

<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect 
{
fill: black;
}
svg text 
{
fill: white;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [11, 6, 13, 15];
var width = 300 
scaleFactor = 20, 
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { 
return (d*scaleFactor); 
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>

Output:

The result of the above code will be as follows:

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-

Attributes-

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.

<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [11, 21, 31];
var colors = ['blue', 'yellow', 'pink'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>

Output:

The output will be as follows-

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.

Example:

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

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Build the div in which the graph will hold place -->
<div id="my_dataviz"></div>
<script>

// set the margins and dimensions of the graph
var width = 450
    height = 450
    margin = 40

// The pieplot's radius is half the height or half the width (smallest one). we will subtract a margin's bit.
var radius = Math.min(width, height) / 2 - margin

// append a svg object with the div known as 'my_dataviz'
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Create the dummy data
var data = {a: 9, b: 20, c:30, d:8, e:12}

// set the scale of color 
var color = d3.scaleOrdinal()
  .domain(data)
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

// Analyse every group's position over the pie:
var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))

// Create a pie chart: Each pie's part is any path that we create using an arc function.
svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', d3.arc()
    .innerRadius(0)
    .outerRadius(radius)
  )
  .attr('fill', function(d){ return(color(d.data.key)) })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)
</script>

Output:

The output is as follows: