Learn and Understand D3.js for Data Visualization

Dive deep under the hood of D3.js. Learn core concepts and build stunning data visualizations using D3 version 7

4.66 (1567 reviews)
Udemy
platform
English
language
Web Development
category
instructor
10,857
students
9 hours
content
Jan 2022
last update
$74.99
regular price

What you will learn

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

Description

*** 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 ONE COURSE to learn everything you need to know to be successful D3 developer, take this course.


Content

Introduction

Overview
Setting up a Local Server
Understanding D3 & Data Visualization
Lecture Notes

JavaScript & SVG Fundamentals

PLEASE READ BEFORE CONTINUING!!!
JavaScript Arrays & Objects
What is SVG?
Creating SVG images
SVG Rectangles
SVG Circles, Ellipses and Lines
SVG Polygons and Polylines
SVG Paths
SVG Text
SVG Definitions and Groups
SVG Text Paths
SVG Clip Paths
Creating SVG elements with Illustrator
Download Source Code
SVG Basics
Lecture Notes

D3 Fundamentals

Setting up
Selections
Manipulating Selections
Binding Data
Displaying data
Loading Data Externally
Download Source Code
D3 Fundamentals
Lecture Notes

Getting to know Scales

First Steps
Random Data
Using SVG
Scatter Plot
Scales
Applying Scales to Visualizations
Exploring More Scales
Time Scales
Adding an Axis
Refining the Axis and adding the Y Axis
Download Source Code
Lecture Notes

Animations & Interactivity

Ordinal Scales
Refining the Bar Graph
Updating the Bar Graph
Transitions and Animations
Updating the Data
Reinforcing Transitions & Animations
Refining the Scatterplot
Adding Data
Removing Data
Mouse Hovers
Sorting
Fun with Tooltips
Download Source Code
Lecture Notes

Exploring Layouts

Line Charts
Improving the Visualization
Pie & Donut Charts
Stacked Bar Charts
Force Layouts
More About Forces
Download Source Code
Lecture Notes

Fun with maps!

GeoJSON Overview
Drawing the Map & Projections
Choropleth Maps
Adding Cities
Panning the Map
Dragging the Map
Zooming
Download Source Code
Lecture Notes

Wrapping things up

Scale Inversion & Extent
Sketching
Using Transitions Efficiently
3rd Party Plugins & Tooltips
Responsive Charts
Conclusion
Download Source Code
Lecture Notes

BONUS SECTION: Node and D3

D3 & Node
Command Line
Exploring & Installing NodeJS
Modules
Loading D3
Download Source Code

Screenshots

Learn and Understand D3.js for Data Visualization - Screenshot_01Learn and Understand D3.js for Data Visualization - Screenshot_02Learn and Understand D3.js for Data Visualization - Screenshot_03Learn and Understand D3.js for Data Visualization - Screenshot_04

Reviews

Bruno
October 7, 2023
This course offers a very good and brief overview of D3, enough for you to get the basics straight and experiment on your own. Fully recommended!
Earl
August 29, 2023
Terrific course. Definitely exceeded my expectations. The instructor provides a consistent structure of steps to creating visualizations. The pacing is terrific in comparison to the dozen-plus courses I've taken on Udemy. I feel confident in tackling most of my current visualization demands. I would take another course from this instructor.
Mahdi
August 7, 2023
I started this course with only basic knowledge of HTML, CSS and JS I gained from watching 1-hour YouTube videos. I was expecting to struggle a lot with d3 due to my lack of experience with web development. But the course instructor goes through the material in a comprehensive manner, explaining every little detail you need to know to be able to begin working with d3. After watching to the end of section 6, I am now able to understand d3 codes I find on the internet and edit them for my own use.
Aymeric
July 20, 2023
Bonne introduction à D3, pas à pas. Il faut simplement adapter la version de v6 à v7 dans index.html.
Bo
July 9, 2023
Very good introduction, but would like to see more topics like interactive charts and advanced visualizations.
Millennium
June 23, 2023
You need to update code, half of functionality doesn't work like you write in code. Tooltip for example. Some functions are different now, some doesnt exist anymore, like invert on scaleBand...
Kassondra
June 2, 2023
I am enjoying the teacher's pace and the amount of subject matter they cover. It is not too much or too little and I'm able to follow along fairly well.
Vikram
April 20, 2023
I went through the complete course and understood whatever d3 is taught here, but it was painful and very horrifying experience. 1. There are many concepts author just assumed we already know. 2. After first section, I could not understood rest of the section clearly. 3. Very-2 difficult to understand if no prior java script knowledge is there.
Torah
March 27, 2023
I liked getting some clear examples of how to make charts with d3. Sometimes, the course seemed to be a bit slow though. And as much as the examples that were presented were helpful, after finishing the course, I still feel like d3 is a huge library, and I have only scratched the surface.
Dan
March 25, 2023
Great course! This was a very nice introduction to D3. I have already started building useful graphs with my data. Thanks!
Bohdan
March 19, 2023
Great! As all courses made by Luis Ramirez Jr. It's a good start for me for data visualization using JS libraries. Thanks a lot!
Stephen
March 11, 2023
I really like the step-by-step incremental approach used in this course. It's very well organized and delivered.
Andreas
January 25, 2023
Great course. Descriptions are on point and all excess are trimmed so that this course is D3 and D3 only.
Graham
January 18, 2023
It gives a good and quick understanding of d3 and covers much of the API. The lecturer is concise and doesn't repeat himself, and makes good use of images to show concepts. I didn't give 5 stars because there are quite a few mistakes made during the lectures which are corrected by popover text, and the lecturer makes a lot of typos when typing out code, which can make it tedious to watch as he corrects them, sometimes multiple times. Overall a good course and taught me what I was after.
Praveen
December 25, 2022
I went through the whole course and understood whatever d3 is taught here, but it was painful and horrifying experience. 1. There are many concepts author just assumed we already know. 2. Very limited discussion on WHY we adding certain function IN RELATION to our code. 3. On many instances we are introduced with 2-3 new concepts with a total explanation of less than 1 minute. 4. Author likes to show end result in browser mostly when the whole "task" is done This becomes challenging to figure out how exactly every line of code helped getting desired result. With this course, d3 felt 2x tougher than learning javascript. There aren't any good course on youtube and I didn't had money to buy another course on udemy.

Charts

Price

Learn and Understand D3.js for Data Visualization - Price chart

Rating

Learn and Understand D3.js for Data Visualization - Ratings chart

Enrollment distribution

Learn and Understand D3.js for Data Visualization - Distribution chart
1368106
udemy ID
10/1/2017
course created date
11/23/2019
course indexed date
Bot
course submited by