Data Visualization with D3 – Full Course for Beginners [2022]

This course is an edited collection of live streams taught by Dr. Curran Kelleher. He is one of the top D3 instructors in the world. He has a Ph.D. in Computer Science, and has taught at universities including MIT.

⭐️ Course Resources ⭐️

⭐️ Course Contents ⭐️
⌨️ (00:00:00) Introduction
⌨️ (00:06:16) SVG Fundamentals
⌨️ (01:05:11) Pseudo Visualizations
⌨️ (02:16:26) Sol LeWitt in Vanilla JS
⌨️ (03:32:31) Sol LeWitt in D3
⌨️ (05:08:31) D3 Selections
⌨️ (06:43:11) JavaScript Modules & Build Tools
⌨️ (08:04:07) Productizing a Codebase
⌨️ (10:25:28) Scatter Plot
⌨️ (11:56:28) Reusable Charts
⌨️ (13:28:27) Dynamic Charts
⌨️ (15:07:37) Charts with Menus
⌨️ (16:35:23) Quantitative and Categorical
⌨️ (18:17:35) Closing the Series

--

[siosaida]

Love how someone asks a question and while Curran could just say "yes, that's correct", he went into depths explaining how things work. Sometimes, I had questions that were not asked by the student, but what Curran explained in a seemingly non-necessary way always ended up answering these questions. Wonderful teacher :)

[jayp]

I'm 6:30 in and am enjoying the course. Came to learn about D3 data joins, but am learning other tidbits about JS / ES6 also. Some of the students are very bright and creative! An alternative to using Vishub is to use npm to run a local Vite server, allowing you to edit the modular JS files, view with a browser, and it automatically updates the browser when you save the file.

[atharvakulkarni]

This is probably one of the only few courses that I have followed through till the end, and it was absolutely amazing ❤ I was struggling with D3 since a long time and this course explains D3 right from the fundamentals.!

[A--_--M]

I am extremely elated to see this on my youtube recommendations. I've been following Curran from the previous course and really enjoyed his teaching style.

[ripmag]

Just a GODlike teacher! well-mannered, pleasant, calm, always thankful for various questions... You are wonderful Curran! Thanks

[effy]

2:54:59 Javascript driven svg
2:59:54 Create svg using the dom api (use "createElementNS" inside svg block)
3:58:32 Array.from({ length: 100 }, (_, index) => ({
y: index * 20,
width: 100,
height: 100,
mask: '...'
}));
4:19:55 .data should be passed by array
4:47:39 renderMask(svg, 'mask-1', false) equivalent to svg.call(renderMask, 'mask-1', false)
5:46:49 js reduce

[ccuny]

191/2 hours. Record broken. That's me up all night. For 3 weeks, cos' I need a few repeats before I start getting it. Apart from the deleterious effect on my health this is going to have, I am very grateful for this generous resource on a subject I have really been meaning to get schooled in. Thank you!

[mythicalmim]

I tried to jump right into creating some D3 charts thinking I knew enough about JavaScript and HTML to understand it. Spoiler: I did not lol. This course has been incredibly helpful! Do not skip the basics in the beginning because I actually learned some new tidbits and it really helps to refector the VanillaJS into D3 so that you fully understand what the D3 code is doing. Thank you so much! Cannot wait to keep watching.

[sriram-uuyd]

I have registered for a Data Visualisation course in my University for the Fall 2022 semester, it’ll be completely taught in d3. So this course would help me a lot.

[thuglife]

Did a D3.js elective at University and it was the absolute best subject in my entire 4 year Computer Science degree so I'm really looking forward to further advance my learning with Curran

[SANTOSHMITRA-uy]

A small note - To turn anything into comments in any programming language, try using the Ctrl + Forward slash buttons together. Each programming language has a different set of symbols for comments. Like in Python it is the hash symbol, in HTML it is a combination of the greater and less than symbols and so on. But all of this, has the Ctrl+Forward slash as the shortcut keys.

[mayaahmed]

I thought the course would continue every other week . Was surprised to see it end abruptly. This course is a gem. Thanks. I learned so much. I hope they give you an award or something. so good.

[peveryday]

00:00 📚 Introduction to the Course and Live Format
03:44 👥 Introductions of Participants
06:26 🖥️ HTML, CSS, and SVG Introduction
15:23 🧰 Setting Up a Development Environment
26:44 📜 HTML Structure and Tags
29:45 🖼️ SVG Basics
41:50 🧩 Composing SVG Paths
49:55 📝 Comments and Conclusion
59:36 🌟 Introduction to SVG and D3
01:05:19 🎨 Pseudo Visualizations with SVG
01:08:18 🖋️ Understanding CSS Selectors and Attributes
01:24:18 🌅 Creating a Stunning SVG Animation
01:28:56 🎨 SVG Gradient Basics
01:34:46 🖌️ Sketching and Design Tools
01:47:37 📊 Pseudo Bar Chart
01:58:35 🔗 Overview of Link Tags and CSS Relationship
02:07:45 🎨 Exercise Discussion and Hierarchical Visualization
02:16:44 🎨 Introduction to Sol LeWitt and Art Reproduction
02:27:09 🖼️ Setting Up for Sol LeWitt Art Reproduction
02:28:08 🧭 JavaScript Basics
02:50:15 🎨 Creating SVG Element with JavaScript
02:55:25 🟦 Creating a Rectangle with JavaScript
02:55:53 🧩 DOM Tree Structure and SVG Elements
03:00:05 📏 Refactoring with Variables
03:05:06 🚀 Creating Multiple Rectangles in a Loop
03:11:38 🩹 Creating SVG Masks for Texture
03:19:19 🔄 Combining Textures and Inverting Masks
03:23:41 📚 Introduction to Functional Programming in JavaScript
03:26:42 🤖 Transition to D3 and Functional Programming
03:29:44 🖥️ Using Visual Studio Code for Coding
03:30:56 📦 Standard HTML and JavaScript
03:32:40 🛠️ Wrapping Up and Looking Forward
03:55:48 📊 Creating an array of objects for rectangles
03:59:05 📊 Implementing D3 Data Joins
04:09:03 📊 Adding Masking Elements
04:16:06 📊 Organizing Elements with Group Elements
04:30:28 📊 Utilizing D3 Symbols for Shapes
04:32:20 🎨 Exploring D3 Symbol Generation
04:39:55 🔄 Refactoring for Code Reusability
04:48:47 📊 Rendering Multiple Symbols
05:00:22 🌟 Dynamic Symbol Size and Spacing
05:02:36 ❓ Understanding the Data Join
05:05:10 📊 Understanding JavaScript arrays and their basic properties
05:19:15 🧮 Creating a custom range function in JavaScript
05:30:05 🔄 Sorting arrays with JavaScript's `sort` method
05:32:23 🧐 Understanding the comparator function in array sorting
05:35:53 📊 Introduction to sorting arrays in JavaScript and D3,
05:39:02 📈 Exploring the `map` method,
05:41:56 🔢 Understanding the `reduce` method,
06:03:13 🎯 Introduction to D3 data joins,
06:09:46 📊 Explanation of sine wave animation,
06:19:29 🔄 Introduction to method chaining and D3 data joins,
06:29:12 📉 Using the exit selection to remove elements,
06:34:21 🔄 Refactoring code into functions and using ES6 modules,
06:40:07 📊 Introduction to D3 and selection renaming
06:43:41 🖥️ Introduction to JavaScript Modules and Build Tools
06:46:17 📄 Reviewing Exercise Submissions and GitHub Usage
06:59:19 🧩 Understanding ES6 Modules and JavaScript Bundle
07:09:37 📦 Integrating D3 Library Using Browser Globals
07:13:32 📦 Setting Up Local Development
07:19:23 🧩 Comparing Package Managers and Module Bundlers
07:25:29 📜 Named Exports vs. Default Exports
07:28:06 📄 Local Development Workflow
07:41:40 🔄 Updating Local Code
07:44:02 📦 Setting Up Local Development Environment
07:45:41 🧩 Rollup Starter App for Advanced Development
07:47:36 🚀 Cloning and Initializing Rollup Starter App
07:50:10 🔄 Customizing Rollup Starter App for Project Development
07:54:18 📦 Bundling and Minification in Development
07:58:57 ♻️ Manual Refresh and Automatic Bundle Generation
08:03:05 🛠️ Choosing a Development Tool
08:26:56 🧹 Cleaning the Data Processing Scripts
08:29:42 📁 Creating a Main Data Processing Script
08:39:38 🛠️ Refining the Data Processing Pipeline
09:02:20 🔄 Implementing Data Aggregation
09:19:44 🌐 Preparing the Front-End Code
09:30:27 📄 Reorganizing HTML and Assets
09:32:05 🚀 Setting up the project environment
09:40:24 🌐 Configuring GitHub Pages
10:25:21 🐞 Debugging and Data Processing
10:26:13 📺 Introduction to the Main Tutorial
10:31:00 📦 Loading D3 and Data Initialization
10:38:07 🔄 Using ES6 Destructuring and Parsing Data
10:41:13 📈 Data Processing and Visualization Setup
10:57:11 📊 Data Mapping and Processing
11:07:36 🎨 Rendering the Scatter Plot
11:12:13 📊 Understanding D3 Scales and Data Mapping
11:14:37 🌐 Creating a Basic Scatter Plot with D3
11:24:34 🧰 Customizing Axes and Finalizing the Template
11:45 🔧 Exploring Different Ways to Construct D3 Axes
11:57 📝 Exercise: Forkable Template for Data Visualization
11:58 📊 Introduction to Reusable Charts
12:02 🎉 Review of Submissions
12:10 🦕 Visualization of Dinosaur Data
12:17:42 📊 Introduction to Data Visualization
12:27:07 🔄 Building Reusable Chart Components
12:38:11 🧮 Continuing with Chart Component Configuration
12:48:22 📦 Setting up the reusable scatter plot component
12:55:02 🧐 Understanding the absence of argument in JavaScript
13:01:32 🎯 Overview of the completed code and its functionality
13:06:25 🎨 Adding different shapes for data points
13:20:45 📈 Making Scatter Plots with D3
13:25:31 🔄 Reusable Chart Patterns
13:28:45 🚀 Participant's Work Showcase
13:37:37 🔤 Formatting Date Axes
13:50:16 🔄 Making Charts Dynamic
13:51:35 🔄 Idempotent Rendering and Code Refactoring
14:07:00 🤔 Relationship Between Idempotent Rendering and D3's Update Pattern
14:14:37 📊 Making Axes Idempotent
14:17:44 🔑 Significance of Null Data and Class for Group Elements
14:21:30 🚀 Transitioning to Animated Scatter Plot
14:22:55 🔄 Transition Basics in D3
14:26:37 🌟 Animating Scatter Plot Initialization
14:32:36 🔢 Staggering Transitions
14:45:58 📊 Transitioning Axes
14:53:53 🛠️ Refactoring Duplicated Logic
14:55:44 🕰️ `requestAnimationFrame` vs. `setInterval`
15:00:00 🧬 Naming Functions for Clarity
15:07:05 📜 Adding Menus for Interactivity
15:19:21 🔄 Efficient `continue` Usage
15:25:08 🌐 Filter Numeric Columns
15:26:40 📊 Introduction to the Data Set
15:27:42 🖼️ Different Visualization Examples
15:29:35 🔍 Analyzing Label Behavior
15:32:44 ⚙️ Adjusting Animation and Patterns
15:36:30 🎙️ Audio Technical Issue
15:37:00 📈 Adding Interactive Menus
15:38:28 🍽️ Preparing Menu Structure
15:40:05 🗂️ Configuring Menu IDs and Labels
15:47:20 📝 Setting Up Menu Options
15:54:01 🍽️ Populating Menu Options
16:00:54 📊 Setting up D3 code structure
16:03:24 🖥️ Wiring up event listeners
16:04:58 🔄 Updating the scatterplot with menu selections
16:25:16 🐛 Handling initial menu selection
16:27:08 🌿 Challenge: Handling non-numeric attributes
16:30:53 📊 Data Visualization Discussion
16:36:34 🌐 Introduction to Episode 11
16:38:12 💡 Adding Event Listeners
16:39:10 📈 Structuring Metadata
16:42:36 🔍 Differentiating Map and map
16:48:47 🎨 Visualizing Different Scale Types
16:51:01 🎛 Creating Interactive Filters
16:55:08 🌟 Enhancing Data Identity
17:02:03 📊 Handling Data and Visualization Basics
17:13:36 📊 Animated Scatter Plot and Data Categories
17:29:20 🔄 Implementing Data Lookup
17:34:04 📚 Discussing data filtering and mapping,
17:45:42 🧐 Addressing questions and clarifications,
17:54:45 🧱 Integrating x and y type selection into the scatter plot,
18:01:14 📊 Exploring the idea of creating dot plots for data distribution,
18:04:30 📊 Visualization Design Options
18:07:37 🔄 Code Refactoring and Cleanup
18:19:06 🌟 Wrapping Up the Course
18:30:23 📊 Exploring Tidy Tuesday Data
18:33:10 🤔 Income Inequality Analysis
18:36:05 📈 Data Visualization Possibilities
18:39:06 📅 Customizing Axis Ticks
18:45:30 🧮 Adding Jitter for Overlapping Data Points
18:57:17 🌐 Insights from Data Visualization
19:00:55 🌍 Enhancing Data Visualization
19:01:57 📊 Discussing data visualization techniques
19:06:08 🕰️ Adding time-based scaling to the visualization

Made with HARPA AI

[romanemul]

And then i realized... "Its 19 hours ride babe."

[cssensei]

Curran you’ve released this course thrice now! I REALLY request you to make a version where you show things from scratch including how to set all this up in visual studio on a local machine or even better on a cloud platform. I’m willing to pay for that course if needed because I understand the need for monetization

[serveshchaturvedi]

At 15:56:10, the name attribute is required if the data is submitted using form. Can also be styled using css or js. Also useful to create radiobutton or checkbox group for a particular value described by the name.

[hazychou]

Love Curran! I learnt a lot from previous series. Thank God, Curran made every tutorials at the time I am in need.

[overpitch]

Really great stuff! Learning, surprising to me, even when covering stuff that I thought I already had down. Understanding it at a deeper level now. Thanks for creating this!

[tropicaljupiter]

Enjoying the videos, but have to share:

Me: Help me out here, I've got a little question for you. I was watching a video on youtube and a guy started to refer to HTML closing tags as "not"-tag. For instance, `</body>` would be pronounced "not body". I've never heard this before. Is this a thing people actually say?

ChatGPT: As of my knowledge cutoff in September 2021, referring to HTML closing tags as "not-tags" is not a commonly used or recognized term. The standard terminology for HTML closing tags is simply "closing tags" or "end tags." For example, </body> is typically referred to as the "closing tag for the body element."

It's possible that the person in the YouTube video you watched was using a playful or unconventional terminology for educational or entertainment purposes. However, it's not a widely adopted or recognized practice in the web development community.

[Rage-wgqi]

This and previous one with React really help me a lot with my current course in the college. Thank you so much Curran and freeCodeCamp❤️