Udemy

Platform

English

Language

Web Development

Category

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 6.x

4.63 (913 reviews)

Students

9 hours

Content

Jan 2021

Last Update
Regular Price

WES BOS
Wes Bos
Build 30 things in 30 days with 30 tutorials
FREE COURSE
FULLSTACK.IO
Fullstack.io
Build beautiful data visualizations with D3
$89.00

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 6.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 (v6.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 6.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.



Screenshots

Learn and Understand D3.js for Data Visualization
Learn and Understand D3.js for Data Visualization
Learn and Understand D3.js for Data Visualization
Learn and Understand D3.js for Data Visualization

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


Reviews

M
Marsel5 October 2020

I felt this course could have better. The instructor would move very fast through the lectures and it was difficult to follow at times with him jumping around and copy/pasting stuff.

S
Shashwat28 August 2020

This is the best course for d3, available on the internet ( at least for me ). I was able to understand everything very easily and unlike many other educators/courses, this course is very professionally made. Worth every penny!

B
Behfar16 June 2020

Clear and polished presentation style without being pedantic. Sets a good bar for video instruction. Explanations are broken into bite sized pieces. Very happy with this course.

G
Guilherme10 June 2020

Very good course, well taught. Although, I would even happier if the code from the the beginning and end of the class were better provided, a github repo would be great. Also, more examples with advanced graphs would also be nice. The overall is extremely positive, though. I would recommend to anyone learning D3.js.

M
Maxim30 April 2020

Very good course to learn in a short time the basics of data visualization with the powerful lib D3js. Thank you!

F
Fábio24 January 2020

The course is indeed amazing, if you could add Doughnut Chart with Polylines and Word Cloud too examples it would be great. Thanks!

S
Syed15 January 2020

A course is good only when it has an active forrum. But it looks dead here. Without the question-answers you are going nowhere in such complicated chapters like d3.

A
Andrew29 November 2019

Luis is an excellent teacher. He has the perfect balance of explanation and speed - not missing out the "why" but also not labouring the point. I liked the way he built up from a foundation and increased the complexity as the course progressed. It was just the right pace for me - someone with a lot of JavaScript experience but no d3 experience. For fun I used VS Code, Webpack and ES6 and adapted on the fly to a slightly different environment and coding style. This helped me grasp the concepts better as I had to make small adjustments to keep up. Highly recommend this course as a great primer for d3, while still going deep enough to be super useful. Thank you, Luis!

J
Jack22 November 2019

The course is on another level, he is being modest with the pre-requisite knowledge, he has an intro section where he explains every required concept including things as simple as vectors vs bitmap, in case you never learned about them, but he describes all the simple stuff concisely and moves on. This course is perfect for all levels from what I've seen so far.

C
Chilarai26 September 2019

Simply explained the concepts in detail. The course contains a basic intro to SVG which is initially not covered in other tutorials. The lectures on SVG comes in handy when actually working with D3. The relation between SVG and D3 are not taught in other tutorials for a beginner

J
Jérôme14 July 2019

The beginning of the course is ok, but at the end, the teacher explains less things. Some code is rapidly copied and pasted without deep understanding. Some resources are missing. I finished the course, but I'll have to work a lot with the documentation and tutorials to understand D3.js.

M
Michael16 June 2019

I have a background in health data and web development. This was the ideal course for me. It was perfect for someone with my background. I can't really speak to beginners or very advanced people looking into this course but for someone with decent knowledge of JavaScript it is great.

J
Justice1 April 2019

It was a great experience taking this course. It has enlightened me on the concept of D3.JS generally and specifically, data visualization. Always remember that 'data drives visualization and not the other way round'.

A
Andrey10 February 2019

Great course if you want to get familiar with d3 library. Plenty of examples and great explanation of tricky parts, though closer to the end you will still have to read documentation to understand the material.

B
Bryant6 February 2019

Update the last 2 sections 8 and 9 to have accurate descriptions and functional examples. But overall, really good for beginners.


Related Courses

SKILLSHARE
Learn AWS QuickSight Data Visualization and Analytics with practical lab exercises
Learn AWS QuickSight Data Visualization and Analytics with practical lab exercises
SKILLSHARE
TIBCO Cloud Spotfire Data Visualization and Analytics
TIBCO Cloud Spotfire Data Visualization and Analytics
SKILLSHARE
Interactive Data Visualization: Getting Started with D3.js - V5
Interactive Data Visualization: Getting Started with D3.js - V5

1368106

Udemy ID

10/1/2017

Course created date

11/23/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram