In the previous post, I used a Raspberry PI to gather a week’s worth of internet speed data.

I have a rough idea of what I want the D3 visualization to look like. My main inspiration is this one by Joseph Nudell where he visualizes his texting habits.

For the user interface I wanted big and fancy buttons and knobs. I searched the interwebs and came across several awesome Photoshop tutorials. My initial plan was to learn from them so that I could create my own custom designs from scratch. Learn I did but for now I will work with the designs from the tutorials and put my focus on the CSS.

• The power button is based on this tutorial by IconDeposit
• The slider is based on this tutorial by Nikola Lazarevic
• The channel knob is based on this tutorial by Photoshop Plus
  • The code for calculating angle of rotation is based on this StackOverflow answer. I tried to write my own from scratch but my brain wasn’t cooperating.

Here they are in action,

• Power button (works on Chrome, Safari)
  • Completed
• Channel knob & slider (works on Chrome, Safari, Firefox)
  • WIP
  • Completed

The UI is a work in progress. Updates to come.