Visualizing Your “Smart Withdrawal”
By Jeff Carey, Senior Software Engineer
Saving for retirement can be daunting, but when retirement finally arrives you still need to be careful about how to actually use your savings. Withdrawing from the right accounts at the right times can allow your nest egg to last years longer and leave a larger legacy for your heirs.
This is complicated by issues such as required minimum distributions or retiring at a different time than your spouse.
Our Smart Withdrawal feature creates a withdrawal schedule for you based on your financial situation and goals.
In building the feature we focused on how to convey that optimal withdrawal schedule for you. There’s a lot of information that needs to be presented concisely.
We tackled this by using two approaches:
- A chart that gives a high-level overview of your withdrawals by year, and
- A table that allows you to dive into the details of any given year in the future
We use the popular D3.js library for our web visualizations. We had to incorporate a lot of D3 features in the Smart Withdrawal chart:
- A stacked bar chart for the yearly withdrawals
- A line chart for the budgeting line
- Embedded icons to highlight important events
- Two different types of tooltips depending on whether you hover over a bar or an icon
It’s thanks to D3 that we are able to utilize so many different building blocks of a chart — something that wouldn’t be possible with a higher-level charting library.
Below the chart we include a table, using a data-grid component that we built in-house.
We decided on rolling our own grid component after a lot of careful evaluation. We tried out a number of available 3rd-party solutions and found in the end it was best to create something that directly met our needs, and to expand on it as needed.
Data grids are often among the most complicated UI components, as the number of use cases that a generic grid has to support can cause the complexity to spiral out of control.
For example, we needed expandable rows with custom layouts, depending on whether a row was collapsed or expanded.
The collapsed view for each year gives a summary of the key dollar amounts for that year, as well as the year’s beginning goals.
When you expand a row, you get the full picture of actions and expected results for that year, including a section breaking down your withdrawal sources through a donut chart (D3 again!):
I hope you’ve enjoyed this look behind the scenes of our latest feature — if you’re intrigued by what we’re doing and are interested in personal finance, check out our careers page!
