Learn and Understand D3.js for Data Visualization from Udemy

This course has been updated to use the latest version of D3 - Version 7.x

Hello. Welcome to the D3.js development course. This is the most comprehensive and effective course on D3 around. This is the only course you'll ever need to learn D3.

The goal of this course is to not just teach you D3 (v7.x), but help you understand D3. D3 is a JavaScript library that allows you to build data visualizations easily. The library is absolutely massive and you can create any kind of data visualization you can imagine. With such a massive library, it can be difficult to grasp a lot of the concepts.

By the end of this course, you'll be more than comfortable using D3 and build awesome visualizations. Here is just some of the things you can expect to learn.

Learn about D3 selections which are used to select and manipulate elements on your document.
Get a basic overview of SVG. This is something courses skip over. By having a solid foundation of SVG, then you can make more optimal decisions for your visualizations.
Learn about scales which help you by converting your data into values that can be used to properly display your data. We'll learn about the linear, quantize, quantile, threshold, log, color, and a whole lot of other scales in this course.
Builds various graphs such as bar graphs, pie charts, scatter plots, histograms, line charts, and so much more.
Add interactivity and animation to your graphs to make them more interesting and appealing to the user.
Builds responsive graphs. Your visualizations will work on any device with a few simple tricks.
This course focuses on the latest version of D3. (version 7.x)

This is just some of the topics that will be covered. If you want to take

What's inside

Learning objectives

Create stunning data visualizations using d3 and svg
Understand selections to manipulate the dom using d3
Learn about layouts to build various charts and graphs
Add transitions and animations to your graphs for a more interesting user experience

Use scales to help make your visuals work on any browser or device.
Understand the enter and exist modes in d3
Create responsive charts and graphs

Create stunning data visualizations using d3 and svg
Understand selections to manipulate the dom using d3
Learn about layouts to build various charts and graphs
Add transitions and animations to your graphs for a more interesting user experience
Use scales to help make your visuals work on any browser or device.
Understand the enter and exist modes in d3
Create responsive charts and graphs

Syllabus

Overview

Preparing a Local Server

Understanding D3 & Data Visualization

Understanding SVG

What is SVG?

Creating SVG images

Basic SVG Shapes

SVG Paths

Fundamentals

Adding D3

D3 Packages

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

JSON Requests

CSV Requests

Drawing A Scatterplot

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

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. Thresholdv

Color Scales

Understanding the Log Scale

The scaleLog() Scale

Animations & Interactivity

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

Fixing the Transition

Fixing the Exit Transition

Tweaking the Bars and Labels

Adding the Mean

Adding a Tooltip

Mouse Events

Formatting

Understanding the Voronoi Diagram

Creating a Voronoi Diagram

Fixing the Voronoi Diagram

Even More Charts!

Even More Charts

Preparing the Line Chart

Time Scales & Parsing

Line Generator

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

Conclusion

Sketching

Responsive Charts

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops foundational understanding of SVG, which is widely used by developers and designers for creating visual elements in web applications and other interactive content

Provides up-to-date knowledge on the latest version of D3 (v7.x), equipping learners with the most current tools and techniques

Teaches proficiency in D3, enabling learners to build powerful and interactive data visualizations to communicate insights effectively

Covers a wide range of D3 concepts and techniques, from data selection and manipulation to scales and animations

Offers practical applications and examples throughout the course, ensuring learners can apply their knowledge to real-world projects

Taught by an experienced instructor, Luis Ramirez Jr, who has a strong reputation in the field of data visualization

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn and Understand D3.js for Data Visualization with these activities:

Compile a Collection of D3 Resources

Show steps

Improve your learning by organizing and expanding your collection of D3 resources, including documentation, tutorials, and examples.

Browse courses on D3

Show steps

Gather D3 resources from various sources.
Categorize and organize the resources for easy access.
Share your compilation with other D3 learners.

Follow D3 Tutorials on FreeCodeCamp

Show steps

Gain practical experience by working through interactive tutorials that cover various aspects of D3.

Browse courses on D3

Show steps

Visit the FreeCodeCamp website and search for D3 tutorials.
Select a tutorial that aligns with your learning needs.
Follow the step-by-step instructions and complete the coding exercises.

Practice D3 Coding Challenges

Show steps

Reinforce your understanding of D3 syntax and concepts by completing coding challenges.

Browse courses on D3

Show steps

Find D3 coding challenges online or in books.
Solve the challenges on your own.
Compare your solutions to others or discuss them in forums.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Join a D3 Study Group

Show steps

Enhance your learning by collaborating with peers, discussing concepts, and working on projects together.

Browse courses on D3

Show steps

Find or create a study group with fellow D3 learners.
Set regular meeting times and establish clear goals.
Discuss course material, share resources, and work on assignments together.

Attend a D3 Workshop

Show steps

Accelerate your learning by attending a workshop led by experienced D3 professionals who can provide guidance and support.

Browse courses on D3

Show steps

Research and identify upcoming D3 workshops.
Register for a workshop that fits your schedule and learning goals.
Attend the workshop and actively participate in the hands-on exercises.

Create Interactive D3 Visualizations

Show steps

Solidify your understanding and demonstrate your skills by creating your own interactive data visualizations using D3.

Browse courses on D3

Show steps

Identify a dataset that you want to visualize.
Design and implement a D3 visualization that effectively communicates the data insights.
Make your visualization interactive by adding features like tooltips, zooming, or filtering.

Participate in a D3 Data Visualization Challenge

Show steps

Challenge yourself and showcase your D3 skills by participating in a competition that rewards innovative data visualizations.

Browse courses on D3

Show steps

Research and identify upcoming D3 data visualization challenges.
Choose a challenge that aligns with your interests and skill level.
Create a compelling data visualization that meets the challenge requirements.

Mentor Junior D3 Developers

Show steps

Reinforce your learning and contribute to the community by guiding and supporting aspiring D3 developers.

Browse courses on D3

Show steps

Identify or reach out to junior D3 developers who need guidance.
Provide one-on-one mentorship, answer questions, and share your knowledge.
Collaborate on projects or assignments to provide hands-on support.

Career center

Learners who complete Learn and Understand D3.js for Data Visualization will develop knowledge and skills that may be useful to these careers:

Data Scientist

Data Scientists develop and maintain the infrastructure and algorithms used to collect, store, and analyze data for a business. They analyze and interpret this data to uncover trends and patterns, which they can use to make recommendations for improving a business's operations or products. This course can help you develop the skills and knowledge needed to be a successful Data Scientist, including how to use D3.js to create stunning data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Data Scientist

Data Analyst

Data Analysts use their skills in mathematics, statistics, and programming to extract meaningful insights from data. They work with businesses to help them understand their customers, optimize their operations, and make better decisions. This course can help you develop the skills and knowledge needed to be a successful Data Analyst, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Data Analyst

Business Analyst

Business Analysts use their skills in data analysis, process improvement, and communication to help businesses improve their operations. They work with businesses to identify and solve problems, and to develop and implement new solutions. This course can help you develop the skills and knowledge needed to be a successful Business Analyst, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Business Analyst

Software Engineer

Software Engineers design, develop, and maintain software applications. They work with businesses to understand their needs and to develop software solutions that meet those needs. This course can help you develop the skills and knowledge needed to be a successful Software Engineer, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Software Engineer

Web Developer

Web Developers design and develop websites and web applications. They work with businesses to understand their needs and to develop web solutions that meet those needs. This course can help you develop the skills and knowledge needed to be a successful Web Developer, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Web Developer

Data Engineer

Data Engineers design, build, and maintain the infrastructure and processes used to collect, store, and analyze data for a business. They work with businesses to understand their needs and to develop data solutions that meet those needs. This course can help you develop the skills and knowledge needed to be a successful Data Engineer, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Data Engineer

Statistician

Statisticians use their skills in mathematics, statistics, and programming to collect, analyze, and interpret data. They work with businesses to help them understand their customers, optimize their operations, and make better decisions. This course can help you develop the skills and knowledge needed to be a successful Statistician, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Statistician

Market Researcher

Market Researchers use their skills in research, data analysis, and communication to help businesses understand their customers and markets. They work with businesses to develop and implement marketing strategies that are based on research and data. This course can help you develop the skills and knowledge needed to be a successful Market Researcher, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for Market Researcher

UX Designer

UX Designers use their skills in research, design, and testing to create user interfaces that are both usable and enjoyable. They work with businesses to understand their users and to develop user interfaces that meet their needs. This course can help you develop the skills and knowledge needed to be a successful UX Designer, including how to use D3.js to create data visualizations that can help you communicate your findings to others.

See salaries and explore the career path for UX Designer

Front-End Developer

Front-End Developers design and develop the user interface of websites and web applications. They work with businesses to understand their needs and to develop front-end solutions that meet those needs. This course may be useful for individuals who want to develop a strong foundation in data visualization for front-end development.

See salaries and explore the career path for Front-End Developer

Product Manager

Product Managers work with businesses to develop and launch new products. They work with engineers, designers, and marketers to bring a product to market and to ensure that it meets the needs of customers. This course may be useful for individuals who want to develop a strong foundation in data visualization for product management.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers plan, execute, and close projects. They work with teams to ensure that projects are completed on time, within budget, and to the required quality. This course may be useful for individuals who want to develop a strong foundation in data visualization for project management.

See salaries and explore the career path for Project Manager

Technical Writer

Technical Writers create and maintain documentation for software, hardware, and other technical products. They work with engineers and other technical experts to gather information and to write documentation that is clear, concise, and accurate. This course may be useful for individuals who want to develop a strong foundation in data visualization for technical writing.

See salaries and explore the career path for Technical Writer

Science Writer

Science Writers communicate complex scientific information to a general audience. They work with scientists and other experts to gather information and to write articles, reports, and other materials that explain scientific concepts in a clear and engaging way. This course may be useful for individuals who want to develop a strong foundation in data visualization for science writing.

See salaries and explore the career path for Science Writer

Educator

Educators teach students in a variety of settings, from preschool to university. They work with students to help them learn and grow, both academically and personally. This course may be useful for individuals who want to develop a strong foundation in data visualization for teaching.

See salaries and explore the career path for Educator