Gain insights into D3.js fundamentals, explore DOM manipulation, data binding, and SVG. Learn about creating maps, graphs, and network visualizations to master data-driven documentation.

Introduction to Visualization Using D3.js.png

In this course, you will learn the fundamentals of D3.js (stands for Data-Driven Documents), which is a JavaScript library mainly used for visualization.

In the first half of the course, you will cover DOM (Document Object Model) manipulation, method chaining, data binding, and data loading.

In the second half, you’ll cover visualization concepts and dive deep into SVG which is used to draw different geometrical shapes. After that, you’ll work with various maps and graphs in order to display your data. Lastly, you’ll learn about network visualization with the help of nodes and links.

By the end of this course, you will have a new, powerful data visualization library at your disposal.

Introduction to Visualization Using D3.js

## Introduction
In this lesson, we will dive into the last fundamental concept of drawing a chart, **margins**. Margins are important when we draw charts in D3.js. Without defining margins, our axis will lie on the SVG's boundaries, and we will have to use `translate()` to make it visible. To make drawing charts in D3.js more convenient, we will be using margins in the upcoming lessons.

Although D3.js doesn't provide an explicit margin component, we will use the `translate()` function to draw margins.   
## Example
Let's demonstrate margins by going through the following example.


codemirror

## Explanation 
See the following explanation with an illustration to understand the above code. 
- **Line 2-3:** `width` and `height` of the chart inside the SVG canvas are calculated by subtracting the margins from the total size of the SVG canvas. 
- **Line 5-10:** We have created an SVG canvas of size (400x400).
- **Line 25-28:** We have created the `chart` of size (320x320) inside the SVG canvas. We have translated the `chart` with the help of the `translate` function as shown in the following illustration.  

# Introduction
In this lesson, we will dive into the last fundamental concept of drawing a chart, **margins**. Margins are important when we draw charts in D3.js. Without defining margins, our axis will lie on the SVG's boundaries, and we will have to use `translate()` to make it visible. To make drawing charts in D3.js more convenient, we will be using margins in the upcoming lessons.

Although D3.js doesn't provide an explicit margin component, we will use the `translate()` function to draw margins.   
# Example
Let's demonstrate margins by going through the following example.


# Explanation 
See the following explanation with an illustration to understand the above code. 
- **Line 2-3:** `width` and `height` of the chart inside the SVG canvas are calculated by subtracting the margins from the total size of the SVG canvas. 
- **Line 5-10:** We have created an SVG canvas of size (400x400).
- **Line 25-28:** We have created the `chart` of size (320x320) inside the SVG canvas. We have translated the `chart` with the help of the `translate` function as shown in the following illustration.  

Get introduced to margins and learn how to use them in D3.js.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Margins

Introduction

Example

Explanation