D3 js Core

The D3 Stands for Data-Driven Documents and is a javaScript library.
The D3js version 4 is modular based and released in June 2016. The version 3 and 4 are not compatible. We can’t create d3 graphic without the SVG element. The SVG scalable vector graphic, HTML 5 directly allow us to add SVG into the web page. D3js need the HTML5.

• D3.js we can animate graphic, play graphic like the movie, interact with the graphic.
• We can add <svg> </svg> element in html page and svg element is block level element or think it as blank canvas.
• The SVG is always the first and the largest element in any D3 graphics, we can’t put have graphic without SVG content to put it in.
• We can’t put DIV and P HTML element in the SVG, as SVG is not a normal HTML element, the SVG is a graphical element and it can only content graphical items such as a rectangle, line, circle and the SVG can also contain text too not within the paragraph element.

Note: A lot of CSS work on the HTML element doesn’t apply to the SVG element. In CSS we use color for the style but in the SVG element we can use fill to apply color in the shape.

Here we will draw the basic shape in d3.js  add the following code in shape.js

var dataArray = [5,11,18];

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

svg.selectAll("rect")
      .data(dataArray)
      .enter().append("rect")
                .attr("height",function(d,i){ return d*15; })
                .attr("width","50")
                .attr("fill","pink")
                .attr("x",function(d,i){ return 60*i; })
                .attr("y",function(d,i){ return 300-(d*15); });

var newX = 300;
svg.selectAll("circle.first")
      .data(dataArray)
      .enter().append("circle")
                .attr("class","first")
                .attr("cx",function(d,i){ newX+=(d*3)+(i*20); return newX; })
                .attr("cy","100")
                .attr("r",function(d){ return d*3; });

var newX = 600;
svg.selectAll("ellipse")
      .data(dataArray)
      .enter().append("ellipse")
                .attr("class","second")
                .attr("cx",function(d,i){ newX+=(d*3)+(i*20); return newX; })
                .attr("cy","100")
                .attr("rx",function(d){ return d*3; })
                .attr("ry","30");

var newX = 900;
svg.selectAll("line")
      .data(dataArray)
      .enter().append("line")
                .attr("x1",newX)
                .attr("stroke-width","2")
                .attr("y1",function(d,i){ return 80+(i*20); })
                .attr("x2",function(d){ return newX+(d*15); })
                .attr("y2",function(d,i){ return 80+(i*20); }); 
 
 

In the first highlight line,  js code tells the browser to look in SVG element to find any rectangle inside the SVG element. If it finds any rectangle, then it returns selection which is an array of the rectangle element. If it doesn’t find any it returns empty selection. In our case, we don’t have any rectangle yet in the SVG element so all the 3 elements will be put at the end of the selection.

Note: In our code above d stand as fred I guess if I’m not wrong and i stand for an index of dataArray.

In the second highlight  svg.selectAll(“rect”).data(dataArray), here we are binding our data array or data to selection and binding does in order as in our example we have any rectangle yet in the SVG element so all the 3 data element will put at the end of the selection.

We can have to case based on the number of data binding element and number of the rectangle in the SVG element.
Case 1: 
If we have less graphic element then the data bind element. Suppose we have 2 rectangles in the SVG element and 3 elements in the data binding an array. When joining the data element, d3 put any leftover data or missing element into the end of the selection.

Case 2: 
In the second case, we have a more graphic element and less number of the data elements to bind. Suppose we have 4 rectangles and our data element have only 3 elements to bind. Then d3 will link first three to the rectangle and put the final rectangle into the exit selection. Instead of end.append we could have exit.remove in such case, end of selection we would be empty and running anything after the dot append would have no effect at all.

Mandatory attribute for the Shape

1. Rectangle: We have four mandatory attributes as x,y, width, and height.
2. Ellipse: We have four mandatory attributes as cx,cy, rx, ry. c stand for the center.
3. Circle: We have 3 mandatory attributes as cx,cy and radius.
4. Line: We have 4 mandatory attributes as x1,y1, x2, y2.

Adding the different way of styling the line:

When working on the line, sometimes we may not see the line in the browser, even we have added line code. The first thing we have to check DOM element of line in the browser, if so then we may not add style to the line. By default in D3js shape are filled with black color and given the stroke of nothing. As most shapes like ellipses and circle show up in the browser, is no border but fill with black color. But for fill online make no sense at all and will not display in the browser.

THREE WAY OF ADDING STYLE FOR THE LINE.

1. Setting an attribute
svg.selectAll(“line”).data(dataArray).enter().append(“line”).attr(“stroke”, “blue”).attr(“stroke-width”, “2”)

2. Dot style
svg.selectAll(“line”).data(dataArray).enter().append(“line”).style(“stroke”, “green”)

3. Adding style to CSS
svg.selectAll(“line”).data(dataArray).enter().append(“line”) and add following css style of line in style.css
line{
stroke:red;
}

Note: Styling the graphic in the D3 have different precedence as follows style has the highest precedence and then CSS and the attribute have the least attribute.  We have to use CSS styling for the graphic element in D3js as much as possible.  As of CSS, we can easily manage the style declare in one place and can reduce the file size as style is applied in another file.