Environment Setup of D3.js
2020-09-18 06:56:48

Environment Setup of D3.js

Environment Setup of D3.js

To work with D3.js, you need to set up the development environment. In this chapter, we will discuss how you can set up the development environment for D3.js. Before it, you are required to download the following essential components.

  • D3.js Library
  • Web Server
  • Web Browser
  • Text Editor

Now, we will understand the above components, one by one in detail.

D3.js Library

You can include the D3.js library files into your webpage to generate the data visualization. It is very easy to perform. You can do this specific task with the help of the following two ways-

  1. Including D3 library files from the project’s folder.
  2. Including D3 library files from the Content Delivery Network (CDN).

Installation of D3.js Library

D3.js is a JavaScript library used to manipulate the document-based data. It is an open-source library that helps to generate interactive and dynamic visualizations of data in a web browser.

  1. Including D3 library files from the project’s folder.

You can download the library files and source code of the library files by following the below given steps.

Step 1: First, click on the below given link to download the latest version (5.16.0) of D3.js library files (D3.zip).

https://d3js.org/

After clicking on the link, you will get the following snippet:

Step 2: Now, click on the D3.zip, as shown in the above screenshot. After completing the downloading process, unzip the file and search for the d3.min file. This file is the light version of the D3 source code.

Step 3: Copy the source code of the d3.min file and paste it into your root folder of the project. You can also keep it wherever you want to keep all the library files of D3.js.

Step 4: You can also keep the d3.min file into your html page, as shown in the below-given screenshot.

<!DOCTYPE html>
<html lang = “en”>
<head>
<script src = “../ path/to/d3.min.js”> </script>
</head>
<body>
<script> // Write the D3 code here….. </script>
</body>
</html>

D3.js supports the JavaScript code, so you should write the code of D3.js inside the <script> tag. Sometimes you are required to manipulate the components of the Document Object Model (DOM), so write the code of D3.js within the “<body>” tag.

  • Including D3 library files from the Content Delivery Network (CDN)

For working with D3.js, you also have an option to link the D3.js library with your html source code from the CDN (Content Delivery Network). CDN is a network server, where the executable files are hosted and rendered according to the geographic location of the user.

If you use the D3.js with the help of the CDN setup, then there is no need to download the source code of the D3.min library file. This whole process is shown in the below-given code.

<!DOCTYPE html>
<html lang = “en”>
<head>
<script src = “https://d3js.org/d3.v4.min.js”> </script>
</head>
<body>
<script> Write the D3 code here… </script>
</body>
</html>

Web Server

A web server can be defined asthe server software or hardware used to run the software that handles the client-side request and deliver it on the world wide web.

Most of the browsers support the direct execution of local HTML files in the web browser. Sometimes the web browser also has some restrictions while loading the external data files. You can also load external files such as JSON and CSV. For working with D3.js, you can set up the following web servers. They are-

  • Apache Server
  • Internet Information Services (IIS) Server

Web Browser

A Web Browser can be determined as a software application used to access information on WWW (World Wide Web). When you request a web page through a particular website, then the browser fetches the required data from the webserver and shows it on your device.

You can use any browser except Internet Explorer 8 (IE 8) and lower version to run the D3.js file.In this tutorial, we will work on Google Chrome browser to execute the source code of the D3.js.

Here, we have the following browsers, which can be used to run the D3.js file.

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Internet Explorer 9 and above
  • Safari

Text Editor

A source-code editor is referred to as a text editor software that is designed to edit the source code written in various languages. A source-code editor can be defined as a standalone application.

For writing the code of D3.js, you need a source code editor. Here, we have some IDEs (Integrated Development Environment) which supports the JavaScript environment. They are-

  • Sublime Text
  • WebStorm
  • Eclipse
  • Visual Studio Code
  • Notepad ++

The Notepad is an alternative IDE which you can use if you don’t have any other source-code editor.