Before we start creating visualizations with D3, it is crucial to properly set up our working environment. In this chapter, we will cover the steps needed to install and configure D3 in your project.

Installation

Including D3 from a CDN

The fastest and easiest way to start using D3 is by including the library from a CDN (Content Delivery Network). You can add D3 to your HTML project like this:

html

Installing via npm

If you prefer a more advanced approach and are using a package manager like npm, you can install D3 with the following command:

sh

Then, you can import D3 in your JavaScript file:

javascript

Setting Up the Development Environment

To work with D3, you will need a code editor. Visual Studio Code, Sublime Text, or any editor of your choice will work just fine.

Make sure you have Node.js and npm installed if you plan to use the npm installation.

Basic Style Sheet

To get started, we will create a style.css file to apply some basic styles to our visualizations:

css

Project Structure

A basic project structure may look like this:

Basic Configuration Example

Let's set up a simple project to make sure everything is working correctly.

index.html

html

script.js

javascript

style.css

css

This simple example creates an index.html file that loads D3 from a CDN, a script.js file that draws a circle on an SVG, and a style.css file that adds some basic styles.

Verification

With the above setup, open index.html in your browser and you should see a blue circle in the center of the SVG area. If you see this, congratulations! D3 is correctly implemented and you are ready to start exploring its capabilities.