Master D3.js for Data Visualization

Home>

Courses>

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

Introduction Understanding D3 & Data Visualization

SVG Basics

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

D3 Fundamentals

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

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

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

Even More Charts!

23 Lessons

Conclusion

3 Lessons

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

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

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!

FOR TEAMS

Interested in this course for your business or team?

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