Improving How We Work with Data Visualizations: Refactoring, Tech Debt, and D3.js
Why we modularized our D3 visualizations into an independent package, how we balance reducing tech debt and product building in our core teams, and the importance of being empowered to make our own decisions at Mentimeter.
About the author: Sofie Liljedahl is a Frontend Engineer in the Presentation Experience (PX) Team.
Visualization has been at the core of Mentimeter as a product from the very beginning. The product is an Audience Engagement Platform (AEP) that allows users to see input from their audience visualized in real-time. Because visualization has been a core component of the product from the very beginning, the collection visualizations with huge files of React and D3 code we had accrued over time now presented a problem of legacy code that needed refactoring in order to reduce our tech debt.
Why we separated D3 from React
The goal was to separate the D3 code from the React code since both want control of the DOM and it can be both confusing to work with and not as performant. Refactoring the visualizations into one D3 package makes the code easier to work with because you can work solely with D3 without having to mix in React. It also improves “googleability” and means that someone working with the code who isn’t super familiar with D3 can just work through the problem in D3 without the complicating factor of React.
As a result of the refactoring project, we were able to go from having a collection of giant files that were a mixture of D3 and React into a more manageable and stable package. The refactored package is easier for people to work with, having a better structure that is more stable and more reliable to test.
Tackling tech debt on the side
Being in a core product team like Presentation Experience (PX) is always interesting because we get to tackle a variety of tasks. We can decide as a team to tackle these kinds of refactoring projects that pay off some tech debt and make life easier for people working on the code in the future.
But we get to balance this with feature building, optimizing the product, and generally doing work that has an immediate impact on the user experience. Striking that balance is both a good challenge in terms of prioritization and a continuous learning experience.
An exercise in self-leadership
The D3 refactoring project was an important task to get done since the developer who had written much of the code in those early years of the product was relocating back to the US. Being aware that he soon wouldn’t be around to help others navigate these large and complex files, he took it upon himself to refactor them into one manageable visualizations package.
I was able to join the project when I rejoined Mentimeter after finishing my studies, and it was a really interesting - as well as important - project to be a part of that helped me to learn a lot. Not just in terms of refactoring, D3, and the kind of more high-level decision-making that goes into building a product like Mentimeter. But it was also reassuring to be working with people like Taylor who not only help to build a great product but also work to make the future work of others easier by managing the code and reducing tech debt when we need to.
