SVG canvas in d3.js

D3 need to be able to have a space defined for it to draw things. And when you define the space it's going to use, you can also give the space you're going to use a name, attributes and positions within that space a designation.

Example:
          var svg = d3.select("body")
               .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 + ")"); 

In the above example 'append' is used to add the svg element (a canvas that we are going to draw things on) to the body element.

We also add an element 'g' that is referenced to the top left corner of the actual graph area on the canvas. 'g' is actually a grouping element in the sense that it is normally used for grouping together several related elements. So in this case those grouped elements will have a common reference.

In the above example we also added g element, the element is referenced to the top left corner of the graph area. Here 'g' is a grouping element I already mentioned in 'SVG Group Elements'  blog.

append("svg")
    .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)



The above code tells us that the 'svg' element has a "width" of width + margin.left + margin.right and the "height" of height + margin.top + margin.bottom.


  .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

The above code tells us that the element "g" has been transformed by moving(translating) to the point margin.left, margin.top.This way when we tell something to be drawn on our canvas, we can use the reference point "g" to make sure everything is in the right place.

SVG Group Elements

SVG Group Element:The SVG Group Element is used to group SVG elements together.It is a container that contains all child SVG elements defined inside of it. It is defined by <g> and </g>. It can be nested inside of other SVG Group Elements.


<g>
    <g>
        <g>
           ....
        </g>
    </g>
</g>


There are two major uses of SVG group elements.

1.Grouping
2.Transforming

Grouping SVG Elements Together: 

To group a set of SVG elements that share the same attribute.

 <svg width="200" height="200">
      <g>
         <circle cx="20" cy="20" r="20" fill="green" />
         <circle cx="70" cy="70" r="20" fill="purple" />
       </g>
        <g>
          <rect x="110" y="110" height="30" width="30" fill="blue" />
           <rect x="160" y="160" height="30" width="30" fill="red" />
        </g>
 </svg>

With the SVG Group element, we can organize all of the circles together and all of the rectangles together.This makes our SVG visualization more organized (which is a win) as well as easier to read.

Which is one of the goals of using the SVG Group Element - to group a set of SVG elements that share the same attribute. In this example - grouping all the circles together and all the rectangles together.


Transforming SVG Elements Together:
             To define a new coordinate system for a set of SVG elements by applying a transformation to each coordinate specified in this set of SVG elements.

SVG Transform Attribute:
              The SVG Transform Attribute applies a list of transformations to an element and it's children.The transformation from right to left.They are applied right to left because they are treated as nested transforms.


<svg width="200" height="200">
   // This:
      <g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
           ...
       </g>

  // Being Equivalent to this:
   <g transform="translate(...)">
      <g transform="scale(...)">
        <g transform="rotate(...)">
          <g transform="translate(...)">
            <g transform="rotate(...)">
               ...
             </g>
          </g>
        </g>
      </g>
    </g>
</svg>

There are six types of transformations available. I am using below transformations in my programming mostly.

transformation:
 translate(<x> [<y>])
explanation:
This transform specifies a translation by x and y. If y is not provided, it is assumed to be zero.

transformation:
scale(<x> [<y>])
explanation:
This transform specifies a scale operation by x and y. If y is not provided, it is assumed to be equal to x.

Data Visualizations using D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3 allows us to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, we can use D3 to generate an HTML table from an array of numbers.

For example, to change the text color of paragraph elements:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, we can rewrite the above loop as:

d3.selectAll("p").style("color", "white");

Yet, we can still manipulate individual nodes as needed:

d3.select("body").style("background-color", "black");


Topsoil is using  SVG  for data visualizations. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C).