Introduction to D3 Course: Part 1

Learn more about the course here: bit.ly/3sHNDja
Lesson 1 slides: bit.ly/3roPVn7
Lesson 1 notebook: bit.ly/3rAOHVI
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

[@mechadense]

Start at 5:19

[@lolafunchow]

❤thanks, I was about to drop

[@jamesgrubb]

Great series, thank you. Regarding the explanation at 44:10 about why the color of the 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 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?

[@willw4096]

56:16 57:03 1:02:18