Introduction to D3.js with React
Introduction to D3.js with React, available at $54.99, has an average rating of 3.95, with 52 lectures, based on 502 reviews, and has 2838 subscribers.
You will learn about Understand the fundamental building blocks of D3 Know how SVGs work, and how to manipulate them with D3 Set up a working file architecture for using React and D3 together Pass events between React components and D3 Build updating charts that react to user input This course is ideal for individuals who are React developers who want to get started with D3 as quickly as possible or Anyone who wants to know "enough D3 to be dangerous" It is particularly useful for React developers who want to get started with D3 as quickly as possible or Anyone who wants to know "enough D3 to be dangerous".
Enroll now: Introduction to D3.js with React
Summary
Title: Introduction to D3.js with React
Price: $54.99
Average Rating: 3.95
Number of Lectures: 52
Number of Published Lectures: 52
Number of Curriculum Items: 52
Number of Published Curriculum Objects: 52
Original Price: $119.99
Quality Status: approved
Status: Live
What You Will Learn
- Understand the fundamental building blocks of D3
- Know how SVGs work, and how to manipulate them with D3
- Set up a working file architecture for using React and D3 together
- Pass events between React components and D3
- Build updating charts that react to user input
Who Should Attend
- React developers who want to get started with D3 as quickly as possible
- Anyone who wants to know "enough D3 to be dangerous"
Target Audiences
- React developers who want to get started with D3 as quickly as possible
- Anyone who wants to know "enough D3 to be dangerous"
Welcome to Introduction to D3.js with React!
This course will help you to get up and running with D3.js in a React environment as quickly as possible. The course will teach you to program in the latest version of D3 – version 6.x.
Course Outline
The course is structured in a code-along format, gradually adding on to what you can do with the D3 library over the course of 5 sections.
Section 1:
-
Telling you why you should learn D3
-
Going over the structure of the course
-
Explaining course resources
Section 2:
-
Getting your environment setup
-
Creating a wrapper for using React and D3 together
-
Introducing SVGs
-
Taking your first steps in D3
Section 3:
-
Building a static bar chart with D3
-
How to add scales and axes to a chart
-
Introducing the D3 axis generators
-
Adding in the D3 margin convention
Section 4:
-
Building an updating bar chart with D3
-
Introduction to the D3 Interval method
-
Using the D3 transition suite
-
Understanding the D3 General Update Pattern
-
Updating the chart according to user input through React
Section 5:
-
Building a complete web app with React and D3
-
Building a scatterplot with D3
-
Handling events between React and D3
-
Practicing using the two libraries together
Should I Take This Course?
D3 is an incredibly powerful library to use, with a strong community of developers which is growing every day. The library famously doesn’t play well together with React, as they both want total control over the DOM. Take this course if you want to learn the right way to get these two libraries together, and get up and running as quickly as possible.
This course is not an introductory course to web development. Students are expected to have had experience coding in JavaScript, HTML, CSS, and React before enrolling in this course.
Course Curriculum
Chapter 1: Introduction
Lecture 1: Introduction to the course
Lecture 2: Why you should learn D3
Lecture 3: How this course is structured
Lecture 4: Course resources explained
Lecture 5: Course resources
Chapter 2: Getting started with D3
Lecture 1: Introduction
Lecture 2: Setting up our environment
Lecture 3: React recap
Lecture 4: Integrating React and D3
Lecture 5: Creating our React wrapper
Lecture 6: Update: Writing ChartWrapper with Hooks
Lecture 7: Introducing SVGs
Lecture 8: Getting to grips with SVGs
Lecture 9: Adding SVGs with D3
Lecture 10: Selections and data joins
Lecture 11: Working with external data
Lecture 12: Summary
Chapter 3: Building a static bar chart
Lecture 1: Introduction
Lecture 2: Setting up our project
Lecture 3: Writing our bars with scales
Lecture 4: Fixing our bar heights
Lecture 5: D3 axis generators
Lecture 6: The D3 margin convention
Lecture 7: Fixing our y-axis
Lecture 8: Adding labels to our chart
Lecture 9: Section summary
Chapter 4: Making our bar chart update
Lecture 1: Introduction
Lecture 2: Looping with intervals
Lecture 3: Adding updates to our visualization
Lecture 4: The D3 general update pattern
Lecture 5: Adding our other set of data
Lecture 6: Flicking between datasets
Lecture 7: Adding D3 transitions
Lecture 8: Adding our dropdown with React
Lecture 9: Tracking our dropdown in App.js
Lecture 10: Connecting React and D3
Lecture 11: Summary
Chapter 5: Creating a complete application
Lecture 1: Introduction
Lecture 2: Setting up our project
Lecture 3: Loading in our data
Lecture 4: Starting our scatterplot: adding scales
Lecture 5: Adding our circles
Lecture 6: Adding axes and labels
Lecture 7: Back to React – adding an input row
Lecture 8: Building rows for our table
Lecture 9: Removing fields from our table
Lecture 10: Adding fields to our table
Lecture 11: Connecting React and D3
Lecture 12: Adding highlight functionality
Lecture 13: Ideas for improving
Lecture 14: Section summary
Chapter 6: Wrapping up
Lecture 1: Concluding thoughts
Instructors
-
Adam Janes
Data Visualization Engineer
Rating Distribution
- 1 stars: 10 votes
- 2 stars: 15 votes
- 3 stars: 66 votes
- 4 stars: 168 votes
- 5 stars: 243 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Language Learning Courses to Learn in November 2024
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024