Full-feature Integration

As useful as blackbox components are, we need something better if we want to leverage React’s rendering engine. We’re going to look at full-feature integration where React does the rendering and D3 calculates the props.

To do that, we’re going to follow a 3-part pattern:

• set up D3 objects as class properties
• update D3 objects when component updates
• output SVG in render()

It’s easiest to show you with an example.

Let’s build a rectangle that changes color based on prop values. We’ll render a few of them to make a color scale.

Yes, it looks like a trivial example, but color-as-information is an important concept in data visualization. We’re going to use it later to build a choropleth map of household income in the US.

I suggest following along here. It contains the final solution, so you can ...