Setup D3.js Development Environment
In this chapter, we will learn how to setup D3.js development environment.
Before we start, you'll need the following components:
- D3 library
- Web server
- Editor
- Web browser
D3 Library
You need to include D3.js library into your HTML webpage in order to use D3 to create data visualization. You can do it in two ways:
- Include D3 library from your project's folder
- Include D3 library from CDN (Content Delivery Network).
Download D3 Library
Since D3 is an open-source library, the source code is freely available on the D3 website d3js.org.
- Visit the D3 website: https://d3js.org
- Download the latest version of d3 (d3.zip). (At the time of writing this chapter, the latest version is 4.6.0.)
- After the download is complete, unzip the d3 folder and look for d3.min.js This is the minified version of the d3 source code. Copy d3.min.js file and paste it to your project's root folder or any other folder where you want to keep all your library files. Include d3.min.js file in your HTML page as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../d3.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>D3 is a JavaScript code so you can write all your D3 code within <script> tag. You may need to manipulate existing DOM elements, so it is advisable to write D3 code just before the end of </body> tag
Include D3 Library from CDN
You can use D3 library by linking it directly to your HTML page from the Content Delivery Network (CDN). CDN is a network of servers where files are hosted and are delivered to a user based on their geographic location. If you use the CDN, you don't need to download the source code.
Include D3 library using CDN url https://d3js.org/d3.v4.min.js into your page as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>Web Server
Most browsers serve local HTML files directly in your web browser. However, there are certain restrictions when it comes to loading external data files. In the latter chapters of this tutorial, we'll be loading data from external files like CSV and JSON. So it will be easier for you if you set up the web server right from the beginning.
You can use any webserver you are comfortable with e.g. IIS, Apache etc.
Editor
Finally, you will need an editor where you can start writing your code. There are some great IDEs (Integrated Development Environment) with support for JavaScript like
- Visual Studio Code
- WebStorm
- Eclipse
- SublimeText
These IDEs provide intelligent code completion as well as support some of the modern JavaScript frameworks.
If you don't have fancy IDEs, you can always use Notepad!
Web Browser
D3 works on all browsers except IE8 and lower. For the purposes of this tutorial, we will use Google Chrome.
After setting up the development environment, it's time to start exploring D3. Learn how to manipulate DOM by first selecting it and then manipulating with D3 in the next section.