Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Drawing our chart

To set up our chart environment, we learn why we need two containers: wrapper and bounds.

This page is a preview of Fullstack D3 Masterclass

Previous Lesson:

Setting up our line chart

Next Lesson:

Creating our workspace

New
0:001

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack D3 Masterclass

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Making Your First Chart

Lesson 1: (1:43)

Making Your First Chart

Lesson 2: (5:51)

Loading the weather dataset

Lesson 3: (8:35)

Setting up our line chart

Lesson 4: (5:15)

Drawing our chart

Lesson 5: (3:24)

Creating our workspace

Lesson 6: (4:28)

Adding an SVG element

Lesson 7: (4:42)

Creating our bounding box

Lesson 8: (10:06)

Creating our scales

Lesson 9: (6:27)

Drawing the line

Lesson 10: (5:08)

Drawing the axes

Lesson 11:

Week 1: Exercise

Appendix 1:

Datasets

Module 2: Making a Scatterplot

Lesson 1: (1:28)

Making a Scatterplot

Lesson 2: (2:03)

Steps in drawing any chart

Lesson 3: (1:57)

Step 1: Access data

Lesson 4: (7:24)

Step 2: Create chart dimensions

Lesson 5: (2:59)

Step 3: Draw canvas

Lesson 6: (4:20)

Step 4: Create scales

Lesson 7: (15:27)

Step 5: Draw data

Lesson 8: (11:29)

Step 6: Draw peripherals

Lesson 9: (1:55)

Looking at our chart

Lesson 10: (5:47)

Extra credit: adding a color scale

Lesson 11:

Week 2: Exercise

Module 3: Making a Bar Chart

Lesson 1: (3:31)

Making a Bar Chart

Lesson 2: (2:03)

Access data

Lesson 3: (2:49)

Create dimensions

Lesson 4: (2:25)

Draw canvas

Lesson 5: (10:25)

Create scales

Lesson 6: (8:35)

Draw data

Lesson 7: (7:11)

Adding Labels

Lesson 8: (14:28)

Draw peripherals

Lesson 9: (8:58)

Extra credit

Lesson 10: (13:13)

Accessibility

Lesson 11: