thepath

Using Vue to Build an Interactive Financial Calculator - RealPlanCalc.com

2021-12-03T09:00:00+00:00

Roughly a year ago I put together an interactive financial calculator using Vue, Plotly, and Bulma. The “The Real Plan Calculator” was built to visualize money and savings over time. The tool allows you to plan for different scenarios and change both present and future assumptions about your financial situation.

I started the calculator with a rough idea of what I wanted to create. I’ve never been into making budgets, but I’ve made quite a few projections. As a result, I had a number of different excel spreadsheets to lean on for inspiration. The general idea was to create forward looking scenarios that I could adjust to get an idea of how my financial future might look over the next couple of years.

Why

When I built the tool I specifically thinking about side hustles and how to estimate the amount of time you have before your savings run dry. The savings buffer I feel comfortable with is a minimum of 20 months and an ideal of 36 months. In other words, I’d want to have at least 20 months of savings to quit my job and pursue a side hustle. You might want more or less depending on your risk tolerance and comfort level.

How it’s built

I built the calculator using Vue 3 and Plotly.js for the charting. I used the Vue CLI and did my best to organize the components, but it was really a project to help me learn Vue. I use Render for hosting and it’s free because it’s a static site. Render connects to the GitHub repo and builds a new version of the site any time I push a change. Frankly, deploying the site was really pretty simple.

Note: This site is also hosted on Render and changes are auto-deployed with GitHub commits.

The logic to do the calculations is built into the various Vue components. I generally prefer to do calculations in Python, but the tool is interactive so it made sense to do them in JavaScript. User input is included in calculations and bound to the charts to make the tool interactive.

A note about Bulma

I’ve used Bulma on a number of different projects and like it. That being said, I’ve recently moved back to Bootstrap for most of my new projects. I’ve noticed that with Bootstrap I have a little less HTML and CSS to get the desired outcome and it’s easier to find solutions when I have problems. I’m not a full time web developer and prefer tools that have more users because that makes it easier to find solutions to problems (that inevitably occur).

Links to tools

Vue 3
Plotly.js - Also see this post on charting libraries
Bulma
Render

Check it out:

RealPlanCalc - When Plan B is Really Plan A

Comparing Common Javascript Charting Libraries - Plotly.js, Chart.js, Highcharts, amCharts, c3.js, and D3

2021-12-02T07:24:00+00:00

I’ve used quite a few different JavaScript charting libraries over the past few years. My high level take is that most of the libraries do about 95% of what you want and there is no holy grail. That said, I haven’t taken the time to learn D3 in depth (yet). I suspect I could accomplish 100% of what I need in D3, albeit with more work.

This article will give you some background on how I’ve used the different libraries, what I like, what I don’t, and why I think learning D3 could be valuable.

Plotly.js

Python was my first real programming language and Plotly for Python was the first charting library I really learned. Plotly felt a little complicated at first, but I took one of the Jose Portilla Udemy courses on it that helped immensely. I recommend that course if you’re new to charting in Python and feeling lost.

There is now a lighter version of Plotly called Plotly Express that makes the library even more accessible. Plotly Express is my first choice when I’m working in a Jupyter Notebook and want some quick visuals.

Over time I started to do more front end work with vanilla JavaScript and Vue and needed a JavaScript charting library. The first library I picked up was Plotly.js because I was already familiar with Plotly for Python. The transition to JavaScript requires a little rethinking because you don’t have Pandas, but, overall, the transition to JavaScript felt fairly natural.

The main downside to Plotly is that it uses React for interactivity and it feels heavy to load on sites. I used Plotly.js on my RealPlanCalc project and I attribute much of the slow initial load to Plotly.

The nice thing about plotly is that it has every chart type that I’ve wanted to use. It’s built on top of D3 and provides a lot of flexibility in customizing charts. I’ve had situations where I run into things that are difficult to format, but you can generally find an answer even if it takes a while.

Chart.js

Of all the charting libraries in this post, Chart.js is one of two (amCharts is the other) that uses HTML Canvas to render charts (the others are SVG and D3 based). I’ve used Chart.js in a couple of Django projects recently and have mixed feelings about it.

The main thing I like about Chart.js is the package size and load time. It’s light, fast, and looks relatively good with default settings.

The main thing I dislike about Chart.js is that it seems more difficult to format charts and not all chart types are available.

Coming from a heavier Python background, Chart.js feels more JavaScript like and seems less intuitive/more frustrating. Additionally, things like Pan and Zoom aren’t native to the library and the plugins take some work to configure correctly.

Highcharts

Highcharts is another library that uses SVG and uses D3 under the hood. I plugged Highcharts into one of my local Django projects to try it out and thought it was okay. The documentation is thorough, but I still ran into some issues getting things to work as desired.

Overall, Highcharts worked fine, but as a solo-dev I didn’t “wowed” enough to pay the price for a production project.

amCharts

I was pleasantly surprised when I tried amCharts. I found it easy to use, the documentation was good, and I think it rivals Plotly in intuitiveness. It does have a price tag for commercial use without a logo, but it’s a library that I’d definitely consider paying to use depending on my use case.

Note that you can also use a free version of amChart to try it out. It simply contains a small logo on the charts. Buying the premium version removes the logo.

c3.js

Last on the list is c3.js. I haven’t used c3 in any projects (yet), but it’s next on my list to try. It looks like a relatively simple, D3 based charting library with most of the typical charts. One nice thing about c3 is that it seem like it should be easier to bring in D3 for greater flexibility and customization. Even though I haven’t used c3 yet, it looks promising.

And of course there’s d3

I’ve taken a look at d3 a few times and recognize that’s quite a bit different than higher level charting libraries. d3 is more of a low level utility language for manipulative svg, but it does provide a ton of flexibility. I think there could be value in learning d3, but it’s really use case driven.

The two main reasons I see to learn d3 are greater customization (for more artistic visuals) or missing chart types. I originally looked at learning d3 to build a custom Gantt chart because I couldn’t find an open source solution that I liked. Upon further research, I realized that amCharts has a Gantt chart.

I’ve considered learning d3 for greater flexibility to create more artistic visualizations, but I haven’t been able to make much progress. At the end of the day, I’m usually trying to solve a problem that can be solved with an existing chart type.

Summary

It seems like most of the JavaScript charting libraries (especially the free ones) do 90-95% of what you need, but you’ll run into some chart type that’s missing. I like Plotly for Python, but Plotly.js feels a little heavy on load. c3.js looks like a promising option for a free library and I’m a big fan of amCharts for a paid solution.

Head Down Building

2021-11-16T09:14:00+00:00

Over the past few months I’ve been working on two projects. One is a trading related web app and the other is focused on systematic investing. I’ve been getting up at 3 a.m. or earlier (without an alarm) and building. My goal is to develop a bootstrapped SAAS that genuinely solves problems in the world.

It’s been a focused period of head down building where I built so hard that I started to develop some health issues from too much screen time. I took a step back for a week and knew I had to keep going until I shipped. Earlier this week I shipped PortfolioLoft, which is a tool for backtesting systematic investing strategies including Buy and Hold, Target Volatility, and Protective Asset Allocation.

While PortfolioLoft “launched,” it’s still in an early validation stage. At this point I’ve invited some friends to try out the tool, provide feedback, and give me insight into what can be improved. Note that my friends are all in the Trading/Investing space so I’m able to get more informed feedback.

How to decide between two SAAS ideas

I’d like to say that building and shipping PortfolioLoft was easy and focused. It was not. I was engaged in an inner struggle between that and the other, trading related project. In the end I decided to ship PortfolioLoft first because it just felt right. That “feels right” thing is something that’s hard to quantify.

When I was earlier in the building phase for the two projects I was consumed by which project to choose. I asked friends and searched the hell out of Google looking for an answer. In the end I worked on both until one took the lead. There is a lot of well intentioned advice about how to choose a bootstrapped SAAS project. My take is that the project chooses itself, but it makes itself clear through action, reflection, and awareness. Thinking and reasoning to find a solution doesn’t work for me. Action does.

The paradox of completion is that it frees you up to complete additional projects. Just because something is done doesn’t mean you’re married to it. I personally have a much easier time building and shipping than promoting after a product is complete. In any case, I prefer to focus on completing and deploying an initial product.

And then

Somewhere in my travels I read that the best time for an author to start writing a book is the day the last one is finished. With that idea in mind I’m starting to work on the trading SAAS with the goal of launching by the end of the year. I know it might be better (whatever the hell that means) to stay focused on the Investing SAAS, but I’m taking the build, ship, and see what feels right approach.

Naturally, the desire to keep building led me to think about the 12 startups in 12 months challenge. For those of you who aren’t familiar, the idea is that you build and ship 12 MVP’s in a 12 month period. Some people go all in, quit their jobs, cut their expenses, and focus on building. Ahhh, to be young and free again.

I’d love to drop everything and build, but I know it would increase my stress level to the point that I wouldn’t be productive. As a result, I’m going to take the 40 year old, have kids, have obligations, and don’t like ramen approach to the challenge. I’ll talk more about that next time.

The Theory Behind ThePath

2021-08-24T19:43:24+00:00

I’ve traded a large number of markets, products, and strategies over the years. I view trading as art. There’s art in developing a strategy, implementing it, refining it, and abandoning it.

Some methodologies work over time with refinement and others fail. No strategy works well all of the time and most strategies require ongoing care and feeding to adapt with structural changes in the markets. However, there are principles of trading that remain universally true over time and good trades are build on those principles.

Expected Outcome

At the end of the day, all trading comes down to expected outcome. There’s no reason to trade without a positive expected outcome. Additionally, the expected outcome per trade needs to be large enough to make the trade worth taking. I’ve personally tested and ignored many strategies that have two tick wins with beautiful equity curves because there just isn’t enough substance to the outcome.

Given some positive expected outcome, what matters next is how we feel about the trade. I’ve traded systems with high win rates and other systems with low win rates. What I’ve found is that there’s generally a tradeoff in win rate and win size relative to loss size and the potential heat you take on a trade. I personally prefer less heat and many small losses to fewer losses and more heat.

Cultivating a higher win size to loss size is my preferred approach to trading. The reason for that is that I’ve seen it work much better than when I attempt to win more for smaller amounts. Over the past 15 years or so I’ve had a few trades that have returned hundreds of percent. Those trades had very little intervention from me as an operator and paid for many, many small losses.

Building a Book of Strategies

Given the characteristics of the trades I want to use, I like to approach markets with an evolving book of trading strategies. Book is just a fancy way of saying “multiple strategies.” Strategies should come into the book and strategies should leave the book. Good strategies should receive larger allocations and poor strategies should receive less.

Strategies in the book should be easily comparable with common metrics. Strategies in development or consideration should also be comparable with common metrics. It’s easy to create a backtest with an upward sloping equity line, but it’s more important to quantify the characteristics of the line and strategy. How we experience the curve matters much more than the curve itself.

I’m starting the path with the following goals:

Build a book of systematic, fully automated trading strategies.
Deploy capital to the strategies.
Create a framework for comparing live trading results and backtest results.
Create a review process to objectively assess the success or struggle of individual strategies.
Constantly learn, improve, and build.

To accomplish the objectives behind ThePath we could either use off the shelf software solutions or build our own. Ultimately, I want to build my own (primarily in Python with Javascript and Vue for web stuff), but I’ll also use some off the shelf software for testing.

ThePath is about documenting the process of building machines that make money. One of the misconceptions about building machines that make money is that they’ll be self sufficient and allow us to hang out on a beach somewhere without working. That belief is entirely FALSE. Yes, the machine will perform the tasks that it’s better at performing, mainly monitoring strategies and trading. However, it’s up to us to build the machine and keep it running.

Awareness

Understanding what’s working, what isn’t working, and when to adjust are essential aspects of building a machine to make money. We can also describe those things as having awareness. It isn’t enough just to trade. We need awareness of our trading and ourselves.

One of the best ways to increase awareness is to meticulously track our activity, reflect, and learn from it. There are quite a few ways to accomplish tracking, but I’m interested in building and documenting the process of building a tracking system.

Note that I’m glossing over self-awareness and the importance of that in trading. For now, just recognize that self-awareness is deeply ingrained in the process and something that can’t be overlooked.

Onward . . .

thepath

Using Vue to Build an Interactive Financial Calculator - RealPlanCalc.com

Why

How it’s built

A note about Bulma

Links to tools

Check it out:

RealPlanCalc - When Plan B is Really Plan A

Get notified when new posts are published

Comparing Common Javascript Charting Libraries - Plotly.js, Chart.js, Highcharts, amCharts, c3.js, and D3

Plotly.js

Chart.js

Highcharts

amCharts

c3.js

And of course there’s d3

Summary

Get notified when new posts are published

Head Down Building

How to decide between two SAAS ideas

And then

Get notified when new posts are published

The Theory Behind ThePath

Expected Outcome

Building a Book of Strategies

I’m starting the path with the following goals:

Awareness

Get notified when new posts are published