Welcome to the How to create reusable charts with React and D3 Part3, this would be the final part of our series. We will first focus on adding the Donut Chart, then Stacked Bar Chart. Afterwards we will make the range filter (date range) to reload data. This last part should be simple and easier to follow along.

In this How to create reusable charts with React and D3 Part2 we will create Area and Line charts using multiple reusable React Components. We will use the knowledge we gained from our previous article here.

In this series we will continue working on our D3 components that we have created in our past lesson and make them fully reusable, extensible and maintainable. This How to create reusable charts with React and D3 Part1 would cover the basics and then we will dive into more complex scenarios.

React has been the choice for many developers in last year and will continue to grow in coming years. The main reason I liked React would be the portability of using it along with other frameworks specially in existing project. Other then the performance improvement from virtual dom, React also excels in reusability and integration. In this How to integrate React and D3 – The right way tutorial we will take a look at integrating React with another very popular javascript component (d3.js), which is heavily used in visualization.

Setting up React JS Development can be sometimes confusing and time consuming. In this Setup React JS Development Environment for ES5 and ES6 tutorial we will go though some easier way of setting up the env. We have separate setup instructions for ES5 and ES5. The objective of this tutorial is to have you up and running with React JS in no time. We will use browser based JAXTransformer for ES5 and WebPack for ES6.