Name: Ways of Integrating React.js and D3
Parent: HomeDate Published: 11/11/2014
Purpose: Recently i had to create Pie Charts to visualize some data in a React application. I picked D3
because you can create awesome data visualizations using just a few lines of code. However, i struggled with
integrating D3 into React since both like to take control of the DOM.
So here are two ways of making Pie/Donut Charts using D3 and react together. The first way is to render SVG
elements directly through React. The second way is to have React give up the control of the DOM to D3 to do
the job of rendering.
First way: Letting React take care of rendering
- Taking the React approach of splitting your app into components, i decided to breakup my Pie Chart into Chart,
DataSeries,Sectors and a Legend.
- First let's create a parent React component D3PieChart that renders all the necessary ingredients of
a Pie Chart, as mentioned above. The Proptypes are pretty much self explanatory. data is the only one
that is required, so i have included some sample fruit data.
We have nothing to render yet, so i am just displaying 'Nothing to show yet.' (Look at Result tab).
- The Chart Component just renders a svg element. Both width and height are required and we are passing
them in D3PieChart's render method. Nothing fancy yet but notice that the text has moved down as the svg
has claimed that space. Scroll down on the result page to see the text.
- Next up is the DataSeries component which basically calls the Sectors component on the given data and wraps that
inside a g element. The only new prop is color which is an array of hex values. It only has 5 colors since
there are only 5 items in the sample data.
Checkout D3 Ordinals to get dynamic colors and more flexibility. Also, notice that
this is the first time we are really using D3 through its Pie layout which helps us determine
the start and end angles of the arcs we need to draw the pie/donut chart. Running this will throw an error since
we haven't defined the Sector component. Let's do that next.
- Now comes the part where we actually render something. We render the path element and fill it with static
colors we have already defined. We place the data count values in the center of arcs and fill them white.
We also add the title of the chart. But the Chart still kind of looks boring.
Next, let's add some interactivity and show the percentage values.
- I decided to make the pie chart into a donut chart and display the percentage values inside the donut whenever
you hover over any of the sectors. I also change the opacity when you hover over an arc by changing the css
properties. Lastly, i added the onClick handler which just tells you which pie you clicked, but here you can do
whatever you want with the information.
Go ahead, try it by clicking the Result tab below.
- Finally, let's add a Legend Component to show more detail about the chart. The React D3Legend Component renders
the individual entries of the legend by calling the LegendElement component on each data entry. Finally, our
Chart looks complete. Look at the Result tab and enjoy.
Second way: Letting D3 do what it does best.
- First, let's create a React Wrapper component PieChart around our D3 Chart. Nothing interesting here.
- Next, we render a function createChart through react and it sits outside of React. We call this function
in the React's componentDidMount and shouldComponentUpdate methods and pass it the Dom and the props.
We render the Hello World text to see if it is rendering the function. See Result below:
- Now let's just create the d3 Pie Chart in the createChart function. In this single step i render
everything we need for the chart. It has the same functionality as the chart created in first approach.
Also, i add some cool animations using D3 transitions.
Look at the result tab and be sure to enjoy the smooth animations as you hover over the arcs.
- I do like the React approach of creating modules which render the svg elements, but i prefer the second
approach, especially, if you want to use all that D3 has to offer. A disadvantage of second approach is that we lose
the granular control of Dom by React and that Pie Chart is just a simple block to React which has no idea what
is happening in that block. In the first approach, React is in complete control of the DOM but it is not able to take
full advantage of what D3 has to offer, for example, the transitions that were implemented in the second approach.
Letting both React and D3 manipulate the DOM at the same time is out of question.
Let me know in comments what approach do you prefer? Or maybe you know of another way to use D3 and React in harmony.