Stats Module

Posted by: Sakri Rosenstrom

Last updated on

Sakri.net Stats Module!

stats module celebration preview

I needed an excuse to add some data visualization widgets to the site (because I'd like such projects). The spur of the moment solution was an app showing useless information about a visitors "visit stats".

stats module celebration preview

This evolved into a tongue in cheek effort to persuade increased interaction. The data viz widgets are all built from scratch with Html5 Canvas, are lightweight and performant. A pie chart shows 'cards visit' data, a line chart shows 'clicks history' and a list of progress bars shows 'badges' or 'achievements' : upon reaching 100% the user is treated to a 'pixel confetti' animation.

For such a small project, I chose to go with Vue.js

The "pixel guy avatar" changes his expression as the total percentage increases, also the "stats module" button prompts different messages during and after celebrations.

Visit the standalone version here (with 'cheat buttons') :

Stats Module Standalone

Visit my 'home app' for the full experience ;)

Sakri.net home page

See the source code on github :

github.com/sakri/SakriDotNet

Discuss this article on Reddit (I'll get notified) :

reddit.com/r/sakri/
Copyright 1998-2018.

- by Sakri.net and Sakri Rosenstrom Front End Developer. All Rights Reserved.

All content, scripts and graphics on this web site are the property of Sakri Rosenstrom.