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?
Step 1 code: http://bit.ly/2m059I3
Then James looks around online
to see if he can find a D3 example
Step 2 code: http://bit.ly/2nc1ebw
James looks at the D3 code,
and he sees these components:
While James works to move these D3 components
into his React app, he thinks about:
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...
Now that the visualization is broken up into components, this part is easy!
James now has an interactive D3 data visualization
in his React app, which:
James reflects on all his hard work,
thinking about the questions
he asked earlier
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?
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:
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!