Create A Bar Chart with React and D3

D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.
D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.
When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.
In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

• Introduction to Create a Bar Chart with React and D3
• Draw an SVG for a Data Visualization in React
• Set an SVG Element's Width Based on a D3 Linear Scale in React
• Layout SVG Elements on a Y Axis with a D3 Band Scale in React
• Create Scaled Accessor Functions from D3 Scales
• Render an X Axis for a Bar Chart with D3 and React
• Render a Y Axis for a Bar Chart with D3 and React
• Clarify Data in D3 with Additional Labels and Rounded Domain Values
• Create a Color Scale with D3's scaleOrdinal