AoC 2020 Day 3 — Line animation using visx and react-motion
This is part of a series we did on the Advent of Code 2020 problems. You can see a list of all the problems we wrote about here.
If you are a fan of AoC, and had fun working on these problems, it is likely that you would be a good fit with our team. Our engineering team had a blast with it, as we like to be challenged with hard problems. If you like what you see, we are constantly looking for great talent, please consider joining us!
The task for day 3 involved counting the number of trees encountered by toboggans on their way down a hill. It was relatively simple, so along with solving it, I decided to animate the path of our toboggans. visx is the chosen way to display the data, which is an awesome chart building library for React based on D3.js.
Solving the task
First things first we need to split the data, and find the points necessary for the route of our toboggans. This function was built in mind to be able to take an array of moves, and return an array of points, so that we can use the same function to generate all paths from an array of moves.
For the sake of the task, we can return the matching tree count. But why stop there?!
Plotting the trees
We now need to generate co-ordinates for each of the trees, keeping in mind that the same pattern is repeated when the end is reached.
visx uses variables such as x and y scales to map a point in our data to a pixel location on an SVG. You can read more about it here, but it allows for easy generation of multiple components on the same graph, such as grids, axes and more. Here we are just going to create an SVG and a group to house both our trees and toboggans:
Which will give us some very basic looking trees:
(FYI, I halved my dataset to help with performance when rendering all these points and animating the lines)
Animating the lines
Now for the interesting bit.
We first need to plot them, and for this I used LinePath from visx:
But how do we animate a line which is actually a set of static points? Interpolating across both x and y values is difficult.
A clever trick for this is to use the SVG property of ‘stroke-dasharray’. You can read more about it here, but as an overview, we want to make the size of the dash equal to or greater than the size of the line, offset the dash so that we can’t see the line at first, then interpolate through the stroke-dashoffset values in order to make the line seem like it’s moving. This works under the hood as visx uses SVG paths to create the lines that we see. To interpolate through offset values, I chose to use ‘react-motion’, but another great part about visx is that it’s animation agnostic — use whatever library animation you like best!
So in the above example, the Motion component is going to go from the given default dash offset, and continuously pass new values to the line, giving us the impression that the line is moving. Cool stuff.
You can check this out on codepen!
While this was useful to learn about how to animate a visx line, the end product isn’t doesn’t tell us much. However, at nPlan, we are making meaningful representations of data all the time. If you are interested, maybe you’d consider joining? And if you enjoyed the AoC challenges, we have also written about other entries in the series.
