Category Archives: Data Visualizations

A collection of data visualization projects I’ve done for the organizations I’ve worked with.

Puff Map

A quick and easy data visualization made for Puff Provisions LLC, a news and media company based out of Southern California.

This web asset illustrates the current state of Cannabis legalization throughout the USA.

This asset is powered by JavaScript charting library, D3.js.

Core Technologies

  • D3.js

SleepScore Animated Aura

A reusable JavaScript animation I developed for web and mobile platforms. This is currently the visual centerpiece of the SleepScore App available for FREE on iOS and Android.

The fundamentals for this were based on Addy Osmani’s explanation of The Module Pattern. A developer would call the object Aura and pass in an object literal of key-values to kickstart the animation. I used gulp for build tasks such as minifying code. Then each platform could host the final build artifacts on their respective app.

Core Technologies

  • jQuery v3
  • Sass
  • Gulp

SleepScore Cluster Analysis

A video walkthrough of a previously built Data Visualization Python Web App – enhanced with company branding, responsive layouts and shipped into Microsoft Azure Cloud. This tool was primarily intended for CES but feel free to view the Cluster Analysis Tool here!

Core Technologies

  • Bootstrap 4
  • jQuery
  • D3.js
  • Chart.js
  • Microsoft Azure
  • Python, Flask

SleepScore Sleep In America

A video walkthrough of a VueJS Data Visualization Web App I developed for SleepScore.com. This app acts as an embeddable widget so the codebase can be hosted on any domain or mobile app. The end user is able to compare and contrast sleep data based on region and gender. This was optimized mainly for iPad/tablet use cases for CES.

Core Technologies

  • Vue CLI
  • Vuidget – Vue.js embeddable widget
  • Vue Circle Progress
  • Bootstrap 4, Bootstrap Vue
  • jQuery
  • Google Charts

SleepScore Web Portal

A video walkthrough of an Angular Data Visualization Web App I developed for SleepScore’s App & Max Sleep Improvement Systems. The end user is able to look at additional data sets pertinent to their previously recorded sleep sessions.

The original write-up was written in Angular 2. Feel free to review it here.

Core Technologies

  • Angular 4
  • TypeScript
  • Twitter Bootstrap 3
  • jQuery
  • Moment.js
  • Highcharts
  • Microsoft Azure