\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 8.3Digging in
Course Thumbnail of Fullstack D3 Masterclass.Fullstack D3 Masterclass
  • MODULE 1
    Making Your First Chart
    • LESSON 1.1Making Your First Chart
    • LESSON 1.2Loading the weather dataset
    • LESSON 1.3Setting up our line chart
    • LESSON 1.4Drawing our chart
    • LESSON 1.5Creating our workspace
    • LESSON 1.6Adding an SVG element
    • LESSON 1.7Creating our bounding box
    • LESSON 1.8Creating our scales
    • LESSON 1.9Drawing the line
    • LESSON 1.10Drawing the axes
    • LESSON 1.11Week 1: Exercise
    • LESSON 1.12Datasets
  • MODULE 2
    Making a Scatterplot
    • LESSON 2.1Making a Scatterplot
    • LESSON 2.2Steps in drawing any chart
    • LESSON 2.3Step 1: Access data
    • LESSON 2.4Step 2: Create chart dimensions
    • LESSON 2.5Step 3: Draw canvas
    • LESSON 2.6Step 4: Create scales
    • LESSON 2.7Step 5: Draw data
    • LESSON 2.8Step 6: Draw peripherals
    • LESSON 2.9Looking at our chart
    • LESSON 2.10Extra credit: adding a color scale
    • LESSON 2.11Week 2: Exercise
  • MODULE 3
    Making a Bar Chart
    • LESSON 3.1Making a Bar Chart
    • LESSON 3.2Access data
    • LESSON 3.3Create dimensions
    • LESSON 3.4Draw canvas
    • LESSON 3.5Create scales
    • LESSON 3.6Draw data
    • LESSON 3.7Adding Labels
    • LESSON 3.8Draw peripherals
    • LESSON 3.9Extra credit
    • LESSON 3.10Accessibility
    • LESSON 3.11Week 3: Exercise
  • MODULE 4
    Animations and Transitions
    • LESSON 4.1Animations and Transitions
    • LESSON 4.2CSS transitions
    • LESSON 4.3CSS transitions with a chart
    • LESSON 4.4d3.transition
    • LESSON 4.5Lines
    • LESSON 4.6Week 4: Exercise
  • MODULE 5
    Interactions
    • LESSON 5.1Interactions
    • LESSON 5.2d3 events
    • LESSON 5.3Destroying d3 event listeners
    • LESSON 5.4Bar chart
    • LESSON 5.5Scatter plot
    • LESSON 5.6Line chart
    • LESSON 5.7Week 5: Exercise
  • MODULE 6
    Data Visualization Basics
    • LESSON 6.1Data Visualization Basics
    • LESSON 6.2Types of data
    • LESSON 6.3Ways to visualize a metric
    • LESSON 6.4Chart design
    • LESSON 6.5Example redesign
    • LESSON 6.6Color scales
    • LESSON 6.7Custom color scales
    • LESSON 6.8Color spaces
    • LESSON 6.9Color tips
    • LESSON 6.10Week 6: Exercise
  • MODULE 7
    Advanced example
    • LESSON 7.1Radar Weather Chart
    • LESSON 7.2Getting set up
    • LESSON 7.3Adding gridlines
    • LESSON 7.4Adding freezing
    • LESSON 7.5Adding the temperature area
    • LESSON 7.6Adding the UV index marks
    • LESSON 7.7Adding the cloud cover bubbles
    • LESSON 7.8Adding the precipitation bubbles
    • LESSON 7.9Adding annotations
    • LESSON 7.10Adding the tooltip
    • LESSON 7.11Wrapping up
    • LESSON 7.12Week 7: Exercise
  • MODULE 8
    D3 + Javascript Frameworks
    • LESSON 8.1D3 + Javascript Frameworks
    • LESSON 8.2React.js
    • LESSON 8.3Digging in
    • LESSON 8.4Creating dimensions in React
    • LESSON 8.5Drawing our canvas in React
    • LESSON 8.6Creating our scales in React
    • LESSON 8.7Drawing our data in React
    • LESSON 8.8Drawing our peripherals in React
    • LESSON 8.9Drawing our peripherals in React, take two
    • LESSON 8.10Setting up interactions in React, and wrapping up
    • LESSON 8.11Using d3 with Angular.js
    • LESSON 8.12Using d3 with Svelte.js
  • MODULE 9
    Interviews
    • LESSON 9.1Interviews
    • LESSON 9.2Shirley Wu
    • LESSON 9.3Ian Johnson
    • LESSON 9.4Russell Goldenberg
    • LESSON 9.5Will Chase
Right arrow icon.
Go to Next Lesson
Go to Next Lesson
LESSON 8.5Drawing our canvas in React
  • Go Pro
  • Courses
  • Fullstack D3 Masterclass
  • Creating dimensions in React
  • Go To Previous Lesson
    Digging in
    Digging in

    We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data

  • Go To Next Lesson
    Drawing our canvas in React
    Drawing our canvas in React

    We create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create.