Zoom-in feature: d3 approach

[Konstiman]

I used the d3 library to animate the zoom-in and zoom-out functionality.

I tried it on Chrome and Firefox. The performance is better than the previous version and it also behaves more like the current Headstart.

I had to rewrite the Paper and Bubble components to class components.

For the components that are mounted during the animation run, it was necessary to store the previous zoom values.

It was also needed to somehow track whether the animation is running or not. That's why I added the animationLock property and a timer into the UIStore. Next time I'd do it differently though - probably similarly to the current Headstart, where the transitions increment and decrement some counter.

I already know about some bugs:

• There is a warning saying an unmounted component is updated. This can be probably solved by stopping the transition on componentWillUnmount() => solved
• When resizing the window, the papers jump out of the bubbles. I'll try to debug this. => solved
• Not exactly a bug, it's more like a difference to the current Headstart: when the zoom in is running, it's not possible to zoom out.

Some things could have been done better (e.g. the function updateZoomStateAnimated could be refactored into much smaller piece of code), but I think that can be done during the final implementation.