Introductory D3.js Course

Learning D3.js can feel overwhelming because of how many new technologies and techniques you have to learn just to be able to use D3 properly.

The learning curve is notoriously steep. You can waste hours of your time pouring through poorly written Stack Overflow posts, reading a scattering of blog posts, or copying yet another example from bl.ocks.org.

Don’t let D3 crush you. Invest in yourself.

Introductory D3.js course provides a very structured approach to mastering D3.js.

A great deal of hand-holding, thorough explanations, tons of examples, in-depth teaching, and many many JavaScript console walkthroughs of how the D3 code is affecting the DOM, HTML, SVG, and other D3 code.

Learn how to create 9 common D3 charts from scratch.

And understand 100% of the code!

Scatterplot

Bar Chart

Bar Chart with Negative Values

Area Chart

Grouped Bar Chart

Stacked Bar Chart

Multi-Series Line Chart

Pie Chart Layout & Pie Chart

Donut Chart


Learn and practice:

How web technologies like SVG, CSS, JS, HTML, and the DOM fit in the D3.js world

The best way to get started on any visualization with non-D3 building blocks

Creating and placing visual data elements using D3.js

Granular control of both data and aesthetics

How to use AJAX and XMLHttpRequest to load data

Simple processes in the JavaScript console so that you never get lost

Browse the Introductory Course

Showing all 50 lessons...
This video covers the Introduction to HTML. Specifically it covers: a) What HTML Is, b) What HTML Looks Like, c) Brief History of HTML, d) The Structure Of An HTML Document, and e) The Syntax of HTML Elements.
This video covers the Introduction to CSS. Specifically, this video covers: a) What CSS is, b) What CSS looks like, c) A Brief History of CSS, d) The Structure of CSS Within an HTML Document, and e) The Syntax of CSS.
This video covers the Introduction to JavaScript. Specifically, this video covers: a) What JavaScript is, b) What JavaScript looks like, c) A Brief History of JavaScript, d) The Structure of JavaScript Within an HTML Document, and e) The Syntax of JavaScript.
This video covers how to get started with D3.js. Specifically, this video covers: a) Setup a Folder to Hold D3, b) Get the Latest D3 Version, c) Use Chrome Developer Tools, and d) Setup and Test the HTML + D3.
This video covers D3 Selections. Specifically, this video covers: a) Basic D3 Visualization Pattern, b) D3.select, c) D3.selectAll, d) D3 Selections are arrays, and e) CSS3 Selectors as Selection Tools.
This video covers D3 Arrays. Specifically, this video covers: a) In D3 Data = Arrays, b) JavaScript Arrays, c) JS Array Mutator Methods, d) JS Array Accessor Methods, and e) Basic D3 Array Utilities.
This video covers Adding a DOM Element with D3.js. Specifically, this video covers: a) D3 Selections Revisited, b) D3 Append Operator, c) D3 Insert Operator, and d) D3 Remove Operator.
This video covers The Fundamentals of SVG. Specifically, this video covers: a) What SVG is, b) What HTML5 Canvas is, c) SVG vs Canvas, d) The Structure of SVG Within an HTML Document, and e) The Syntax of basic SVG Objects.
This video covers how to use D3 for Adding an SVG Element. Specifically, this video covers: a) D3 Append Revisited, b) Setting Selection Attributes, c) Circle Example, d) D3 Style Operator, and e) D3 Legibility through JS variables.
This video covers the D3 Data Operator. Specifically, this video covers: a) D3 Data Operator, b) D3 Data Operator with many Data Values, and c) Mismatches between Data Points and DOM Elements.
This video covers the D3 Update Selection. Specifically, this video covers: a) D3 Update Selection, b) D3 Exit Selection, and c) D3 Enter Selection.
This video covers the the process of Binding Data to DOM Elements. Specifically, this video covers: a) D3 Enter Selection Revisited, b) D3 Visualization Pattern Revisited, c) D3 Append Operator Revisited, and d) Binding Data to DOM Elements.
This video covers the JavaScript Functions. Specifically, this video covers: a) Named JavaScript Functions, b) Anonymous JavaScript Functions, and c) Passing JavaScript Functions as Variables.
This video covers the Using Data Bound to DOM Elements. Specifically, this video covers: a) D3 Data Operator Revisited, b) D3 Text Operator, c) Using JavaScript Functions in D3 Operators, and d) Variables Available inside D3 Operators.
This video covers Creating SVG Elements from Data. Specifically, this video covers: a) SVG Revisited, b) D3 Data Operator Revisited, c) Binding Data to SVG Elements, d) Using Data Bound to SVG Elements, e) Using Data to Style SVG Elements.
This video covers Using the SVG Coordinate Space. Specifically, this video covers: a) SVG Revisited, b) Math Coordinate Space, c) SVG Coordinate Space, d) D3 Append SVG Revisited, e) D3 & SVG Coordinate Space.
This video covers JavaScript Data Types. Specifically, this video covers: a) JavaScript Data Types, b) Primary Data Types, c) Composite Data Types, d) Special Data Types, and e) JSON.
This video covers JavaScript Data Types. Specifically, this video covers: a) JSON Revisited, b) D3 Associative Array Operators, c) D3 Data Operator Revisited, and d) JSON in the D3 Data Operator.
This video covers D3 and SVG Basic Shapes. Specifically, this video covers: a) Basic SVG Object Syntax Revisited, b) D3 and SVG Rectangles, c) D3 and SVG Circles, d) D3 and SVG Ellipses, and e) D3 and SVG Straight Lines.
This video covers D3 and SVG Paths. Specifically, this video covers: a) D3 and Basic SVG Line Shapes, b) SVG Path, and c) D3 Path Data Generator.
This video covers Dynamic SVG Coordinate Space. Specifically, this video covers: a) SVG Coordinate Space Revisited, b) Basic D3 Array Utilities Revisited, c) Adjusting SVG Coordinate Space, and d) SVG Coordinate Space Margins.
This video covers D3 Scales. Specifically, this video covers: a) SVG Coordinate Space Revisited, b) D3 Scales, c) D3 Linear Scale, d) D3 Linear Scale Domain, and e) D3 Linear Scale Range.
This video covers D3 Scales Part Two. Specifically, this video covers: a) D3 Scales Revisited, and b) D3 Scales as Functions.
This video covers D3 Scales Part Three. Specifically, this video covers: a) D3 Scales Revisited, b) SVG Container and D3 Scales, and c) D3 Scales and SVG Data Points.
This video covers SVG Group Element. Specifically, this video covers: a) SVG Group Element, b) SVG Group Element Transform, and c) SVG Coordinate Space Transformation.
This video covers D3 and the SVG Group Element. Specifically, this video covers: a) SVG Group Element Revisited, b) Grouping SVG Elements with D3, c) D3 and SVG Group Element Transform.
This video covers SVG Text Elements. Specifically, this video covers: a) SVG Revisited, b) SVG Text Elements, c) Adding SVG Text Elements, d) D3 and SVG Text Elements, and e) D3, Data and SVG Text.
This video covers the D3 Margin Convention. Specifically, this video covers: a) SVG Viewport Revisited, b) D3 Group Element Revisited, c) D3 Margin Convention, and d) Line Chart Case Study.
This video covers D3 and JS Dates and Times. Specifically, this video covers: a) JavaScript Objects Revisited, b) JavaScript Date Object, and c) D3 Time Formatting.
This video covers D3 Time Scales. Specifically, this video covers: a) D3 Scales Revisited, b) JavaScript Date Objects Revisited, and c) D3 Time Scales.
This video covers D3 Axes. Specifically, this video covers: a) D3 Axis Component, b) D3 Axis Scale, and c) D3 Axis Component with Margins.
This video covers D3 Axes Manipulation. Specifically, this video covers: a) D3 Axis Component Revisited, and b) D3 Axis Orient.
This video covers D3 Scales For Data. Specifically, this video covers: a) D3 Scales Revisited, b) D3 Axes Component Revisited, and c) D3 Scales For Data.
This video covers Putting It All Together. Specifically, this video covers: a) Data, b) Initial Visualization Decision, c) SVG Viewport and Margins, d) Scale Data - Set the Domain, e) Scale Data - Set the Range, f) Define and Call the Axes, g) Data Representation, h) Binding Data to SVG Elements, i) Adding Attributes to SVG Elements, j) Adding Text Labels, and k) JavaScript Console Example.
This video covers Really Simple HTTP Server with Python. Specifically, this video covers: a) Web Client Server Basics, b) D3 Works Better With A Server, c) Python Programming Language, and d) Python SimpleHTTPServer.
This video covers JavaScript Callback Functions. Specifically, this video covers: a) Passing JavaScript Functions as Variables Revisited and b) JavaScript Callback Functions.
This video covers D3 Requests. Specifically, this video covers: a) JavaScript Is Single-Threaded, b) Asynchronous I/O, c) XMLHttpRequest, d) D3 XHR, and e) D3 Type Specific Requests.
This video covers Loading Data From Server. Specifically, this video covers: a) Python SimpleHTTPServer Revisited, b) D3 Type Specific Requests Revisited, and c) Loading TSV Data From Server.
This video covers Basic Chart - Line Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers D3 Ordinal Scales. Specifically, this video covers: a) D3 Scales Revisited, b) D3 Ordinal Scales, c) D3 Ordinal Scales - Categorical Colors, and d) D3 Ordinal Scale Examples.
This video covers Basic Chart - Scatterplot. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Bar Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Bar Chart With Negative Values. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Area Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Grouped Bar Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Stacked Bar Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Multi-Series Line Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Pie Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Chart - Donut Chart. Specifically, this video covers: a) Visual Code Walk Through and b) JavaScript Code Build.
This video covers Basic Interaction - Data Tooltips. Specifically, this video covers: a) Basic Chart - Scatterplot Revisited, b) Document Object Model Events, c) D3 selection.on, d) D3.event, e) Putting It All Together, and f) JavaScript Console Walk Through.