D3.js Installation Methods

Photo by Luke Chesser on Unsplash

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.

Create this script tag after copying D3 zip file into your project directory

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store