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

Which function does the linear scale use to map the input to the output, where **x** and **y** represent input and output respectively?

Which function does the linear scale use to map the input to the output, where x and y represent input and output respectively?

Which function does the logarithmic scale use to map the input to the output, where **x** and **y** represent input and output respectively?

Which function does the logarithmic scale use to map the input to the output, where x and y represent input and output respectively?

The base of the logarithmic function can be changed using the `base()` function.

The base of the logarithmic function can be changed using the <code>base()</code> function.

It is used to define the domain of a function.

It is the function used to map discrete input to discrete output. 

It prevents a scale function from returning a value outside the specified range.

What is the purpose of the `clamp` function?

What is the purpose of the <code>clamp</code> function?

Which function is used to return the portion of *discrete input* for the corresponding value in *range*?

Which function is used to return the portion of discrete input for the corresponding value in range?

`scaleOrdinal` maps continuous *input* to discrete *output*.

<code>scaleOrdinal</code> maps continuous input to discrete output.

Which `scale` function is used to map discrete *input* to the *band* of the *output*?

Which <code>scale</code> function is used to map discrete input to the band of the output?

Domains element will point to the midpoint of the band which they are mapped to in the `scaleBand()` scale.

Domains element will point to the midpoint of the band which they are mapped to in the <code>scaleBand()</code> scale.

Check your understanding of the concepts covered so far.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Quiz on Scales