Lessons

Explore all newline lessons

Tags
Author
Pricing
Sort By
Video
Most Recent
Most Popular
Highest Rated
Reset
Extra credit: adding a color scale

lesson

Extra credit: adding a color scaleFullstack D3 Masterclass

We learn how to create a custom color scale, then we color our circles based on another metric: cloud cover.

Looking at our chart

lesson

Looking at our chartFullstack D3 Masterclass

Our hard work completed, we sit back and talk about what insights our chart can teach us.

Draw peripherals

lesson

Draw peripheralsFullstack D3 Masterclass

We draw a line depicting the mean of our distribution, as well as our axes.

Draw data

lesson

Draw dataFullstack D3 Masterclass

We finally get to draw our bars! We draw them in groups, so we can position them as well as labels.

Create scales

lesson

Create scalesFullstack D3 Masterclass

We create our scales, but first, we learn how to split our data into equally-sized bins.

Draw canvas

lesson

Draw canvasFullstack D3 Masterclass

Creating our wrapper and bounds elements.

Access data

lesson

Access dataFullstack D3 Masterclass

Next, we grab our data and create our accessor function (only one this time!)

Steps in drawing any chart

lesson

Steps in drawing any chartFullstack D3 Masterclass

We solidify our foundation by splitting our chart-creating code into seven general steps.

Making a Scatterplot

lesson

Making a ScatterplotFullstack D3 Masterclass

We dive into making a slightly more complex chart: a scatter plot. In this lesson, we talk about why you would create a scatter plot and its basic anatomy.

Drawing the axes

lesson

Drawing the axesFullstack D3 Masterclass

We learn how to create axes and transform them into position.

Drawing the line

lesson

Drawing the lineFullstack D3 Masterclass

We learn about path SVG elements and how to construct a string for their d attribute.

Creating our scales

lesson

Creating our scalesFullstack D3 Masterclass

We learn about scales and create our first ones: our y and x scales.