Introduction to D3 Course: Part 1

What you'll learn!
D3 is a popular (200M downloads and 100K stars) framework for building bespoke data visualizations for the web. This five-part course will teach you the fundamentals of how to build data visualization with D3. In the course, we will cover the basics of HTML, CSS, SVG and JavaScript, common chart forms like scatterplots, line charts, bar charts, as well as some of D3's most unique capabilities with animation and interaction.

Observable is the ideal environment for learning D3 because it simplifies code with dataflow, like a spreadsheet. As you edit, cells run automatically for rapid feedback. You can add interaction or animation with almost no code! We’ll cover Observable’s quirks and features as we go along.

[jestinjoshi]

6:40 - Logistics
8:34 - Prerequisites
9:23 - Agenda
10:51 - What is D3?
19:50 - Observable 101
20:42 - Activity 1
29:40 - HTML, CSS, JavaScript
34:37 - Activity 2 & 3
50:59 - SVG & the DOM
55:43 - D3 First Steps
1:05:56 - Session 2 Agenda

[jamesgrubb]

Great series, thank you. Regarding the explanation at 44:10 about why the color of the <h1> tags did not change: Observable applies its own styles to heading tags (such as color, size, etc.). To override these stylistic decisions, you would need to specifically target the <h1> tag in your CSS. You can do this by using selectors like div > h1 or simply h1 to ensure your custom styles take precedence.

[animaltechno]

Is there any auto complete functionality in Observable?