HomeCoursesMaster D3.js for Data Visualization

Intermediate

24h

Master D3.js for Data Visualization
Save for later

Gain insights into creating interactive web data visualizations with D3.js. Learn about SVGs, selections, advanced scatter plots, scales, animations, and interactivity to transform data into meaningful insights.

Join 2.6 million developers at

Table of Contents

Learner Reviews

Related Content

Course Overview

In this course, you will learn to create your own interactive data visualizations for the web with D3.js, a very popular JavaScript library. Starting with the fundamentals, you'll learn about SVG, selections, classes, and styles, as well as displaying data. This will give you the base to start working with more advanced concepts. Once you’ve got the basics out of the way, you will start practicing drawing various scatter plots, where you’ll learn all the best practices for creating stunning visualizatio...Show More

In this course, you will learn to create your own interactive data visualizations for the web with D3.js, a very popular JavaScr...Show More

Course Content

95 Lessons6 Quizzes

Overview

2 Lessons

Get familiar with D3.js essentials and mastering web-based data visualizations.

Introduction

Understanding D3 & Data Visualization

SVG Basics

4 Lessons

Look at SVG for scalable, high-quality visualizations using D3.js.

D3 Fundamentals

13 Lessons

Examine D3.js fundamentals covering initialization, selection, data joining, transformation methods, and handling data externally.

Adding D3

Selections

Appending Elements

Transformation Methods

Enter, Update, and Exit

The Update Pattern

Loading Data Externally

Quiz: Fundamentals

Drawing a Scatter Plot

15 Lessons

Grasp the fundamentals of drawing scatter plots with D3.js, including scales and axes.

Applying Scales to Visualizations

Refining the Axis Ticks

Summary

Quiz: Scatter plot

Scales

14 Lessons

Take a closer look at understanding and utilizing various data scales in D3.js.

Continuous vs. Discrete

The ‘scaleLinear()’ Scale

Introduction to Heatmaps

Drawing the Heatmap

Colors with a Linear Scale

The ‘scaleQuantize()’ Scale

The ‘scaleQuantile()’ Scale

The ‘scaleThreshold()’ Scale

Quantize vs. Quantile vs. Threshold

Color Scales

Understanding the Log Scale

The ‘scaleLog()’ Scale

Summary

Quiz: Scales

Animations & Interactivity

21 Lessons

Tackle animations, interactivity, and dynamic updates in D3.js for effective data visualization.

Introduction to Animations & Interactivity

What is a Histogram?

Preparing the Histogram

Understanding the Problem

Creating Bins

Histogram Finishing Touches

Changing Metrics with Events

Updating the Chart

Transitions

Understanding the Problem

Fixing the Transition

Fixing the Exit Transition

Tweaking the Bars and Labels

Understanding the Voronoi Diagram

Creating a Voronoi Diagram

Fixing the Voronoi Diagram

Quiz: Animations & Interactivity

Even More Charts!

23 Lessons

Master the creation of diverse D3.js charts, including line, pie, and stacked bar charts.

What's next

Preparing the Line Chart

Time Scales & Parsing

Line Generator

Adding an Axis

Preparing the Tooltip

Understanding Bisectors

Custom Bisectors

Finishing the Tooltip

Getting Started with Pie Charts

Drawing Arcs

Understanding Ordinal Scales

Using Ordinal Scales

Adding Labels

Fixing the Pie Chart

Preparing the Stacked Bar Chart

The Stack Function

Band Scales

Drawing the Stacked Bars

Drawing the Axis

Finishing Touches

Responsive Charts

Quiz: Even more charts!

Conclusion

3 Lessons

Learn how to use D3.js for diverse visualizations and efficient editor setup.

Final Thoughts

Setting up your Editor

Appendix

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Luis Ramirez Jr

Join 2.6 million learners and start transforming your career today

Looks a bit advance? Start here.

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

Gain insights into building reactive websites with RxJS. Delve into mastering observables and managing events efficiently to create fast, responsive applications while reducing bugs.

50 hours 30 mins

intermediate

Course

Creating a CRUD REST API with Deno & Oak

2 hours

intermediate

Course

Building Full-Stack Web Applications with AdonisJs

Gain insights into AdonisJs fundamentals. Delve into routes, controllers, middleware, and hooks. Discover practical examples, illustrations, and quizzes to confidently build your full-stack applications.

intermediate

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

intermediate

50 hour 30 min

Course

Creating a CRUD REST API with Deno & Oak

intermediate

2 hour

Course

Building Full-Stack Web Applications with AdonisJs

intermediate

Trusted by 2.6 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

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!

Course

Recursion for Coding Interviews in JavaScript

The ultimate guide to recursion interviews in JavaScript. Developed by FAANG engineers. Practice with real-world interview questions and get interview-ready in just a few hours.

8 hours

intermediate

Course

JavaScript Design Patterns for Coding Interviews

The ultimate guide to coding interviews: Learn and practice JavaScript design patterns tested by FAANG engineers. Get interview-ready in just a few hours with battle-tested solutions.

9 hours

intermediate

Course

Advanced TypeScript Masterclass

Discover advanced TypeScript concepts: Gain insights into compiler flags, generic types, and discriminated unions. Delve into writing error-free code and mastering complex error messages with confidence.

6 hours

intermediate

Course

Intermediate JavaScript: Building Frontend Components

Gain insights into building real-world components using JavaScript. Delve into dropdown menus, auto-validating forms, autocomplete search, infinite scroll, and tooltips to tackle common frontend challenges seamlessly.

10 hours

intermediate

Course

Recursion for Coding Interviews in JavaScript

intermediate

8 hour

Course

JavaScript Design Patterns for Coding Interviews

intermediate

9 hour

Course

Advanced TypeScript Masterclass