Data Visualization in JavaScript with React and D3.js

Explore how D3 binds data to the document object model to create custom visualizations with scales and SVG elements, and build basic charts in a hands-on observable workflow.

Learn data binding in D3 by binding data to circle elements, using enter to create 50 circles, setting x, y, radius, and blue fill for a simple chart.

Apply a linear scale in D3 to map data to pixel space by defining domain and range, then render a horizontal bar chart with the enter method and rectangles.

Build a bar chart of sunshine in U.S. cities using a declarative React and D3 approach, leveraging JSX and D3 scales to render SVG layers with month-by-month interactivity.

Set up a React project environment with Create React App, Node.js, and npm to build a bar chart with React and D3.js, featuring a month filter and axis labels.

Learn to set up a React D3 workflow by creating a Create React App project, installing D3 and React Select, and building a responsive bar chart with a functional component.

load sunshine.json data into the app, map and filter for July sunshine, sort to find the sunniest cities, and pass the top 20 to the bar chart for rendering.

Set up x and y scales with d3 to map data values to pixel ranges, using a linear scale for x and a scaleBand for y in a bar chart.

Map data to jsx to render a bar chart of sunshine by city, using React for bars and D3 scales, add labels, grid lines, and a unique key per city.

Add interactivity to the sunshine by city chart with the React select library and useState to select month. Bind month.value to data and update the bar chart with scale functions.

Evaluate the declarative approach to a bar chart with React and D3, highlighting how scales map data to pixels, readability, hook integration, and the pros and cons.

Explore a hybrid React and D3 approach to data visualization by building an animated scatter plot that uses random data and transitions for size, x and y position, and color.

Build an interactive React and D3 chart with a hybrid approach. Use a get data utility for randomized data and a refresh data button on a responsive svg.

Learn how a useEffect hook in a React and D3.js setup styles and positions svg circles after render to create a dynamic scatterplot, with scales and data binding.

Apply data-driven styling, including a radius scale and color by data, with d3 transitions to a React scatter plot that updates via a button.

Adopt a hybrid React and D3 approach to build interactive data visualizations, with React handling state and structure and D3 delivering transitions and styling.

Build a Gapminder chart with React and D3, encoding GDP per capita, life expectancy, and continent using size, color, and axes, with a year slider and filterable legend.

Clone the Gapminder initial branch from the course GitHub to load the starter React and D3.js app, then explore the app, circles, and draw chart code with preloaded data.

Learn to build a Gapminder chart by creating four D3 scales (color, x, y, radius) and rendering data with React useEffect. Map continents to colors and use extent for domains.

Render and style a D3 chart in React by updating circles using x, y, and radius scales, color by continent, and size by population, showcasing four encoding channels.

Build x and y axes for Gapminder chart using D3 axis left and axis bottom, adjust ticks and margins, and add labels for GDP per capita, life expectancy, and year.

Show two mean-based lines across the chart by computing year-specific averages with d3 mean, plotting life expectancy and GDP per capita as crosshair overlays for 1957.

Add a year slider to the Gapminder chart using React and D3. It filters data by year, animates transitions, and uses five-year steps from 1957 to 2007.

Build an interactive legend for a React and D3.js scatter plot to filter continents, color points by a dynamic color scale, and highlight selections for clear data exploration.

Deploy your React projects to static hosting by building a build folder with a minified JavaScript bundle, then publish using GitHub Pages and React JS Pages.

Learn how React and D3 can be combined to create responsive visualizations, with options for React-driven visuals or D3 custom animation and transitions, and experiment on various projects.