D3.js Tutorial – Data Visualization Framework For Beginners

This D3.js Tutorial explains what is D3.js, its benefits, features, step-by-step installation process, and plenty of hands-on examples so you can learn D3.js quickly:

This tutorial describes how D3.js, a data-driven open-source JavaScript library can be utilized in data visualization using HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas, and JavaScript through a web browser.

Using this framework, external data in XML, CSV, or JSON format can be converted into charts, graphs, or multiple visualization formats, over a web server.

In this tutorial, we will learn about all the functions from this JavaScript library and see how can we utilize them to visualize the data through a web server using a web browser.

Let’s start!!

What Is D3.js

D3.js is a data-driven framework that is a lightweight JavaScript library and requires fewer lines of code, suitable for handling large data to get interactive data visualization charts, graphs, and geospatial maps.

It is an open-source JavaScript library that is mainly used to plot graphical visualization by manipulating DOM elements of web pages for exploring and analyzing data.

Data stored in data formats like an array, XML, CSV, and JSON can be converted into graphs, charts, and multiple ways by attaching HTML elements, canvas, or grouping shapes of scalable vector graphics (SVG) using this JavaScript library.

Big data such as call detail records from mobile and other devices, messages, discussion, or twit logs from social media platforms such as Twitter, Facebook, WhatsApp, logs from market trends, and trading information logs can be converted into charts, graphs, or various visualization using this JavaScript library.

Since the advent of various social networking platforms such as Twitter, Facebook, and WhatsApp, various communications such as twit, messages, and comment logs can be captured and converted into visual formats such as charts, graphs, etc to understand trending topics and create sentiment analysis.

It becomes easy to understand the modus operandi of a group of suspect’s call detail records from telecommunication towers and monitor their call pattern in case of their involvement in suspicious criminal activities.

Based on the changes taking place in a stock exchange, a stock index such as the Bombay Stock Exchange (BSE), the National Stock Exchange (NSE), that reflects the movement of shares prices decide the market sentiments and guide investors in purchase or selling of stock.

D3.js can convert market share activities to create charts or graphs that can quickly predict the probability of market trends, or mobile data in the form of call detail records for investigating any involvement of suspects in crimes or information on the predictive investigation.

Features Of D3.js

• Data-Driven: It is mainly used to explore and analyze data and create interactive real-time graphs, charts, and extensive ways to visualize the data.
• DOM Manipulation: This is an open-source JavaScript library that converts data in various visualization formats by manipulating DOM elements.
• Utilizes Web Standards: It uses Document Object Model (DOM), HTML, Cascading Style sheets (CSS), Scalable Vector Graphics (SVG), and canvas to create data visualization formats.
• Fast and Interactive: It is highly responsive to change in data, and can quickly animate or transform selected DOM element from one state to another state.
• Display Dynamic Transitions: This library is designed to create a fast dynamic transition to generate quick responsive visualization with DOM.

Benefits Of Using D3.js

• It is an open-source JavaScript library that can be used along with other JavaScript frameworks such as Angular.JS, Ember.JS, or React.
• This library is open-source, so one can add their own features to the source code to accomplish their goals.
• It handles web standards like DOM, HTML, CSS, SVG, and canvas, hence it does not need any other plug-in other than a browser, it does not need any additional debugging or learning tool.
• It can create dynamic, real-time transformation by manipulating DOM elements, quickly into data visualization without any latency.
• It works on data and is specialized and appropriate with data visualization functions contained in the JavaScript library.

Prerequisites To Learn D3.js

• Text editor: A text editor such as Notepad++ or Vim is needed to write programming code like HTML, CSS, JavaScript, and integrate them to produce the desired requirement.
• Web browser: Any one of the modern web browsers, such as Firefox, Google Chrome, Safari, Opera, or IE9 should be installed to check and verify the output that is produced after integrating the code.
• HTML: Good understanding of HTML tags and structure will help to build a basic web page and align elements to bring visualization to the next level.
• CSS: Cascading Style Sheet (CSS) is used to apply styles including design, layout, and screen size to web pages.
• DOM: Strong understanding of Document Object Model (DOM) is essential as it will be easier to know the structure and content of web documents, access DOM elements for D3.js for data visualization.
• JavaScript: Familiarity of fundamentals and JavaScript Objects is a prerequisite for learning and implementing D3.js into our application so that data visualization can be viewed in the webserver.
• Web Server: It is essential to have a web server installed like Apache Tomcat or IIS (Internet Information Services) server, so that data can be uploaded externally in an array, object, XML, CSV, JSON formats and can be transformed with the help of D3.js into visualization formats such as graphs, charts, and geospatial visualization.

Installation/Set Up Of D3.js

In order to create data visualization in our web pages, we need to include D3.js into our HTML web page.

It can be done in the following ways:

• Download the D3.js library into our client machine and include the path of d3.min.js into <script src attribute.
• Type D3js.org into the address bar of a browser, scroll the page, you should able to find Download the latest version of d3.zip.
• After downloading the d3.zip folder in your local machine.
• Unzip the downloaded zipped folder, and you should find d3.js and d3.min.js files.
• You need to refer to d3.js file for development, whereas you can refer d3.min.js (the minified version of d3.js source code) for production purposes.

<html>
<head><script src = "/prj/src/js/d3.min.js"></script></head>
<body>
<script> Your JavaScript code</script>
</body>
</html>

Instead of downloading the entire library, we can simply include the link for the D3.js path from the Content Delivery Network (CDN), which needs a network connection between the client machine’s geographic location and these servers where D3.js files are hosted on.

Alternatively, we can directly load the JavaScript library from d3js.org, CDNJS (content delivery network), or GitHub.

We can copy the URL to include from cdnjs in our web pages (https://cdnjs.com/libraries/d3/3.5.17)

We can link from D3.js files from the Github site as well.

Installing Apache Tomcat – Web Server

• Download apache tomcat which is a webserver to serve files from the local system, and uploads the files externally and creates data visualization based on this data, with the help of D3.js.
• You need to download Java on your client machine, check Java version if already installed, by typing on command prompt java – version.
• Type tomcat.apache.org, check the Download section at the left frame & select Tomcat 9, based on your client machine, you can select 32 bit or 64 bit for Windows zip file.
• After downloading go to the tomcat download folder, go to the bin, then type startup.bat and press enter, server logs will start.
• Open the browser, and type http://localhost:8080 in the address bar of the browser.

A welcome page of tomcat should get displayed if you have installed the tomcat server successfully.

Understanding Web Concepts And Standards

Hyper Text Markup Language (HTML): HTML tags create structure of web page, with the help of web elements, defined with html tags, such as <p> for paragraph, <ol> for ordered list, <ul> for unordered list, <table> for table, <tr> row in table, <td> data in row of table, <form> form to send input values, <img> displaying an image, whereas <button> button element to submit our input values to the server as http requests.

In addition to these tags, attributes and their values are required to display element with the proper size, color, and their values.

The default structure of a HTML page will be as given below.

Cascading Style sheet (CSS): Cascading Style Sheet is used mainly to decorate HTML elements on the browser. We can apply the common style across pages by referencing a common CSS file for the listed elements having values and attributes set in the file. These style tags can refer to inline scripts, internal as well as external style files.

An example of an internal CSS file referred to in the HTML page is given below.

<html>
<head>
<title> CSS example </title>
<style type = "text/css">
h1 {
font-family: courier, courier-new, serif: font-size: 18pt;
color: #F00000; border-bottom: 10px solid green;
} 
p {
font-family: arial, verdana, sans-serif; font-size: 12pt;
color: #FB8072;
}
.row-tbl {
background-color: #FFA07A;
color: blue;
}
.row-tbl2 {
background-color: #FFC07A;
color: red;
}
</style>
</head>
<body>
<h1> Indian Philanthropists </h1>
<table><tr><td class="row-tbl2"> Name </td>
<td class="row-tbl2"> Donation </td>
<td class="row-tbl"> Gautam Adani</td>
<td class="row-tbl"> 76 Cr</td>
<td class="row-tbl2"> Adi Godrej </td>
<td class="row-tbl2"> 96 Cr </td>
<td class="row-tbl"> Azim Premji</td>
<td class="row-tbl"> 113 Cr</td>
<td class="row-tbl2"> Ajay Piramal </td>
<td class="row-tbl2"> 200 Cr </td>
<td class="row-tbl"> Mukesh Ambani</td>
<td class="row-tbl"> 437 Cr</td>
<td class="row-tbl2"> Shiv Nadar </td>
<td class="row-tbl2"> 770 Cr </td></tr></table>
</body></html>

Scalable Vector Graphics (SVG): SVG is a vector-based graphics in XML format that can be integrated with DOM and XSL web standards.

These graphics can be created and modified with any text editor, SVG is scalable, searchable, scripted, compressed, and can be indexed, these open source pure XML SVG files can be zoomed or resized without losing its quality.

An example of Scalable Vector Graphic (SVG) shapes in HTML page is given below.

<html>
<body>
<svg width="600" height ="250">

<rect x = "10" y = "20" width = "30" height ="30"
style ="fill: blue; fill-opacity: 0.1;" />

<rect x = "20" y ="70" width = "30" height="30"
style ="fill: white; stroke: pink; stroke-width: 12; stroke-opacity: 0.9;" />

<rect x = "30" y ="120" width = "30" height="30"
style ="fill: yellow; stroke: green; stroke-width: 7; fill-opacity: 0.9;" />

<rect x = "40" y ="170" width = "30" height="30"
style ="fill: green; stroke: blue; stroke-width: 3; stroke-opacity: 0.1;" />
</svg>
</body></html>

• fill: In SVG shape is a color that fills space inside the shape boundary.
• stroke: Is a color of the border of an SVG shape.
• stroke-width: Will give the width of the SVG shape boundary.
• fill-opacity: Sets the opacity of color that fills space inside the SVG shape boundary, the opacity value ranges decimal values between 0 and 1 (1 will be a denser color, 0 will be a more transparent color).
• stroke-opacity: Sets the opacity of color of the border of SVG shape, value ranges between 0 to 1, 0 will be transparent, 1 will be dense.

Document Object Model (DOM): It is an interface independent of platform and language that defines event and web document structure; this allows scripts or programs to access the structure of documents and element contents.

• Core DOM is a document structure model.
• XML DOM is a structure for XML Documents and
• HTML DOM is a structure for HTML documents, a standard to retrieve, add, modify and delete HTML elements.

The structure of HTML DOM is as displayed below.

Various Methods And APIs From D3.js Library

In order to select the DOM element and manipulate them, we need to use global JavaScript object D3, which includes all other important methods to start with, just like JQuery uses its global object JQuery (or $). We need to include D3 library d3.min.js, in the script tag between the head tag of our HTML page.

D3.js Selections: D3 Selections select DOM elements so that we can alter its style, attributes, joining data, and add/delete elements. It allows us to select one or more elements on a webpage. select() method selects only one DOM element by selecting a CSS selector.

In the case of multiple elements, the first matching element from the HTML document will be fetched. In case, an element from the CSS selector does not match, then it returns an empty selection, whereas selectAll () method for selecting multiple elements, it selects all the matched elements for a specific selector.

The method syntax is d3.select (CSS selector)

We can select an HTML element by its tag (E.g. div, h1, span, or p) or by class name or by its unique id. After selecting the element we can manipulate its attributes like font color, background color, and font style or size.

d3.select function applied to HTML element, classname as well as the id for an element is explained below.

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div> Hello World ! </div>
<h2 class = "cls"> Changing Background using CSS selector </h2>
<span id ="spn"> Hibiscus come in a variety of colors, including pink, orange and yellow !!!</span>
<script>
d3.select("div").attr("style", "color: orange");
d3.select(".cls").attr("style", "background-color: #ffcccc");
d3.select("#spn").attr("style", "font-family: Verdana");
</script> 
</body>
</html>

Adding SVG Shapes To HTML element With d3.select ()

Using d3.select () HTML element is selected, after this, SVG shape, in our case, the circle is added to the element <body> in our case here, the code is as displayed below. Adding SVG shape and altering attributes by giving sizes for width and height for SVG, adding shape i.e. circle, at coordinates cx and cy, having radius r, and filling purple color.

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script>
</head>
<body> 
<div id="rect-svg"></div>
<div id ="circ-svg"></div>
<script>
d3.select("#rect-svg").append("svg")
.attr("width", 150)
.attr("height", 150)
.append("rect")
.attr("width", 60)
.attr("height", 60)
.style("fill", "red")
.attr("fill-opacity", "0.3");

d3.select("#circ-svg").append("svg")
.attr("width", 250)
.attr("height", 250)
.append("circle")
.attr("cx", 55)
.attr("cy", 50)
.attr("r", 50)
.style("fill", "purple");
</script>
</body>
</html>

Transformation Of SVG Shapes

SVG has transform attributes to support shape transformation, SVG transform has functions namely Translate, Scale, Rotate, and Skew.

• Translate: Translate or moving from one position to another, has two options tx and ty, tx refers to position or distance from the x-axis whereas ty refers to the position or distance from the y-axis. E.g. translate(tx, ty).
• Rotate: Rotate or moving in a circular path from the center to a fixed axis, a shape has three options, angle, cx, and cy. cx and cy refer to the center of rotation corresponding to the x-axis and y-axis, the angle is a rotation angle in degrees. if cx and cy default to the current coordinate system, E.g. rotate(45).
• Scale: Scale has two options – sx and sy, refer to scaling factor along the x-axis and y-axis respectively, sy is optional E.g. scale(sx).
• Skew: Skew is a distorting shape at an angle along its length, it has two options, skewX, skewY that are respective twisting angle along the x and y-axis. E.g. skewX(60).

Example Of SVG Transformation

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script>
</head>
<svg width ="250" height ="250" >
<g transform = "translate (40, 40) scale (2)" >
<circle cx ="55" cy ="55" r ="30" fill = "red" / > 
<rect width ="35" height ="35" fill = "green" </rect>
</g></svg>

<body>

<svg width ="250" height ="250" >
<g transform = "translate (30, 40) rotate(45) scale (0.5) " >
<circle cx ="55" cy ="55" r ="30" fill = "blue" / > 
<rect width ="35" height ="35" fill = "orange" </rect>
</g></svg>
</body>
</html>

D3.js Array API: d3 Array API applied to the array is the data of the same data type contained in a fixed size container.

Functions To Find Statistics Of An Array

A list of Array functions are applied and their results/output are explained below.

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<body>
<script>
var studentMarks = [87, 75, 92, 73, 94, 69, 81, 59, 68, 78, 31, 47]

document.write (d3.min (studentMarks) + "<p>");
document.write (d3.max (studentMarks) + "<p>");
document.write (d3.mean (studentMarks) + "<p>");
document.write (d3.median (studentMarks) + "<p>");
document.write (d3.sum (studentMarks) + "<p>");
document.write (d3.deviation (studentMarks) + "<p>");
document.write (d3.extent (studentMarks) + "<p>");
document.write (d3.variance (studentMarks) + "<p>");
document.write (d3.bisect (studentMarks) + "<p>");
document.write (d3.cross ([50, 45], ["A", "B"]) + "<p>");
document.write (d3.merge ([20], [60]) + "<p>");
document.write (d3.pairs (1, 3, 5, 7) + "<p>");
</script>
</body>
</html>

D3.js Transitions API

This method can be used as an interface that can animate gradually and changing the attributes like add color or SVG shape and change fill color of SVG shape. Transition API has a chain of functions for selecting elements and then modifying elements, in the gradual interval (Timing).

You need to select an HTML element and then use the transition() function to change the attributes by changing style such as font color, background color or fill color for added SVG shapes.

The syntax for transition is as below.

d3.select (HTML element)
     .transition ()
     .style (attribute, value)

D3.transition function will change the element’s attributes and add SVG shape as in the example below

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<body>
<h3> transitions </h3>
<script>

var mytrans = d3.transition ().duration (4000) ;

d3.select("body").transition (mytrans).style ("background-color", "#ff9999");

d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 400)
.append("circle")
.attr("cx", 50).attr("cy", 50).attr("r", 50)
.transition (mytrans).style ("fill", "#00bfff");

</script></body></html>

D3.js Collection API

D3 Collections API – Collections API consists of APIs such as objects, maps, sets, and nests. These are collection objects that have unique properties.

Objects API is an important data type, and has methods as:

• d3.keys (object) – Contains object property keys and returns an array of property names.
• d3.values (object) – Contains object values and returns array of property values.
• d3.entries (object) – This method is used to return an array with keys and values of objects.

Example Of Objects API Methods

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<body>
<h3>D3 Collections Objects API </h3>
<script>

var week_days = {"Sunday" : 1, "Monday" : 2, "Tuesday" : 3, "Wednesday" : 4, "Thursday" : 5, "Friday" : 6, "Saturday" : 7 } ;

document.write (d3.keys (week_days) + "<p>"); 
document.write (d3.values (week_days) + "<p>");
document.write (d3.entries (week_days) + "<p>");

</script>
</body>
</html>

Maps API

A map contains values based on key-value pairs, the map has unique keys and is used to search, update, and delete elements based on these unique keys.

Various Maps API methods are described below.

• d3.map ([object [, key]]): A new map is created with this method.
• map.has (key): Is used to check if the map has an entry for the specified key string.
• map.get (key): This method returns the value for the specified key string.
• map.set (key, value): This method sets the value for the specified key string.
• map.remove (key): Is used to remove the map entry, in the absence of a key, it returns false.
• map.clear (): This method removes all the entries from this map.
• map.keys (): Helps to return an array of string values for every entry in this map.
• map.values (): Helps to return an array of values for every entry in this map.
• map.entries (): Key-value arrays for each entry are returned in this map.

Example of Maps API Methods

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<body>
<h3>D3 Collections Maps API </h3>
<script>

var map = d3.map ().set ("Seasons", "Autumn");

document.write (map.get ("Seasons") + "<p>"); 
document.write (map.remove ("Seasons") + "<p>");
document.write (map.size () + "<p>");
document.write (map.empty () + "<p>");
</script>
</body>
</html>

Sets API

A Set is a collection that does not contain duplicate elements.

• d3.set ([array [, accessor]]): New set is created with this method.
• set.has (value): Used to check if the set has an entry for specified value string.
• set.add (value): Adds the specified value string to the set.
• set.remove (value): Remove the set that contains the specified value string.
• set.clear (): Removes all the values from the set.
• set.values (): Returns an array of values to the set.
• set.empty (): This method returns true only if this set has zero values.
• set.size (): Returns the number of values in the set.

Example of Sets API Methods

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<body>
<h3>D3 Collections Sets API </h3>
<script>

var Seasons = d3.set ().add ("Spring")
.add ("Summer")
.add ("Autumn") ;

document.write (Seasons.has ("Winter") + "<p>");
document.write (Seasons.remove ("Autumn") + "<p>");
document.write (Seasons.size () + "<p>");
document.write (Seasons.empty () + "<p>");
</script>
</body>
</html>

Nests API: These have elements in arrays and perform in a hierarchical tree structure.

• d3.nest(): The new nest is created with this method.
• nest.key (key): Used to initialize newly created key functions.
• nest.sortKeys (comparator): Used to sort keys in a specified comparator.
• nest.sortValues (comparator): Used to sort values in a specified comparator.
• nest.map (array): This method is applied to the array to return the nested map.

Paths API

D3 Paths API method help to form a way that can create Shapes such as rectangle, circle, line, and curves that can be filled in with colors, stroked their borders, cropped, or all combined.

Paths API methods are explained below.

Example Of Path API Methods Is Explained Below.

<html>
<head>
<script type="text/javascript" src ="https://d3js.org/d3.v5.min.js"></script></head>
<script>
function draw () {
var canvas = document.getElementById ('tutorial') ;
if ( canvas.getContext ) { var ctx = canvas.getContext ('2d') ;
ctx.beginPath () ;
ctx.moveTo (55, 75) ;
ctx.lineTo (120, 120) ;
ctx.lineTo (120, 50) ;
ctx.fill ();

ctx.arcTo (25, 25, 50, 50, 15) ;
ctx.stroke () ;

ctx.rect (15, 55, 45, 75) ;
ctx.stroke () ; } } 
</script>
<style type ="text/css" >
canvas { border : 2px solid blue ; } </style>
</head><body onload = "draw ()">
<canvas id = "tutorial" width = "150" height = "150" ></canvas></body></html>

Conclusion

D3 is one of the open-source JavaScript libraries that is an extremely fast, easy to learn, data visualization framework. Big data in the form of arrays, objects, CSV, data streams in JSON, and XML format using HTML, CSS, SVG shapes, and canvas into a web browser and servers.

This tutorial explains the syntax, programs, and output on how D3.js uses selections API methods to capture HTML elements, transform SVG shapes. Methods such as Array API help to find statistics and transformation of the array are included here.

Collection API methods can be used for objects, maps, sets, and nests collection interfaces, Path API method is used to move SVG shapes.