Introduction to D3.js with React

Set up your development environment for d3.js with React, learn file structure to pair the libraries, write your first lines of three code, and bind shapes to a data array.

Set up the development environment with npm, React, and create-react-app, and use npm to manage libraries and D3.js for visualizations in this course.

Explore React fundamentals and project setup, including index.js, app components, props and state, functional and class components, setState, binding vs arrow functions, and npm start dev server.

Explore integrating D3 with React by examining common pitfalls, file structure, and four approaches: lifecycle wrapping, external wrappers, and pure React-D3 math, demonstrating a clean, separated architecture.

Set up and separate React and D3 code by cleaning old demos, creating a chart wrapper component and a D3 chart class, then connect them with refs and lifecycle methods.

Demonstrates how D3 uses SVG to render data-driven shapes on an SVG canvas, explaining the coordinate system and basics like circle, rectangle, ellipse, line, text, and path.

Install and import d3, then use select, selectAll, and append to create an svg canvas, set width and height, and draw a grey rectangle with x and y coordinates.

Learn to render bars in a React project with D3 data joins, selectAll, data, enter, and append, binding a data array to create bars with x and height from data.

Fetch external data with d3.json from a firebase url, load CSV, TSV, and JSON files, then map ages to bar heights and color by name or age.

Review the basics of d3 in react visualization, including template setup with create react app, rendering a chart wrapper, loading data with d3.json, and creating four rectangles with svg elements.

Build a dynamic bar chart using scales for heights and d3 axis generators for axes, then apply the d3 margin convention to fit the production-ready five tallest men on screen.

Set up a React and d3 project by cleaning starter files, installing d3 and bootstrap, loading data, and rendering a scalable bar chart with enter selections and rectangles.

Learn how to use d3 scales—linear for the y-axis and band for the x-axis—to map data values to pixel ranges with domain and range values in a responsive bar chart.

Refactor the D3 with React chart by extracting width and height as constants, using D3.max and D3.extent to set domains, and inverting y so bars grow from the bottom.

Explore D3 axis generators to quickly create x-axis and y-axis, adjust tick placement, and place axes with the selection call. Understand scales and the margin convention for multiple axes.

Explore the d3 margin convention by defining a margin object, translating a group into the canvas center, and placing axes on top, left, bottom, and right.

Fixes a reversed y-axis by reversing the y scale range, swapping y and height, and adjusting the domain to improve axis labeling and data interpretation.

Add x-axis and y-axis labels to a static bar chart by appending SVG text elements, adjusting positions with text-anchor and rotation for readability.

Build a production-ready bar chart using scales to map data to pixels, add margins for axes and labels, and apply axis generators for auto-generated axes in React.

Learn to build an interactive d3.js bar chart in React that updates every second using an interval, controlled by a dropdown, and uses the general update pattern with d3 transitions.

Explore how to use d3's interval to refresh a visualization and setInterval in JavaScript, switch between two data sources, and observe console logs every second with an update method.

Split the visualization into a one-time constructor and a recurring update method, enabling a D3 interval to refresh data-driven axes and rectangles each second.

Apply the D3 general update pattern to manage data-driven rectangles by using join, enter, update, and exit, and learn to select, bind data, and append or remove elements.

Learn to load two data sets in parallel with Promise.all in a React D3 visualization, switching between tallest men and tallest women by updating rectangles with a D3 interval.

Flick between two datasets of the tallest man and tallest woman using a flag and interval in a D3.js React visualization, with planned three transitions for smooth updates.

Learn to animate data visuals with D3 transitions in React, applying a five hundred milliseconds duration for enter, update, and exit selections, including axis transitions and fading effects.

Learn to build a gender dropdown in a React and Bootstrap setup to switch between two data sets and prepare wiring to a D3 chart in the next lecture.

Wire up a dropdown in app.js to drive a three-chart visualization by wiring an event handler that updates the component state and triggers chart updates.

Connect React and D3 to update a chart via a gender prop from a dropdown, switching between men and women data sets.

We've covered the key ideas of the three update pattern in D3.js, and the select/insert approach is becoming clearer with practice, as we prepare a new visualization.

Build a dynamic D3.js scatterplot controlled by React to add and delete data points, with a synchronized right-hand table and automatic rescaling.

Set up the final project environment by cloning a starter react and d3 setup from GitHub, renaming the folder to scatterplot, and previewing bootstrap grid and chart scaffolding.

Load in data from Firebase for a D3 and React project, share it across a scatterplot and a table, and set up state so updates refresh both visuals.

Learn to build a scatterplot in D3 with React by creating x and y linear scales using domain and range, mapping age and height to pixels, and validating data types.

Learn to add circles to a D3.js and React visualization using the general update pattern, binding data, and updating, entering, and exiting circles with scales.

Create axis groups, apply D3 axis generators for the x and y axes, translate the x axis to the bottom, and add labels for age and height in centimeters.

Extend the static scatterplot by building a React-driven table that renders a students data array, with Bootstrap grid and form controls to add new students (name, height, age).

Build dynamic table rows by mapping over the students array from props to render a four-column row (name, height, age, delete button) with a unique key and Bootstrap styling.

Add remove button event handlers to filter out clicked items from the data array and pass the updated data to the table and chart, triggering automatic updates.

Wire inputs as controlled elements by binding state values and updating with a generic handleChange using event.target.name, then update data array with spread operator on submit and reset inputs.

Connect React and D3 by syncing data updates between components, triggering D3 chart updates, and adding smooth axis and circle transitions for enter, update, and exit operations.

Add highlight functionality by clicking a circle to highlight the corresponding table row. Use an active name state passed to the table and updated via a d3 click event.

Add data validation for input fields and show warnings before updating data in production. Switch to a robust identifier, like a name-age-height combo or a dedicated id, and improve styling.

Tie a scatterplot to a table built with React, creating a complex specialization that shows visualizations responding to user input and smoothly updating the chart.

Conclude this course by applying D3 in a React environment, reading and adapting code, and exploring resources like the D3 API, Block Build a Dog, and D3GS through four projects.