Context

It is currently quite common to have a variety of measurement devices for utilities consumtion like electricity, gas, water. One of the such suppliers, Fortrum, which operates in Nordic and Blatic countries has been expanding their network of electric meters in a newly developed neighbourhood of Stockholm.

The company set the task of visualizing the energy consumption in an ambient and aesthetically pleasant way.

My approach

Fortrum has provided a sample dataset of the electricity, hot water and cold water usage of a household for varying time periods and frequencies.

I have performed data transformations, visual mappings and view transformations according to the Visualization Pipeline (Fig.1).

I wanted to create a dynamic visualization by having the consumption values reflected each hour, as if they had just been measured. A visual structure like a clock seemed a good fit for this case. It is ambient, recognizable, and easily readable.

Implementation

The raw data contained a variety of values for different time periods and also with a different step, therefore it required a series of transformations to be used. For this particular visualization I have focused on a two months hourly data for demo purposes.

My goal was to visualize the data in a way that will allow comparison between different utilities, not only giving a sense of numeric values but also allowing users to derive consumption patters and insights that could help reduce their expenses.

Plotting on the same axis the values of different types could create confusion. Therefore, was needed a way of making the data consistent.

For this, I have chosen to represent the consumed data by the amount of expenses that it creates, which would make it easy to compare values between different utilities. For this, I have multiplied the value of each utility to the corresponding most recent cost (in Stockholm.)

The price conversion is as follows

Electrcity price = 1.2 SEK per unit
Cold Water price = 18 SEK per unit
Warm Water price = 48 SEK per unit

For building the live visualisation I have explored a number of JavaScript libraries and picked D3.js for its flexibility and high customization options. As a core, I’ve chosen a variation of Radar Chart that would be wrapped around a 24 hour clock. The consumption data would be plotted in real time on the chart for the last 24 hours.

This visualization was further envisioned to be integrated into a physical product like a wall frame and provide both functional and aesthetical function.

A functional prototype

In the center of the chart, is a pulsating gradient that indicates if for this specific day any of the utilities expenses is higher than the corresponsing average values. If for instance the expense of electricity is higher than the average dayly expenditure,the pulsating gradient will be yellowish. In the center of the graph is indicated the current date and week day.

Are you interested in a similar project?

Project Datasheet

Keywords
  • home-utilities
  • ambient art
  • IoT
Applied Skills

HTML5

CSS3

Jquery

D3JS

InfoViz

Project Date
March 2015
Context
Royal Institute Of Technology (KTH),
Information Visualization Module.