Page Info:
  Name: Ways of Integrating React.js and D3
  Parent: Home
  Date Published: 11/11/2014
  Prerequisites: You need to know a little bit about React and D3. Both are javascript libraries.
  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.
    


Conclusion:
  - 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.