Introduction to Visualization Using D3.js

Beginner

53 Lessons

Certificate of Completion

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

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.

Course Content

Introduction

Who should take this course, and why?Introduction to Data Visualization

Introduction to D3.js Quiz on D3.js Introduction

D3.js Fundamentals

D3 Selections

Manipulating DOM Elements Method Chaining Data Joins/Binding Challenge: Add HTML Tags and Bind Data Solution Review: Add HTML Tags and Bind Data Quiz on D3.js Fundamentals

Scales

Linear Scale Logarithmic Scale Clamp Function

scaleQuantize Ordinal Scales Challenge: Make a Scale Solution Review: Make a Scale Quiz on Scales

Drawing Basic Shapes

Introduction to SVG SVG Using D3.js Drawing a Rectangle Drawing a Circle

Transformations Transition Challenge: Falling Circle Solution Review: Falling Circle Quiz on Drawing Basic Shapes

Chart Fundamentals

Chart Design Principles Axis Labels Margins Path and Line Generator Line Chart Draw Arc Angle Generator Draw a Pie Chart Area Chart Stacked Area Chart

Bar Chart Challenge: Draw a Donut Chart Solution Review: Draw a Donut Chart Quiz on Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

9 Lessons

Conclusion

1 Lesson

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

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended Courses

BEFORE STARTING THIS COURSE

AFTER FINISHING THIS COURSE

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath