Personal Data Visualization Web App

A3: Personal Data Visualization Web App


  • create your own visual encodings: with the current data structure or with your newly added database collection and data model, come up with intriguing and meaningful ways to visualize that data. You may use the existing structure of the “small multiples” which show each entry or change up that structure entirely. The key is that you make a GET request to your database and pull data dynamically.



I have been thinking a lot about shapes these past two weeks. Specifically how to use shapes to represent feelings. And about how I feel about tracking my feelings. At first I thought it was something I would really like to do, but it turns out I do not like to be that aware of the variations in my day, so I ended up postponing actually doing the tracking a lot. I know now that I do not want to make this my final project!

However all of the thinking on shapes was very beneficial. I find that edges attract me more than round shapes, and I have been trying to rehearse simplification (I tend to overcomplicate things).



I ended up deciding on a limited color scheme. Red for stress and anxiety, and Purple for how content I feel – the brighter the color, the better.

// anxiety drives transperancy of stress level
// stress drives a background level filling up the screen
// contentment drives drives color of vertex shape
// productivity drives amount of spikes on vertex shape
// fitness drives stroke / noStroke on the vertex shape

I find it interesting that I can have a day where I get a lot done => many spikes, but I do not feel content, the color is dark. With my visualization it is easy to see that it probably has to do with my stress leves (the red background takes up the screen).

Most of the entries are just demo entries though. But I think it is interesting that they do make me feel/think about my overall level of hard hard I push myself.


Changes for future implementation

I found that even if I score a 2 (out of 10) on the productivity scale no shape gets drawn to the screen – a shape needs 3 vertices to be drawn, 2 is just a line. This I feel sends some kind of message to myself about productivity – if I don’t score at least a 3 on productivity, I don’t even get to see how content I was.

This is such an interesting reflection on me!!! I hate it when I did nothing productive all day (e.g. watch Netflix). I might be very content… but that info simply is left out of my data viz.


Here is the code:

// anxiety as strength of red rect
sketch.fill(255,0,0,, 0, 10, 100, 255));

// stress level as red rect
sketch.rect(0,h,w,, 0, 10, 0, h));

// color of shape based on contentment
sketch.fill(, 0, 10, 0, 255),0,, 0, 10, 0, 255));


// productivity as the amount of vertexes on the shape
for (var i = data.productivity; i >= 0; i–) {
sketch.cos(sketch.radians(360/data.productivityi) ) starWidth,
sketch.sin(sketch.radians(360/data.productivityi) ) starWidth