D3.js Installation Methods
D3.js, also known as D3, is an open source javascript library that is used to create bar graphs, scatter plots and other dynamic data visuals. D3 stands for Data Driven Documents, hence, its very fitting moniker. D3 works by manipulating DOM elements — like HTML, CSS, Canvas, and SVG’s — and applying them to datasets. Some of the greatest benefits of using this library is its ability to offer great data visuals, support large datasets, manipulate DOM elements, and ease of use.
D3 Installation
In order to start using D3, you will need the D3.js library in your webpage, which you can add through three different methods; Including D3 in your project folder, using npm, or from CDN. All three approaches are covered below.
Including D3.js Library from Project Folder
Since D3.js is an open source library, you can go to the official website and download the latest version, which is currently 6.5.0 at the time of this writing.
Once you download and open the zip file, you can copy the d3.v6.min.js ( minified version) file into your project folder and include the file in your HTML page using a script tags.
Using Node Package Manager
If you use npm, then you can install d3 by going to your terminal and using the npm install d3 command. Once you have entered the command, you can load the library in a script tag.
Script tag:
<script src="https://d3js.org/d3.v6.js"></script>For minimized version:
<script src="https://d3js.org/d3.v6.min.js"></script>
Including D3.js Library from CDN
Content Delivery Network (CDN) is a network of servers that host files, so by using this method, you don’t need to download the source code. You can include the library by using this CDN URL:
<script src = "https://d3js.org/d3.v6.min.js"></script>
Conclusion
And there you have it, the three primary ways of installing the D3 library. In a future blog post I’ll cover how to use D3 in your editor. Thanks for reading!
