Redux and React.js infographic chart

See the code on CodeSandbox

Redux and react make a perfect combination if you want to build large apps that have complex state driven rendering. When apps get larger the state management becomes complicated and that’s where redox comes in. The chart in this example was built with the d3. I first hand crafted an svg of a UK map in illustrator. Then marked and give ids to the regions which becomes your hot spots. After saving the svg in illustrator, I stripped out all the garbage code so that I was left with just the path data for the regions. That was the best part! The lesser interesting part was setting up the redox in this project. Its quite Mind dumbing and seems like awful lot of work wiring up the redox stuff. But once its setup and you proven it works, the state management becomes so easy. 
These are my takeaway points :

  • The initial setup of Redox is tricky and a long process. There are boiler plates that you can use, but you will need to be sure that they are a right fit for your project.
  • The understanding of immutable data is very important in redox. I mainly utilised the ES6 spread operator to maintain immutability.
  • When creating svgs in illustrator to use in your app, its always good idea to learn how to read svg tags so that you can strip down an svg file to its bare minimum.
  • I used the preserveAspectRatio=”xMidYMidmeet” to make the svgs responsive.Once you have mastered how to use the preserveAspectRatio attribute in svg tags, resizing and scaling becomes easy. It doesnt matter how complicated the chart, as long as its inside a svg tag, it will scale using
  • The use of the new css flex grid features such as using grid-area to define your layout is very powerful. Done correctly would allow precision layout for all your visuals.

Leave a Reply