Let us Understand D3

Example 1: Create Rectangle using D3
First of all, define a container in html code

<div id="chart"></div>

Now we have container with id as chart
We will select this container and will try to manipulate this DOM element using d3.

DOM selection

d3.select(selectorName)

It will select the first element with the provided name.

d3.selectAll(selectorName)

It will select all elements with the provided name.
So in the example , it will select the chart container.

d3.select("#chart")

DOM Manipulation

After selecting DOM, we need to modify it.
In given example we are adding an element inside the selected element, using "append" method.

append("svg")

To get and set the attribute value, we need to specify it in "attr" method

.attr("width", 600).attr("height", 600)

It will set width and height of svg element as 600 and 600 respectively.

We have several other DOM manipulation methods also.

After selecting the chart container and appending the svg, we will append "rect" , in our svg. "rect" is predefined in d3, similar kind of shapes are also available, where we need to specify the attributes value to get the shape created.

.append('rect')

It will append the rectangle element

.attr('x', 100)
.attr('y', 120)

It will get and set the coordinates of our shape for its positioning in our DOM element.

.attr('width', 100)
.attr('height', 60)

It will get and set the width and height of our rectangle created.

.attr('fill', 'pink')

It will fill the color to our rectangle.

The whole code to create rectangle in our chart container will look like this

d3.select("#chart").append("svg").attr("width", 600).attr("height", 600)
.append('rect')
  .attr('x', 100)
  .attr('y', 120)
  .attr('width', 100)
  .attr('height', 60)
  .attr('fill', 'pink');

Result:

Now let's move to some actual graph example

Example 2: Create pie chart using given data

data = [
{name: "A", score: 18},
{name: "B", score: 16},
{name: "C", score: 14},
{name: "D", score: 22},
{name: "E", score: 5},
{name: "F", score: 14}
];

First of all, define a container in html code

<div id="chart"></div>

Now select the DOM and append svg

var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);

Now append "g" element to svg, g element is used to group svg shapes.

var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');

transform attribute will help us to transform our element, we are using translate function here so it will move our shape to given x and y value.
There are many other transform functions available like rotate, scale etc.

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

d3.arc() will return arc generator. innerRadius and outerRadius will set inner and outer radius value of each arc.

var pie = d3.pie()
.value(function(d) { return d.score; })

d3.pie() function will return pie generator.

var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) => color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')

Now we will append path to our g element, when we need to create complex figures other than simple ones like rectangle and lines we use path element. Path provides d attribute that defines its shape and position in addition to other attributes which are provided by other elements.

The whole code to create pie chart :

var data = [
  {name: "A", score: 18},
  {name: "B", score: 16},
  {name: "C", score: 14},
  {name: "D", score: 22},
  {name: "E", score: 5},
  {name: "F", score: 14}
];

var width = 400;
var height = 400;
var opacity = .8;

var radius = 95
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);

var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

var pie = d3.pie()
.value(function(d) { return d.score; })

var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) => color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')

Result:

In next blog we will discuss some advanced charts.
Stay tuned !!!!!