D3.js interview questions | Freshers & Experienced

Expanded as Data-Driven Documents, D3.js is a javascript library. It uses Scalable Vector Graphics, HTML5, CSS (Cascading Style Sheets) to create dynamic and powerful data visualization web pages in the browser. Released in 2011, D3.js is an open-source library that gives developers full control over the final view result. With D3.js, developers can bind arbitrary data to the DOM (Data Object Model). After the binding, transformation is applied to the document to visualize the data in an interactive way. It is the popular data visualization library that is used in sites that use interactive maps, news websites, etc. D3.js is fast and also supports large datasets and dynamic behaviors.

There are many applications or uses in using D3.js,

• It works with web standards like SVG, HTML5, CSS. So, it is easy to develop. 
• It is a javascript library. So, it works seamlessly with other javascript framework like Angular.js, Node.js, etc.
• The visualization in D3.js is completely customizable and any type of visualization can be made with it. So, it gives the d3.js an edge over other popular tools like Tableau, QlikView, etc.
• It has powerful animation and interaction functions like transition(), duration(), delay() that are fast and responsive. 
• It is lightweight and uses data to dynamically generate elements and apply effects.

As a powerful visualization tool, D3.js has many advantages.

• It is open-sourced. So, the source code is free to use. It can also be downloaded and manipulated by the developer.
• D3.js has a massive community of developers who improve the library regularly and it has a massive library of projects to learn it.
• From a technical perspective, D3.js is adaptable and streamlined to work with well with the other javascript framework and also common web standards like SVG, HTML5, and CSS.
• D3.js efficiently manipulates documents based on the data so it is extremely flexible.

Some disadvantages of using D3.js,

• Some functions in the D3.js is not supported in the older browsers.
• It has data-source limitations.
• Concealing original data is not easy with D3.js.
• The biggest disadvantage is it has a very steep learning curve.

The selection function in D3.js is used to select the DOM elements easily and apply some effects to them. It is a declarative method and operates on a set of nodes or an individual node. After selecting the elements/nodes, you can do changes like modifying its style, attributes, removing or adding an element, changing text/HTML content, etc.

D3.js provides two functions to do selections,

d3.select function selects the first matching element and d3.selectAll function selects all matching element.

//example
 
d3.select(‘.itemClass’).style("background-color", "blue");  

The above function selects the first element with class name ‘itemClass’ and changes its background color to blue.

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

The above function selects all the paragraphs and changes its background color to blue.

The transition function applies the given change to the selected DOM elements smoothly over a period of time instead of instantaneously. It is a key frame animation that uses predefined twinning and your own definitions. Transition supports most of the selection methods like style, attar, etc.

Example:-

d3.select ("body").transition ().style ("color", "red");

The above function selects the element of class body and changes its color to red smoothly over a period of time (the default duration is 250ms). The developers can set the duration of transition by the duration () function.

d3.select ("body").transition ().duration (700).style("color", "green");

In the above function the transition occurs for 700ms from start default frame to the end frame of green colored body.

The time format functions in D3.js is used to format the date.

To format the date in string into datetime object use the following function,

> var FormatDate = d3.timeFormat("%Y-%m-%d"); 
> FormatDate(“2020-01-01”).parse 
Wed Jan 01 2020 00:00:00 GMT-0600 (Central Standard Time) 
To get the current date in D3.js, 
var formatTime = d3.timeFormat("%B %d, %Y"); 
formatTime(new Date); //returns “Jan 06 2020” 

There are a lot of format specifiers in d3.js to format the date like %a, %b, etc for to get abbreviated weekday name, abbreviated month, etc

With the help of the d3.zoom function, we can change the zoom behavior.

d3.zoom() function creates the zoom behavior that you can apply to the selected elements

To apply the zoom behavior on selected element,

selection.call(d3.zoom.on(“zoom”, zoom)); 

To set zoom transform on the selected items,

selection.call(zoom.transform, d3.zoomIdentity); //it sets the identity transform for the selected items. 

To translate the zoom transform for the selected item,

zoom.translateBy(selection, x, y); //it translates by the given x & y values.

To translate the zoom transform of the selected item to a given point,

zoom.translateTo(selection, x, y[, p]) //it translates the position(x, y) to the given point p.

Like these, there are many default zoom properties to change the zoom of a selected item in the d3 library.

The select method in d3.js accepts a string and returns the first element that matches the string. If multiple elements match the string, then it returns the first element. If no element matches the string then it returns empty selection.

d3.select ("element") //syntax 

Example:-

  
     <html>  
<head>  
<body>   
   <div>Example for select function  
   <script>  
       // Calling the select() function  
       var a = d3.select("div").text();  
       // Getting the selected element  
       console.log(a); //returns “Example for select function” 
   </script>  
</body>   
</html>
</pre>

We define different types of slider functions available in d3.js are,

d3.slider(); //creates default slider

d3.sliderLeft([scale]); //creates vertical slider. Ticks to left

d3.sliderBottom([scale]); //creates horizontal slider. Ticks to bottom

d3.sliderRight([scale]); //creates vertical slider. Ticks to right

d3.sliderTop([scale]); //creates horizontal slider. Ticks to top

d3.sliderVertical([scale]); //creates vertical slider like sliderLeft

d3.sliderHorizontal([scale]); //creates vertical slider like sliderBottom

D3.js provides the axes function to create a simple axis. An axis has simple lines, ticks, and labels.

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.

D3.js vs High Charts. Which is better?

Pros of D3.js:

• Rich Toolset: The most amazing pro of D3.js is its strong toolset for data-driven visuals. As the D3.js is a data visualization platform so the tools allow users to add special features and also to reuse the codes. Even, users can freely make any data visualization frameworks and the output is always in favor of the users. Moreover, the full control is in hands of users, they can create, mold and even, build data visuals as per their requirement.
• Online Examples: It is always a plus point for a user if he/she gets online examples. Well, good news for D3.js users, you will get an abundant number of examples written by the authors that are easily available online.
• Adaptable: D3.js is so adaptable and streamlined that it easily works with other web technologies and even handle the Document Object Model.  These features enable companies to have great advantages over other tools. Besides, D3.js can also support large visualizations and SVG-only libraries.
• Large Community: Having a large community means easy and fast solutions to your problems. Thanks to the D3.js large community, it provides answers to its users. There is also a huge number of examples and plugins that community writes online to provide them to the users. The community is active enough that results in fast responses to your queries. Until now, D3 has been used for more than 9k sessions on GitHub, this means developers are constantly working to improve it. 
•  Massive library: You may wonder but yeah, D3.js indeed provides a massive library for its users. If you search for one thing, you will get hundreds of examples on that topic. Isn't that amazing? This helps a lot to users as they get a vast amount of knowledge to use it in their projects.
• Backward Compatibility:D3.js is designed for modern browsers, so supports IE9 and above. Also, it supports all other modern browsers too.

Cons of D3.js:

• Steep learning curve: It is tricky to learn D3.js and time consuming too for many users. D3.js is very flexible more than any other JavaScript visualization library which increases complexity. It is always better to choose another library if you just want to create some quick charts. As it is suitable for large projects so always prefer it based on complexity.
• Selections: Selections are admirable in D3.js but somewhat hard to grow. They are powerful but need new developers to get up to speed. Also, if they are used in the larger applications, then this will result in different patterns than the rest for some portion of code.