D3 & React — Part 3 | The Magic Alphabet

The following example was inspired by a YouTube video I came across by someone who had built a similar animation a few years ago when React was still super new. However, when I checked out the code on GitHub it was basically deprecated, as React and its lifecycle hooks have changed so much since then.

So… I decided to code it from scratch, which was fun but also frustrating at times. This example is definitely a bit more advanced than the previous pie/donut chart examples and actually leverages React-Transition, as well as D3 transitions. But, hopefully, its still helpful. If you’re new to React / D3, then still play around with this code a bit or save it for later.

Note: I wrote the code for this a few months ago and now that I’m looking back over it I think it’s actually a really shitty example for a tutorial because there is so much mixed code going on. I think there’s probably a way easier way to code this but I decided it would be worth sharing anyway.

I’m not going to dive into the code in this post (unless someone has specific questions), since (as mentioned above) I don’t think this code is really tutorial material.

One thing I should note though, in case this seems confusing, is that once you see that I’m combining both simultaneous transitions of each letter, and the whole string, and offsetting letters horizontally based on index it may become much clearer :).

Anyway, hope this is a fun example to play with and please don’t hesitate to shoot me any questions in the comments.