React and D3


A Tale of Two DOMs

Follow along!

code: http://bit.ly/2mtSyAF

slides: http://bit.ly/2mcnNPu

This is James S. Developer

...and this is Bob, his client

James is making Bob his "flashy" site, using React...

(James <3 React!)

...and Bob wants James to add
a bar chart to show his sales

...and he wants it NOW!

James tells Bob he will get right on it!

He can use D3.js
to add the data visualization!

But, where to begin?

James is now a bit stressed...

How should he go about adding
a D3 data visualization
to his React app?

James has these questions:

  1. How would you integrate D3 into a React app?
  2. Don't they both manipulate the DOM?
    How can I make sure they don't step on each other?
  3. Where do I draw the line between what React handles
    and what D3 handles?
  4. What are the advantages of using these libraries together?

[STEP 1]: Review your current app

Let's look at the code!

Step 1 code: http://bit.ly/2m059I3

[STEP 2]: Get/Find a Standalone D3 Data Visualization

Then James looks around online
(of course!)
to see if he can find a D3 example

Let's look at the code!

Step 2 code: http://bit.ly/2nc1ebw

[STEP 3]: Divide the D3 code into components

James looks at the D3 code,
and he sees these components:

  • An X axis
  • A Y axis
  • The bar chart

While James works to move these D3 components
into his React app, he thinks about:

  • What should D3 handle, and what should React handle?
  • What type of data flow should my app have?
  • How should I break up the data visualization into components?
  • How should I encapsulate these components?

Let's look at the code!

Step 3 code: http://bit.ly/2mz77Cl

At this point, James now has a
working bar chart in his React app!
But, he's not done yet...

[STEP 4]: Make it interactive!

Now that the visualization is broken up into components, this part is easy!

  • Add a new external json file with monthly sales data
  • Get the year from the user, for the sales data that the user wants to see
  • React automatically updates the bars in the chart, given the entered year
  • And D3 recalculates the axes' scales when the sales data is updated

Let's look at the code!

Step 4 code: http://bit.ly/2mgU9aq

app: http://localhost:8081/

And done!

James now has an interactive D3 data visualization
in his React app, which:

  • allows a user to look at sales data for different years...
  • ...and uses the same data visualization components

James reflects on all his hard work,
thinking about the questions
he asked earlier

1. How would you integrate D3 into a React app?

  • Start by first reviewing your current React app
  • Then find an example standalone D3 data visualization
  • Create React components from the D3 code
  • Make the data visualization interactive,
    using the best parts of React and D3 together

2. Don't they both manipulate the DOM?
How can I make sure they don't step on each other?

Yes, they both manipulate the DOM.

When used together,
you should clearly separate who is doing what,
according to what each does best.

3. Where do I draw the line between what React handles and what D3 handles?

With most DOM manipulations,
you can let React handle it,
like when storing data and passing it to components.

But when it comes to
highly complex data viz calculations, leave that to D3.

4. What are the advantages of using both of these libraries together?

As James is working, he finds out what these are:

  • React is faster with DOM manipulation (using it's virtual DOM)
  • React is good at handling page/app state
  • D3 does a better job at the heavy calculations
    that are sometimes required for data visualizations,
    like calculating the scales for a bar chart
DOM ManipulationMathScalesLayoutsUtilitiesEtc.ComponentsServer RenderingReactd3 http://www.macwright.org/2016/10/11/d3-and-react.html

James shows Bob his app,
with the new
sales bar chart, and
Bob is excited!

Bob just has one question,

"Can we make another page with a pie chart??"

James politely excuses himself,
and decides that a vacation is long overdue!