Gain insights into creating interactive web data visualizations with D3.js. Learn about SVGs, selections, advanced scatter plots, scales, animations, and interactivity to transform data into meaningful insights.

In this course, you will learn to create your own interactive data visualizations for the web with D3.js, a very popular JavaScript library. 

Starting with the fundamentals, you'll learn about SVG, selections, classes, and styles, as well as displaying data. This will give you the base to start working with more advanced concepts. 

Once you’ve got the basics out of the way, you will start practicing drawing various scatter plots, where you’ll learn all the best practices for creating stunning visualizations.

Lastly, you will dive into scales and one of the more fun parts: adding animation and interactivity.

By the time you finish this course, you will have a powerful new library to add to your resume, and you’ll be able to transform data into meaningful insights.

Master D3.js for Data Visualization

# 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.

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

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Setting up your Editor

Editor

What is a server?