Swizec Teller - a geek with a hatswizec.com

    How to drive React state with D3 transitions for complex animation

    Here's part 2 of Kiran B's challenge from last week πŸ‘‰ animating our drilldown piechart.

    You can watch the whole stream or keep reading. This was fun to figure out. I'm loving the flexibility of this hybrid approach to animation.

    Yelling at my computer when it got too slow to run CodeSandbox was A+ πŸ‘Œ

    Click through for source
    Click through for source

    And if you prefer to jump straight into messing around with code, here's the CodeSandbox

    Click through for source
    Click through for source

    Wtf is hybrid animation?

    Hybrid animation is a merger of two approaches to animation I teach in React for Data Visualization. Also a brand new chapter I just added ✌️

    1. Change state 60 times per second, trigger re-renders, components look animated
    2. Give control to D3, use a transition, move back to React

    Both those approaches work great.

    You get heaps of control with the state-based approach, it's fast, the animations look sick, and you spend a lot of brain cycles thinking about details.

    Transitions are easier, look great, and you mess with the DOM just a little. React doesn't like that but will tolerate your shenanigans if you're nice about it.

    But transitions fail when you have complex scenarios with animations spanning multiple components.

    sad_trombone giphy

    And that's where hybrid animation comes in πŸ‘‰ ease of transitions, full render control.

    Cleaning up our piechart

    We're working off of the drilldown piechart from last week. So we've got the basics

    1. Hierarchical data where each slice has multiple children
    2. <Arc> component that renders individual slices
    3. <DrilldownPie> that uses a d3.pie() generator and renders slices in a loop

    We cleaned up state management and added the drill-up feature.

    Click through for source
    Click through for source

    useDrillableData is a custom hook that takes our data and sets up a reducer so we can tie different state changes together.

    When you drilldown we

    • change renderData to the children array; this creates the drilldown effect
    • add current data to the stack; this will help us know how to drill back up
    • update startAngle so pie animations look connected to what you clicked

    When you drilldown we

    • pop the previous data from the stack and update renderData
    • drop the last element in our stack
    • keep the same startAngle

    If you're at the highest level already, we do nothing.

    To use this new state management mechanism we replaced the previous useState code with useDrillableData and called dispatch on click events instead of setState.

    Click through for source
    Click through for source

    Now <DrilldownPie> can go in both directions. That was a problem before πŸ˜…

    Adding hybrid animation

    Hybrid animation is all about leveraging both React and D3 for what they do best: React manages rendering and events, D3 calculates the tricky stuff for smooth animations.

    Here's the recipe:

    • trigger a React effect
    • start a D3 transition
    • create a custom tween
    • use the tween to drive state

    Click through for source
    Click through for source

    useEffect runs its method when renderData changes. That's every time you drilldown or drillup.

    The effect runs a D3 transition on an empty selection. Sets duration to 3 seconds, an easing function to look pretty, and fires off a custom tween.

    Click through for source
    Click through for source

    Tweens are meant to manipulate DOM attributes, but when you think about it, they're just functions that run on every step of the transition. They can do whatever you want to do on every keyframe. πŸ€”

    We start with an interpolator from 0 to 100. Interpolators translate the time parameter, t, into a smooth transition from start to end. Easing functions manipulate that t parameter to create fun effects.

    Interpolator in hand, we return a parametrized function that updates state with setPercentVisible using the interpolator.

    percentVisible state

    Using that state change to animate our piechart looks like this:

    Click through for source
    Click through for source

    percentVisible and setPercentVisible come from a useState hook. Getter and setter :)

    D3 pie generators take a startAngle and endAngle config and fit the entire piechart between those angles. If we keep changing the endAngle to be closer and closer to a full circle based on percentVisible, we get an animation that looks like a piechart revealing itself.

    Neat 🀘

    Wat gives

    wat giphy

    The trick here is that React hooks are magic and the tree diffing algorithm is fast as hell.

    On each step of the transition, our tween changes state and triggers a re-render. When the piechart re-renders, it uses the updated angle.

    The updated angle creates a bigger piechart. The arc components adjust and make themselves fit inside.

    Crucially, React doesn't re-run the effect. Nothing that our effect relies on changed, so it keeps running uninterrupted.

    The result is a powerful new animation technique ✌️

    Cheers,

    ~Swizec

    Did you enjoy this article?

    Published on July 1st, 2019 in Front End, Technical

    Learned something new?
    Want to become an expert?

    Here's how it works πŸ‘‡

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters πŸ’Œ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. πŸ‘Œ"

    ~ Ashish Kumar

    Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own? Β Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax?Β Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️

    Created bySwizecwith ❀️