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

## Problem statement 
The tasks in this challenge are as follows:
- Select a suitable scale for a given task.
- Map different courses to specific timings using a selected scale.

## Given data

We have four courses that will be mapped to four timings.

```
courses=['History','Mathematics','Philosophy','Computer Science']
timings=['8-9','9-10','11-12','12-13']
```
## Expected output

If we give `History` as input to the scale, it should give `8-9` as output. For example:

```
console.log(c_scale('Mathematics'))
``` 
It should show `9-10` on the console screen, where `c_scale` is the scale created by the user.
## Coding exercise
This problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck then refer to the next lesson which will explain the solution in detail.

courses=['History','Mathematics','Philosophy','Computer Science']
timings=['8-9','9-10','11-12','12-13']

codemirror

console

# Problem statement 
The tasks in this challenge are as follows:
- Select a suitable scale for a given task.
- Map different courses to specific timings using a selected scale.

# Given data

We have four courses that will be mapped to four timings.

```
courses=['History','Mathematics','Philosophy','Computer Science']
timings=['8-9','9-10','11-12','12-13']
```
# Expected output

If we give `History` as input to the scale, it should give `8-9` as output. For example:

```
console.log(c_scale('Mathematics'))
``` 
It should show `9-10` on the console screen, where `c_scale` is the scale created by the user.
# Coding exercise
This problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck then refer to the next lesson which will explain the solution in detail.

Make a scale that will map courses to their timings.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Challenge: Make a Scale

Problem statement

Given data

Expected output

Coding exercise