D3.js Installation
We will study to set the development environment of D3.js. We require a few components before going to start.
- Library of D3.js
- Editor
- Web browser and,
- Web-server
Let’s proceed with the above components in detail.
Library of D3.js
We are required to add the library of D3.js into our web page of HTML to apply D3.js for creating data visualization. Following are the two essential ways in which we can implement it:
- Add the library of D3.js from our folder of the project.
- Add the library of D3.js from content Delivery Network (CDN).
D3.js Library Download
The download process is listed below:
- It is the library of open-source type, and the library’s source code is present at the https://d3js.org link.
- We can further visit the site of the D3.js and download the D3.js’s current version (d3.zip). The current version of D3.js is 5.16.0.
- After the downloading process is complete, we will have to unzip that file and check for d3.min.js. It is the D3.js source code’s minified version.
- Copy the file of d3.min.js and paste it into our root folder of the project or other folder, where we wish to save all the files of the library.
- Add the file of d3.min.js into our page of HTML, as explained below.
Let’s consider an example.
Example:
The D3.js is a code of JavaScript hence we must explain every code of D3 inside the “script” tag. We may also require employing the elements of an existing DOM. Thus, it is suggested to specify the code of D3 before the “body” tag ends.
Note: We can also use the editor, available on the official website of d3.js online editor. In this online editor, we don’t have to download the library of d3.js. We have to just go on the jsfiddle.net link and sign up to use the editor efficiently. We will understand it in the further chapters of D3.js along with the examples.
Add the library from CDN
We may apply the library if D3.js by connecting it into the page of HTML directly from the CDN (Content Delivery Network). CDN is the server’s network where several files can be hosted and delivered to any user according to the geographical location. When we apply the content delivery network, we don’t require the source code downloading.
Insert the library of D3.js with the use of the CDN link https://d3.js.org/d3.v4.min.js within our page.
The example is as follows:
Example:
Editor of D3.js
We require the editor to begin writing our code. Some of the essential IDEs, i.e., Integrated Development Environments are available that also supports JavaScript, such as:
- Sublime Text
- Eclipse
- WebStorm
- Visual Studio Code
These above-mentioned IDEs give smart code completion and also help us to provide a few latest frameworks of JavaScript. When we don’t have any latest IDE, we may use the basic and traditional editors such as VI, and Notepad.
Web Browser
The Data-Driven Document is compatible with every browser excluding lower and IE8.
Web Server
Most of the browsers directly provide the local HTML files from any local file system. Although, there are some restrictions if it comes to load any file of external data. In the upcoming URL’s, we will load data from external files such as JSON and CSV. Hence, it will easy for everyone when we set a web server from the start.
We can apply the web-server, where we will be comfortable with Apache, IIS, etc.
Visualize Our Page
In various cases, we may just open-up the file of HTML inside any browser to visualize it. If we load any source of external data, it will be much reliable to execute any local server. Then we can easily visualize our page from a server (http://localhost:8080).