Wednesday, January 16, 2013

Preparing for Frugal February

As a Senior in college, I have been increasingly interested in personal finance in the past couple months. Especially so because I know I have (or hopefully, had) a spending problem. Not having to pay rent or insurance out of my own pocket as a student, seeing a lump sum in my checking account from my summer internship or part-time work during school would always get me thinking about what wonderful things I could buy with it. Regardless of whether I have $30 or $1000 in my checking, I would find a way to decimate it before the month was over. Facebook and Google knew this problem and taunted me with online shopping ads everywhere.

I read about Frugal February on Reddit, and decided to do it. This was in December. It was perfect: I would use December and January to prepare myself for this personal challenge and discover how much I could be saving if only I were more aware of my spendings.

Since there are exactly 28 days in February this year, it is perfect to split it into 4 weeks. Each week gets its own Frugal February Checklist I made:

But of course, one can't just jump into Frugal February without having planned for it. It would be like going from eating 5000 calories each day to starving for an ill-planned diet. Which would result in general unhappiness and a yoyo back to 5000 calories afterwards.

So here is a list of things I did in preparation for Frugal February in the past month and a half. Most knowledge came from /r/frual and /r/personalfinance. After watching a few lectures on Coursera for personal finance and for this 1-unit class called Financial Literacy at Stanford, I realized that the personal finance I learned from poking around Reddit was much richer and more helpful.

Get a hold of my spending habits

So everything I read on personal finance told me I should start out by finding out how and how much I'm spending money before I could make a realistic budget for myself.

At first I started writing stuff in a journal, by hand. But for some reason that didn't work. I would forget about something, or leave something out, and would be too lazy to find out when or how much. So, against the voice in the back of my head telling me Excel is not badass (probably planted there by friends from Addepar whose goal is to eliminate inefficient Excel use in the financial sector), I made an Excel spreadsheet:

And it wasn't so bad after all! I have a difficult time keeping track of receipts, and I rarely use cash, so I would just log on to online banking, check the recent transactions, and organize them in my spreadsheet every now and then.

On December 25th, I faced the moment of truth, and it was pretty awful:

Why the hell did I spend $562.42 on shopping and gifts? $123.13 on entertainment? And, why, even though I could have eaten at home, where I'm currently living with my mom and sister who are visiting from Korea for a year, I spent $416.67 eating out?

I was living like a King when I was just a student with no savings and a monstrous tuition debt I would need to pay off. Good to know!

Split accounts

The first thing that I was advised to do (by Reddit) was split my accounts. This would accomplish two goals:

1. Manage my cash flow more transparently
2. Put money away where it's not just a click away

I used to only use a checking and a savings account with the Stanford Federal Credit Union, but transferring money between the two was so easy and instantaneous that I would never accrue any money in the savings account. (Or the checking account, for that matter)

I went with Reddit and Mint's suggestion and opened up several savings accounts with Ally Bank, where there is no minimum deposit, no fee, and a 0.95%. I also set up a checking account where I plan to deposit a certain amount every month and make it so that all my bills are paid from there. Appropriate nicknames were given:

Er.. the 100K House was sort of spur of the moment and I might make it something else, however; if I had 100K I would rather invest it than have it sit in a savings account.

Set up direct deposit

The next step would be to set up direct deposit so that I wouldn't be tempted to keep more money in my spending account. I figured that if I cut back on gifting, shopping, and eating out, I could live within $400 per month. Bill pay would get a separate $100 per month for phone bills, Dropbox, and Netflix. I get paid biweekly, so this is the direct deposit form I ended up submitting:

Anything over the $500 I allocated for myself would be deposited in a savings account with Ally, after which I would distribute over the different saving goals depending on the amount of money deposited.

Write and share

The best thing to keep myself motivated was to write about it, and share my plans with friends. I found myself a forum where people share their budgets. It's a Korean website, so most of you won't be able to share, but for those who can read and write Korean, it is 대학생 재테크 카페. That, and I convinced several of my friends to join in on Frugal February!

There are still two full weeks left before February 2013, so it's not too late to start planning. Take this badge and link it to keep up with Frugal February updates!

Tuesday, January 15, 2013

D3GL Tutorials 03: Intro to data primitives with Points

Data primitives for D3GL are the visual equivalents to the raw data. So far, we have covered (1) creating a globe, (2) binding the globe to some data to set globe-specific properties, and then (3) binding primitives to data. But all this has been setting grounds for showcasing the data through the primitive it has been bound to by letting the data dictate specific properties of the primitives.

In D3GL globe, there are five data primitives:
Points, Shapes, Bars, Arcs,
. We will take
as an intro to primitives.

Customizing primitives for data

Just as each globe was an instance of a globe template which was tied to each data element, each point, shape, arc, etc. is an instance of a template. Just like with the globe template, you will either pass in fixed values that are shared across all instances or functions that will return customized values depending on the data element it takes as argument.

Let's take
as an example. First you would create a template that binds to data, as the following:
var points = globe.points()
  .data(function(k) {
    return datasets[k];
As we discussed in the previous tutorial, the argument
is bound on the globe level (i.e. per globe) and in this case is being used as the key to fetch a dataset, which is then bound to the primitive

We want to customize each point instance so that it represents each data element:
var points = globe.points()
  .data(function(k) {
    return datasets[k];
  .radius(function(d) {
    return scaleRadius(d['precipitation']);
  .color(function(d) {
    return scaleColor(d['precipitation']);
  .latitude(function(d) {
    return d['latitude'];
  .longitude(function(d) {
    return d['longitude'];
The parameter
used in the setter functions represents a data element in the dataset bound to
. In the above code snippet, the radius and color of each point is determined by the value of
. The scaling functions
take the precipitation value and spit out an appropriately scaled radius in units of degrees, and color in "#" format. D3.js provides a convenient
that is pretty useful for all types of scaling, including color gradients.


This demo marks the landings on Mars with
, using the color and size of each point to represent how recent the landing was: Landings on Mars


As discussed in the previous tutorial, a data primitive for D3GL Globe is another closure within the
has a rendering function, but unlike with the globe, this function is not invoked by the client. Instead, when
are added to the globe, the rendering function for
is pushed to the array of rendering functions that are called per frame by

In the rendering loop invoked with
a hidden canvas element that is programmatically created is passed in to the rendering functions for primitives, along with the datum the globe instance is bound to, and the WebGL environment:
// In rendering loop - called once per frame
for(var i = 0; i < primitiveRenderingFunctions.length; i++){
    webGLEnvironment, contextForHiddenCanvas, datumForGlobeInstance
Of course, it's JavaScript, not Objective-C, so the variable names are not actually this long.

In the rendering loop for
the datum pass in is used to fetch the dataset. Then for each element in the dataset, a circle is drawn using
on the context that is passed in:
function points(gl, context, datum) {
  var dataset = fnData(datum);
  for (var i = 0; i < dataset.length; i++) {
    var elem = dataset[i];
    // client-defined functions are used to fetch properties of each point
    var lat = fnLat(elem);
    var lon = fnLon(elem);
    // ... and so on
    drawCircle(context, plat, plon, pradius, color, strokeColor, lineWidth);
After all rendering functions in queue are called and the overlay texture on the hidden canvas is complete, the entire scene is rendered via

The other primitives roughly use the same format, but there are differences. So stay tuned!

← Prev