Contents

How to Setup Your Environment for D3.js?

Hello! Today I would like to show you the must have to start with D3.js. This post will be divided in four parts:

  1. Choose your Web Browser
  2. Install your IDE
  3. Introduction to D3.js and Template Files
  4. Set Up an HTTP-server for your Local Machine

1 Choose your Web Browser

For your web browser, I recommend Google Chrome as it has nice developer tools and it is fast. However feel free to use the web browser that you want but be aware that it is a good practice to choose a web browser where your users are.

/how-to-setup-your-environment-for-d3/w3counter.png

Effectively, some dependencies are not supported in function of the version of your web browser so graphical stuffs could appear differently in different web browser. According to W3Counter the most used is Chrome (see). You can install Google Chrome here.

/how-to-setup-your-environment-for-d3/chrome.png

2 Install your IDE

You need an Integrated Development Environment to start with D3.js. Visual Studio Code is one of the most used and it works with Microsoft, Linux and MacOS. It is also a good IDE to start coding, so you can go with it. You can find information to install VSC here.

/how-to-setup-your-environment-for-d3/vsc.png

3 Introduction to D3.js and Template Files

It is not difficult to start with D3. You just need to copy the code snippet underline below and paste it into your HTML file. You can find it on the official web site of D3.

featured-image.png

This will attach to your project a mini-file corresponding to the latest version of D3 and allows you to use it in your JavaScript files.

Just below, I give you an HTML template to start easily.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
   <title>My First D3.js Chart</title>
</head>

<body>
   <!-- Insert chart area-->
   <div id="chart-area"></div>

   <!-- Import D3 -->
   <script src="https://d3js.org/d3.v6.min.js"></script>

   <!-- Custom JS -->
   <script src="main.js"></script>
</body>
</html>
  • In the body you need to define a div where you specify the id corresponding to your chart area.
  • Then you import D3 with the snippet above.
  • Finally, you import the main.js file that contains your JavaScript code.

4 Set Up an HTTP-server for your Local Machine

To launch your program and see your website it is easier to use an HTTP server because your page will request data. Here, I will show you how to set up an http-server with npm.

First you need to install npm (for node package management) if you don’t already have it. To do this, just follow the instructions here.

It allows you install and manage Javascript package. To check if you have installed it correctly use this command : npm –version If it returns your npm version, you can go ahead. If not, verify if you followed correctly the instructions in the link above.

Then install http-server using the command below in your terminal. npm install http-server -g

Finally, to launch the http-server and see the results of your code use this command: http-server It will launch an HTTP server and allows you to navigate easily in your folder using “localhost:8080” in your web browser.

Now you are equipped to start working with D3.js, Nice job!

This tutorial ends here, so I hope you enjoyed it. See you!