Release: TimeDrip

Date: 2023-05-10 | create | ctech | timedrip |

Overview

TimeDrip is now live! It's a live, geo-centric time spent visualization.

How it works

It works like this:

  • When someone navigates to the site:
    • Log how much time they are there
    • Log where we think they are
  • Aggregate and distribute aggregate data about:
    • Top time spent locations -> appear on globe as columns
    • Live locations where time is currently being spent -> colored red
  • Visualize this on the globe

Why I built it

I basically had three goals:

  • Build quickly (< 2 weeks) -> Practice shipping quickly
  • Build fullstack, on real data -> Practice building full projects
  • Build a fun frontend -> Practice w ctech libraries

I've been fascinated by different types of data visualization for awhile - from audio visualizations to pixel shifting to AI sentiment mining. But a lot of my works previously have been static in some form - either the output was frozen in time (an image, a video) or the inputs were snapshots of some point in time and thus didn't evolve with reality.

I wanted to try and build something more dynamic - that was true to the underlying data but also output reasonable aesthetics each time it was generated.

Since I built SmashTheButton, I've been thinking about building something similar with timespent. The underlying paradigm is similar (handle high throughput of simple numbers and sum them) and it's also an ode to my time at Instagram where a lot of my headspace was put towards ensuring our calculations of timespent were accurate.

The globe visualization is something I enjoy because it gives a sense of place / relativity to this data. I've used it previously in Coronation and liked the experience so I returned to that library to see what else it could do.

How it's built

For more on the technologies I used to build it, checkout the TimeDrip project page.

Want more like this?

The best / easiest way to support my work is by subscribing for future updates and sharing with your network.