Setting up your Editor

If you're interested in setting up your own environment then this lesson is for you!

We'll cover the following

Editor

You are free to use any text editor you would like as long as it supports HTML, CSS, and JavaScript. These three languages play a significant role in the D3 library. Your editor will need to support them.

Educative recommends an editor called Visual Studio Code or VSC for short. This editor is completely free, supports the languages you will need, and can be extended with extensions. It is one of the easiest editors to work with for D3 projects.

The next thing you will need is a server.

What is a server?

A server is a computer for hosting websites. There are other things that servers can do, but that is what they are primarily for.

When we type a URL in a browser, a request is made from our browser to the server. The server’s job is to figure out what page the browser wants. It may also respond with images, CSS, and JavaScript files.

Why do we need a server?

It might sound strange to hear that we need a server to work with D3. Truthfully, we do not. D3 is a client-side library. We can run it in the browser without a problem.

HTML files can be opened directly in a browser. However, there are limitations to opening files directly in the browser. Browsers will disable some of D3’s features. One of the features that get disabled is being able to perform an HTTP request. We will not be able to grab data from an external source.

An HTML file delivered by a server will allow us to make requests. Therefore, we should have a server for delivering files instead of opening them directly in the browser.

Server solution

There are different ways we can create a server. If you can write your own server, then, by all means, go for it. Luckily, it is completely optional to write your own server.

There are solutions available that can make things so much easier. If you are using Visual Studio Code, there is an extension available for opening files from a server. If you have not already, download, install, and open Visual studio code.

Navigate to the extensions page. The image below will show you where to access the editor’s extensions.

Get hands-on with 1400+ tech skills courses.