Master D3.js for Data Visualization

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.

Intermediate

95 Lessons

24h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

140 Playgrounds

6 Quizzes

This course includes

140 Playgrounds

6 Quizzes

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

Course Content

Overview

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

Introduction Understanding D3 & Data Visualization

SVG Basics

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

Getting to Know SVG Basic Shapes in SVG Paths Quiz: SVG

D3 Fundamentals

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

Adding D3 Selections Appending Elements Transformation Methods Classes and Styles Joining Data The Enter Selection The Exit Selection Displaying Data Enter, Update, and Exit The Update Pattern Loading Data Externally Quiz: Fundamentals

Drawing a Scatter Plot

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

First Steps Drawing the Image Adding Margins Accessor Functions Understanding Scales Writing Scales Applying Scales to Visualizations Refining Scales Adding an Axis Refining the X-axis The Y-axis Flipping the Y-axis Refining the Axis Ticks Summary Quiz: Scatter plot

Scales

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.

Even More Charts!

23 Lessons

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

Conclusion

3 Lessons

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

Course Author

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!