Introduction to Visualization Using D3.js

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.

Beginner

53 Lessons

4h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

60 Playgrounds
5 Challenges
7 Quizzes

This course includes

60 Playgrounds
5 Challenges
7 Quizzes

Course Overview

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. La...Show More

What You'll Learn

Understand the fundamentals of D3

Understand what SVGs are and how they work with D3

Draw scales, axes, labels, and margins to make some basic visualizations

Learn how to draw different charts, networks, and treemaps based on data

Add interactivity to visualization.

What You'll Learn

Understand the fundamentals of D3

Show more

Course Content

1.

Introduction

Get familiar with D3.js for creating dynamic, interactive data visualizations efficiently.
2.

D3.js Fundamentals

Discover the logic behind D3.js selections, DOM manipulation, method chaining, and data binding for dynamic web visualizations.
3.

Scales

Examine the essential scales in D3.js, ranging from linear to ordinal with practical applications.
4.

Drawing Basic Shapes

Grasp the fundamentals of creating and transforming SVG elements using D3.js for web graphics.
5.

Chart Fundamentals

Understand core D3.js chart fundamentals: design, axes, labels, margins, paths, generators, and various chart types.
6.

Network Visualization, Hierarchical Data, and Interactivity

9 Lessons

See how D3.js visualizes networks, hierarchical data, and enhances interactivity with tooltips.
7.

Conclusion

1 Lesson

Build on foundational D3.js visualization concepts and continue exploring advanced topics.

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor