(Check out the video demo on Vimeo)

Uptime Monitor shows you a remote machine’s average loads on a dynamic “wavy” line graph, as well as the system load vs. CPU usage on a nearby area chart. The app also provides high load alerts when the load has exceeded a certain value for a period of time (recovery alerts are there too). Below are a few other vital stats.

Front-End: Backbone and Marionette, RequireJS, D3.js, and many more. Back-End: Python, Flask, and good ol’ top. Deployment: Heroku—check it out live! License: BSD-3 Clause (learn more)

Scaleable D3 visualizations: D3 is a fairly popular datavis graphics library, but it’s fairly common to redraw the underlying SVG when resizing the browser window. Turns out there’s a whole science and (dark) art to doing this better. In the end, Uptime Monitor renders SVG-based visualizations in a dynamic layout with consistent coordinates and no redraws on window resize. Go ahead and resize that browser window!

Animated “wavy” graphs: Now that everything scales, let’s have some fun with those redraws! Uptime Monitor takes inspiration from Dark Sky to give the load graph a bit of character. This bit of eye candy is also a motion encoding of changes in average load over time, drawing your eye to big changes in the graph.

Linked brushing between visualizations: Hover over any part of the interface—a message, CPU value, or load measurement—to see the corresponding data in another view. (You can also hover over for tooltips containing more info.)

High load alerts with Local Notifications: Uptime Monitor uses Local Notifications to provide alerts, even when you’re not looking right at it.

• Python 2.7.8, pip, and other dependencies
• top on Linux or OS X
• A sense of wonder and deep appreciation for fuzzy kittens*

*Optional, except not really.

Uptime Monitor is all ready to deploy on Heroku, so clone the repository, push, and you’re golden.

To run Uptime Monitor locally, use Python 2.7.8 and pip to install dependencies from requirements.txt. Then use python to run flask_app.py at http://0.0.0.0:3000:

$ cd uptime
$ pip install -r requirements.txt
$ python flask_app.py

Check out my research and design notes for Uptime Monitor. See also: the Appendix for sketches and research links.