Google News
logo
D3.js Interview Questions
By using the command d3.xml(url[mimeType][,callback]) XML file can be called. This command will create a request for the XML file at the specified url. If a call back is declared, the request will be immediately processed with the GET method and the call back will be invoked when the file is loaded, or request fails.
version 3: d3.scale.linear() : Constructs a new linear scale with the default domain [0,1] and the default range [0,1]. Thus, the default linear scale is equivalent to the identity function for numbers; for example linear(0.5) returns 0.5.
 
version 4: d3.scaleLinear() : Constructs a new continuous scale with the unit domain [0, 1], the unit range [0, 1], the default interpolator and clamping disabled. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.
var data = [
  {"ORDER": 1, "apples": 3840, "bananas": 1920, "cherries": 960},
  {"ORDER": 2, "apples": 1600, "bananas": 1440, "cherries": 960},
  {"ORDER": 3, "apples":  640, "bananas":  960, "cherries": 640},
  {"ORDER": 4, "apples":  320, "bananas":  480, "cherries": 640}
];

var h = 200;
var w = 200;
var svg = d3.select('body').append('svg').attr('width',w).attr('height',h);
var g = svg.append('g');


var x = d3.scaleBand().rangeRound([0, w-50]);
var y = d3.scaleLinear().range([h-50, 0]).domain([0,10000]);
var color = ['#bae4bc','#7bccc4','#43a2ca'];

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);
    
var series = stack(data);

x.domain(data.map(function(d) { return d.ORDER; }));

g.append("g")
    .selectAll("g")
    .data(series)
    .enter().append("g")
        .attr("fill", function(d,i) { return color[i]; })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
        .attr("x", function(d) { return x(d.data.ORDER); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width", x.bandwidth());
To join the specified array of data in d3.js you can use the command selection.data([values[,key]]). The values here specifies the data for each group in the selection while a key function determines how data is connected to elements.
Transition in d3.js gradually interpolate attributes and styles over time, transition is used for animation purpose. It is based on only two key frames, start, and end. The starting key frame defines the current state of the DOM, while the ending key frame is a set of styles, attributes and other properties specified.
Method Description
selection.transition() this schedules a transition for the selected elements
transition.duration() duration specifies the animation duration in milliseconds for each element
transition.ease() ease specifies the easing function, example: linear, elastic, bounce
transition.delay() delay specifies the delay in animation in milliseconds for each element

Example :
<!doctype html>
<html>
<head>
    <style>
        #container {
            height: 100px;
            width: 100px;
            background-color: black;

        }
    </style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    d3.select("#container")
      .transition()
      .duration(1000)
      .style("background-color", "red");
</script>
</body>
</html>
SVG group element is used to group SVG element together; each SVG group element is a container which consists of child SVG elements. It is defined by <g> and </g>.
To set multiple classes at once you can use the object literal as
selection.classed({ 'foo':true, 'bar': false})
The command to create simple axis in d3.js is
var xAxis = d3.svg.axis().
Axis Method Description
d3.axisTop() Creates top horizontal axis.
d3.axisRight() Creates vertical right-oriented axis.
d3.axisBottom() Creates bottom horizontal axis.
d3.axisLeft() Creates left vertical axis.

Example :
 
<div class="container">
    <h1>Axes in D3</h1>
    <div id="chart"></div>
</div>
var width = 500, height = 500;
var data = [10, 20, 30, 40, 50];
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xscale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, width - 100]);

var yscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height/2, 0]);

var x_axis = d3.axisBottom()
        .scale(xscale);

var y_axis = d3.axisLeft()
        .scale(yscale);
    svg.append("g")
       .attr("transform", "translate(50, 10)")
       .call(y_axis);

var xAxisTranslate = height/2 + 10;
    svg.append("g")
       .attr("transform", "translate(50, " + xAxisTranslate  +")")
       .call(x_axis);

Output : 
Axes_in_D3

D3.js JQuery
D3 creates or manipulates data-driven document that is manipulating or creating visual documents from your data using D3’s data/exit/enter methods  JQuery is a general purpose Ajax/js library which offers general Ajax/js functionalities for creating web apps, but it does not provide data-driven functionality of D3
D3 has numerous visualization extensions jQuery has many general web app extensions
D3.js Axis component enables easy addition of a horizontal axis and the vertical axis to any graph. It shows reference lines for D3.js Scales automatically. It also allows you to draw a horizontal axis line, axis ticks and correct spacing to make axis appear appropriate.