Temperature dial meter built with React.js and D3.js.

In this example I am rotating and animating the temperature needle. The animation is done via D3.js just after the needle container is mounted. D3.js has some hooks that can be utilised to indicate when the animation starts , ends and gets interrupted. These hooks are perfect if you want to change state within react so that it is in synch with D3 animation. For the colour scheme, I used the d3 function ‘d3.interpolateHsl’ to create the heat type colour scheme for the semi circle segments.
These are the take away points :

• Animating anything that is not in a straight line involves maths. In this case we are rotating a needle which involves trigonometry and circle related maths functions. You need to be comfortable getting your head around these maths functions and understand how they tie in with the dimensions of your your graphic that is being animated.
• Knowing how to use the animation hooks associated with D3.js will allow you to build more complex animations that have complex state dependency between components.
• Utilise ES6 features such as spread operators to maintain immutable data for state and use arrow functions sparingly to make code more readable and to maintain the ‘this’ context.
• Always use D3.js to calculate the values while letting react render the dom.