Tag Archives: visualization

Moneytime – Data Visualization Project Proposal

1. The topic you are interested in for your final.
Personal finances. I am still pursuing a way to approach the topic in a different way from the existing apps.
I want to make a Chrome extension that will convert any money value from any web page to time value. For example, while navigating through the Amazon website, users would see values such as “5 hours”, “3 months,” “15 minutes” etc.

2. How you will research (find data, check its source, further investigation).
We* are still discussing how exactly this conversion will work. Our first idea was to make a simple (total income)/(total hours of work) calculation. Though simple and straightforward, this equation might not make sense for everyone. People we have been talking to have mentioned a different value for working time and leisure time, for instance.
Anyway, the extension will certainly ask users for some information before making any conversion. It also needs to connect to an online service to check exchange rates — to convert values between different currencies.

3. What is the story you are trying to tell? THIS MUST BE ONE SENTENCE ONLY.
How people can see the money they spend through a non-monetary perspective.

4. What kind of visualization you want to make (bar, pie, tree, etc.)
The final result doesn’t fit in any of these visual categories. Instead, the intention is to display the converted value as html text, using the same styling as the original monetary value. That is important to keep the visual consistency of the page.
Also, I think that “visualization” should refer to any device that helps people understand better a set of information. That can be achieved by means other than “visuals.”
In the case of this project, translating money to time is a way of making people “see” their spendings in a more insightful manner. This translation doesn’t have the intention of making people spend less, save more money, plan for the future etc — the usual goals of regular finance apps. Instead, it proposes a critical view on the topic that might be interpreted differently according to each individual’s relationship with his/her own money and time.


Personal Finance App – Activity Part

Changing to javaScript took me a while to load the data. I ended up using node.js and a specific module to read csv/tsv files. An then I translated the same parsing I have written in Processing to javaScript.

A) I started to experiment with the visual representations for the activity/timeline part. These first sketches are just an attempt to check if the data parsing is working right. Also, I needed to find a way to map the bars position to the position of the day in a month — the first sketches were just drawing a sequence of days, no matter how far apart they were.
01 02 03 04

B) Though those experiments were useful in help me deal with the data, I felt like I was falling into the same technical-looking dataviz the I wanted to avoid. So I tried to change the direction completely. These sketches are trying to give the user an overview of the transactions, instead of a time x transaction representation:07 0809

The bubbles are definitely not useful to show precise comparisons. Also, they can’t represent changes through time. Even so, I felt like they worked for a macro view of the data — and general comparisons.
I used a box2d, a physics engine, to position the bubbles and make them move.

C) I went back to the timeline and tried to make it look better, too. My idea then was to make both visualizations in the same screen. The users could have a macro view of the data by looking at the bubbles. To see the detailed activity, he/she could expand the timeline and change the focus to it.1012

For that idea to work, I had to change the bubbles size when switching to the timeline view. This way, they become sort of buttons/legend to the timeline, instead of a visualization:14

However, the line graph is not that easy to see, particularly when compared to the bubbles solid colors. So I changed the timeline to draw an are graph — which was very time-consuming. On the line graph I could just map the transaction amount to the y coordinate. On the are chart, though, I had to sum up all transactions for each day:


I experimented with a dark background, too:17

So far, the interaction was:
– click/touch on bubbles select/deselect  it.
– click on timeline expands/collapse it


02 03

I uploaded the last sketch and got some people to test it. Some problems I could quickly fix:
– add a button to switch between the timeline and the bubble view. Clicking on the timeline to switch the views proved to be misleading. Most people clicked thinking they would get details about the transactions, not expand it.
– add the money values to the bubbles. Simple and absolutely necessary.
– clicking on a category/bubble deactivates all other. Though the possibility of comparing different categories was useful, the work to deactivate 30 of them before that was just too much.I think the the final result still needs a lot of improvement. I’m not sure if having the 2 views on the same screen was really useful. Also, the timeline comparisons should allow for a time-span navigation — see full activity, months or weeks, for instance. And each of them should show the aggregated data for that time span.

To sum up, I don’t think this is the final form of the app. The interaction part is still very simple and doesn’t take in account the full app navigation. Also, the visuals are far from the simplicity of the bubble part, and a lot harder to compare at the same time. Anyway, I think it was a useful experiment in trying to visualize this data.

Screen Shot 2014-03-31 at 4.57.10 PM

You can access the current version of the app here.
And download the code/check the other experiments here.

Personal Finance App – Budget Part

After successfully parsing the data in Processing, I decided to switch to javaScript. I thought it would be easier to connect with a server and output as a mobile app in the future.
So I started to make quick sketches of how the budget part should look like, using regular javaScript canvas.

As I’ve written before, I was interested in making this representation as simple as possible. So I avoided any scale or other technical look. Instead, I tried to make the motion give a clue of what the colors and shapes are about — overspent, money still left etc.

Personal Finance App – Data

First I thought about categorizing all my myself, by copying and pasting the activity from my Chase account to a Google Spreadsheet.
That turned to be a hard and slow process. So I got a Mint account to help me with that. Though some spendings were categorized wrong, it definitely saved me a lot of time. After that, I exported the results to a .tsv file.

I made some quick sketches in Processing just to get a sense of the data an possible problems I could have parsing it.
Screen Shot 2014-03-23 at 5.39.46 PM

Screen Shot 2014-03-31 at 1.56.00 PM

For the two sketches, each column is a day, and each rectangle a transaction. They are dimensioned according to the amount of money.
In the first sketch, each line represents a month. In the second one, all data is on the same visual level, and the vertical lines sign a month change.

Personal Finance App – Sketches

Information Architecture
I started out by sketching the app’s architecture. I wanted to have something as simple as Level for the main navigation. But also add some meaningful visual representation for the activity part.


So my goal after that was to work on those two basic parts in separate. First, I’d have the “budget” part, pretty much like in Level, but with different visuals. Second, I’d have the full activity — income and outcome —, focusing on comparisons.

I’ve started with very rough visuals for each part, then:
sketch_02 sketch_03

Personal Finance App – Research

I started by checking some relevant financial management tools. Most mobile apps for finance ask you for the painful task of inputing every little amount of money you spend. And they don’t give you much in return, besides visualising the data you categorised yourself. Two services seem to be a breakthrough from this concept.

a) Mint
A web-based tool, founded in 2006. Mint categorises your activity automatically. It also set up some budgets for each category, which you can adjust. Though it is claimed to be a tool to help make personal finance simple, it has a lot of features and visualisations that look too technical — considering the goal of this project.

b) Level
A recently launched mobile app, Level is claimed to be “Mint for millenials.” Level is based on a really simple equation: income – (bills + expected savings) Based on that, Level gives users a total “spendable” for a day. The concept is really interesting and the visual part follows the minimalist concept:
level_app_01 level_app_02

Users have the option to check their activities too. This part is disappointing, because Level doesn’t care about categories at all. However, the idea of having a simple, straightforward way to track your money is very good.

Personal Finance App – Midterm Proposal

A simple personal finance mobile app. The user should be able to see earnings and spendings.

Ideally the app should connect to the user bank API. For midterm, though, I will use a static file with my own bank history.

There won’t be any user interaction to categorize or input data. The idea is that it should be done automatically by the app — I might work on it in the next stage of the project.
The user interaction will be used for navigation only — detailing, zooming into categories, scrolling through history etc.

I want to make this app look as less as possible like a data visualization. Though dataviz has been claimed to be a tool to engage people with data, I think that the mainstream aesthetics in the field has done the exact opposite. Over-detailed, technical-looking and complex visualizations have made data less accessible to most people.
These are some sketches for a still very rough idea of what I have in mind.