D3.JS (Data Driven Documents)

Introduction: The D3 is an abbreviation of Data Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective framework to work on data visualization. It allows the developer to create dynamic, interactive data visualizations in the browser with the help of HTML, CSS and SVG. The data visualization is the representation of filtered data in the form of picture and graphics. Graphical or pictorial representations presenting even complex data sets with ease. Also, comparative analytics or patterns can be easily traced with the help of data visualization, thus enabling the client to make decisions without much brainstorming. Such visualizations can be easily developed using frameworks such as D3.js. Mike Bostock wrote the D3 framework. Before D3, Protovis toolkit was widely used for Data Visualizations. Though there are many other frameworks for Data visualization, but D3.js has left its footmark because of its flexibility and learnability.
Instead of working as a monolithic framework providing every conceivable feature, D3 solves the core of a problem by providing efficient manipulation of data. It reduces the overhead and allows flexibility.

Features: There are many other platforms or frameworks available for managing data visualization, but D3 has left all the other frameworks behind because of being extremely flexible. Following are the major features which separate D3 from other frameworks:

• As D3 uses the web standards such as HTML, CSS, SVG. It renders powerful visualization graphics.
• Data driven approach allows D3 to retrieve the data from different web nodes or servers and analyze it furthermore to render visualizations. Moreover, it can also use static data for processing.
• D3 allows variations in tools for creation of graphics. It is a basic structured table or a well analyzed pie chart. It’s libraries varies from the most basic tools to advanced set of resources. Even complex GIS Mapping can be done using D3. Even it allows the customize visualizations as per the need. Nevertheless, its all possible due to its support to Web Standards.
• It even supports large datasets and makes the most use of its predefined libraries, thus enabling the users to reuse code.
• Transitions and animations are supported and D3 manages the logic implicitly. Thus one doesn’t need to manage or create them explicitly. Animation rendering is responsive and supports fast transmission between internal states.
• One of the key feature of D3 is that it supports DOM manipulation and is flexible enough to dynamically manage the properties of it’s handlers.

Syntax:
D3 uses the JavaScript functions to carry out most of the selection, transition and data binding tasks. CSS also plays a key role in styling the components. Moreover, JavaScript functions can be scripted in such a way that they can read out data present in other formats.

• Selection: Before working on a dataset, the major task to be carried out is selection, i.e. retrieval of data from dataset. D3 enables the selection task by passing a predetermined tag as a parameter to the select function.

  d3.selectAll("pre")   // It select all elements defined under the <pre> tag
    .style("color", "cyan"); // set style "color" to value "cyan" color

  Similarly, one can work up on various datasets defined under specific tags. Parameters to selectAll() can be tag, class, identifier or attribute. Elements can be modified or added or removed or manipulated and all this is based entirely on data.

• Transitions: Transitions can make the values and attributes for a dataset dynamic.

  d3.selectAll("pre")     // select all <pre> elements
     .transition("transitionEx") // Declaring transition named as "transitionEx"
       .delay(10)          // transition starting after 10ms
       .duration(50);      // transitioning during 50ms

  In above scenario, notice that for all the elements coming as a subset of pre tag, transitioned accordingly.

For more advanced usages, D3 makes the use of loaded data for creation of objects and manipulation, attributes addition and transitioning is done accordingly. All these operations come under the Data Binding part.

Setting up D3.js environment: In order to make use of D3 for a website or webpage, first thing that needs to be taken care of is its installation or import of library into the webpage.

1. The D3 is an open source library. The source code is freely available on the D3.js website. Download the latest version of the library.(5.7.0 currently)
   Download D3 library from the source link[/caption]
2. Unzip the .zip file which obtained after the completion of download. Locate the d3.min.js file which is the minimal version of D3 source code. Copy that file and include it in the root folder or the main library directory of web page. In webpage, include the d3.min.js file as shown.

   <!DOCTYPE html>
   <html lang="en">
       <head>
   
           <!--Adding the source file of D3 here -->
           <script src="../d3.min.js"></script>
       </head>
   
       <body>
           <script>
   
               // write your own d3 code here
           </script>
       </body>
   </html>

   Note: D3 doesn’t support Internet Explorer 8 or its lower versions. Preferably use Safari/ Mozilla Firefox or Chrome.

3. Example: The basic example shown below demonstrates the use of D3 for SVG object creation i.e. circle in scenario within in a HTML document.

   <!DOCTYPE html>
   <htm>
   <meta charset="utf-8">
   <body>
   <svg width="960" height="500"></svg>
   <script src="https://d3js.org/d3.v4.min.js"></script>
   
   <body>
       <div id="circle"></div>
   
       // Declaring the script type
       <script type="text/javascript">
   
           // Creating a variable to store SVG attributes
           var myGraphic = d3.select("#circle")
   
           // applying the svg type attribute
           .append("svg")
   
           // initializing the width of the object pane
           .attr("width", 500)
   
           // initializing the height of the object pane
           .attr("height", 500);
   
       myGraphic.append("circle")
   
           // Outline color attribute set to blue
           .style("stroke", "blue")
   
           // Fill color attribute set to red
           .style("fill", "red")
   
           // Radius attribute set to 100
           .attr("r", 100)
   
           // X-coordinate set to 300px
           .attr("cx", 300)
   
           // Y-coordinate set to 100px
           .attr("cy", 100)
   
            // applying action when the mouse pointer hovers over the circle
           .on("mouseover", function(){d3.select(this).style("fill", "lavender");})
           .on("mouseout", function(){d3.select(this).style("fill", "red");});
   
       </script>
   </body>
   </html>

   Output:
   Before Mouse move over:
   

   

   
   After Mouse move over:
   

   

Moreover, animations, transitions, attributes can be added and manipulated with less efforts using a D3 framework. All the work of action handling can be done using helper functions. In above example, select() function performs the task of retrieval of an argument whereas append() adds attribute as a child to the selected argument. D3 focuses on abstraction and thus most of the inner actions or executions are hidden from the end user, thus making it more easy to use. The task of binding event is done in the above case with the help of .on() function which passes mouse events as an argument. Noticeably, anonymous function concepts are used in the D3 framework. Herein, anonymous function is passed as an argument.
More complex actions can be done using the D3 framework such as retrieval of data from a different format of dataset such as .csv or JSON file.

Advantages:

• D3 supports web standards such as HTML, CSS, SVG which are known to all programmers, thus it can be used easily by anyone. In short, D3 exposes the capabilities of web standards such as HTML5, CSS3 and SVG.
• It is quite lightweight and flexible with the code which is reusable, thus preferable.
• It gives a wider control to the user to manage the visualization and data then the other API’s or frameworks available.
• Being an open source framework, one can easily manipulate the source code of D3 as per his/her need.

Disadvantages:

• D3 is not compatible with older versions of browsers. In case, if someone wishes to visualize the data with backward compatibility, the visualization might necessarily be static, because of poor compatibility.
• Security is still a challenge for D3. Data can’t easily be hidden or protected using D3.

Applications: Its advantages is preferable in various data visualization fields. Some of the major domains wherein D3 is used is as follows:

• Basic charting and graph analytic visualizations.
• Network visualizations.
• Data dashboard development modules.
• Web Maps creation and synthesis.
• Interactive data representation.