Graphs in D3.js

A graph can be defined as any 2D flat space illustrated as the rectangle. A graph has the coordinate space in which two coordinates (x=0 and y=0) fall over the bottom left side. A graph has coordinate X, which grows from the left direction in the right direction. However, the coordinate Y is growing in the right direction in the left direction.

If we discuss design any circle along with some coordinates like x= 20 and y= 20, we go 20 units in the right direction from the bottom left direction, and after that, we go 20 units up.

Coordinate Space in SVG

The coordinate space in SVG implements within the similar way as mathematical graph. But, except the two of the essential features, which are as follows:

Coordinate space of SCG contains the coordinates x=0, and y=0 falls at the direction top left..
Coordinate space of SCG contains the coordinate Y growing to bottom from the top.

Coordinate Space Graph in SVG

If we discuss about designing any circle along with some coordinates like x= 20, and y= 20, we will go 20 units to the right direction from the bottom left direction and after that we go 20 units up. It can be represented as follows:

 var svgContainer = d3
   .select("body")
   .append("svg")
   .attr("width", 200)
   .attr("height", 200);

Let's consider an element of SVG. We can consider any graph that is 300 units tall and 300 units wide. We know that the coordinates X and Y are on the top left. Also, we have knowledge that as the coordinate Y grows, it moves from top to bottom direction of the graph. We can design the elements of SVG as follows:

 var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 300)
   .attr("height", 300)
   .style("border", "1px solid black");

Graph Illustration

Let's take an illustration of a line graph as follows:

Line Graph: The line graph can be used for visualization over time. This graph compares any two variables. Both variables are plotted on an axis. The line graph contains the horizontal axis and the vertical axis.

Example:

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

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

<div id="my_dataviz"></div>
<script>

var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

  function(d){
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

  function(data) {

    var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return d.date; }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.date) })
        .y(function(d) { return y(d.value) })
        )
})
</script>

Output: