Energy Visualization

(1)

(2)

timestamp;roomnumber;plugwiseid;timestampplugwise;powerw;presence;cumulativeenergywhcalculated;cumulativeen ergywhmeasured;weather;lightklux;1011010630;l1033;3d4d69;0627;0;0;236,68;236,68;l1035;3d4d5e;0627;0;0;220,72;220,72;l1037;3d4d 1F;0628;0;0;299,15;299,15;l1039c;3d4b7a;0629;0;0;114,2;114,2;l1039w;3d4adb;0629;0;0;110,18;110,18;l1041c;3d4c35;0628;0;0;61,95;61,95;l1041w;3d 4b51;0628;0;0;45,02;45,02;l1043c;3d4d01;0629;0;0;47, 5;47, 5;l1043w;;0629;0;0;29,26;29,26;l1045c;;0630;0;0;13,13;13,13;l1045w;3d4d 5d;0628;0;0;9,22;9,22;l1049;3d4c80;0628;0;1;101,72;101,72;l1051;3d4cc3;0627;0;0;219,65;219,65;l1053;3d4c37;0629;0;0;195,14;195,14;l1057;3d4 ca1;0628;0;0;57,43;57,43;l1059;3d4c8F;0627;0;0;115,88;115,88;l1061c;3d4b31;0627;0;;;61,85;l1061w;3d4b65;0627;0;0;55,48;55,48;l1063c;3d 4c65;0629;2,1;0;102,32;102,32;l1063w;3d4c86;0627;0;0;97,65;97,65;l1064c1;3Fd787;0627;0;;;187,49;l1064c2;3d4cd9;0629;0;;;231,23;l1064w1;3 FF655;0629;0;;;93,98;l1064w2;3d4cF5;0629;0;;;93,06;l1065c;3d4cbF;0627;0;;;31,87;l1065w;3d4c8c;0627;0;;;26,35;l1067c;3d4c7e;0627;0;;;53,27;l1067 w;3d4c2e;0629;0;;;41,31;l1068c;3d4cF1;0629;0;;;436,74;l1068w;3d4b81;0629;0;;;489,96;l1069;3d4c13;0629;0;;;82,9;lightoutside;0,1;1011010636;l103 3;3d4d69;0634;0;0;236,68;236,68;l1035;3d4d5e;0633;0;0;220,72;220,72;l1037;3d4d1F;0636;0;0;299,15;299,15;l1039c;3d4b7a;0634;0;0;114,20;114,2;l1039 w;3d4adb;0634;0;0;110,18;110,18;l1041c;3d4c35;0634;0;0;61,95;61,95;l1041w;3d4b51;0634;0;0;45,02;45,02;l1043c;3d4d01;0635;0;0;47,50;47,5;l104 3w;;0636;0;0;29,26;29,26;l1045c;;0635;0;0;13,13;13,13;l1045w;3d4d5d;0634;0;0;9,22;9,22;l1049;3d4c80;0634;0;1;101,72;101,72;l1051;3d4 cc3;0635;0;0;219,65;219,65;l1053;3d4c37;0633;0;0;195,14;195,14;l1057;3d4ca1;0634;0;0;57,43;57,43;l1059;3d4c8F;0634;0;0;115,88;115,88;l1061c;3d 4b31;0633;0;;;61,85;l1061w;3d4b65;0633;0;0;55,48;55,48;l1063c;3d4c65;0635;2,1;0;102,32;102,32;l1063w;3d4c86;0634;0;0;97,65;97,65;l1064c1;3 Fd787;0633;0;;;187,49;l1064c2;3d4cd9;0635;0;;;231,23;l1064w1;3FF655;0635;0;;;93,98;l1064w2;3d4cF5;0635;0;;;93,06;l1065c;3d4cbF;0633;0;;;31,87;l10 65w;3d4c8c;0634;0;;;26,35;l1067c;3d4c7e;0633;0;;;53,27;l1067w;3d4c2e;0635;0;;;41,31;l1068c;3d4cF1;0634;0;;;436,74;l1068w;3d4b81;0635;0;;;489,9 6;l1069;3d4c13;0634;0;;;82,9;lightoutside;0,1;1011010642;l1033;3d4d69;0640;0;0;236,68;236,68;l1035;3d4d5e;0639;0;0;220,72;220,72;l1037;3d4d 1F;0641;0;0;299,15;299,15;l1039c;3d4b7a;0640;0;0;114,20;114,2;l1039w;3d4adb;0640;0;0;110,18;110,18;l1041c;3d4c35;0640;0;0;61,95;61,95;l1041w;3d 4b51;0640;0;0;45,02;45,02;l1043c;3d4d01;0641;0;0;47,50;47,5;l1043w;;0639;0;0;29,26;29,26;l1045c;;0641;0;0;13,13;13,13;l1045w;3d4d 5d;0642;0;0;9,22;9,22;l1049;3d4c80;0640;0;1;101,72;101,72;l1051;3d4cc3;0641;0;0;219,65;219,65;l1053;3d4c37;0641;0;0;195,14;195,14;l1057;3d4 ca1;0640;0;0;57,43;57,43;l1059;3d4c8F;0640;0;0;115,88;115,88;l1061c;3d4b31;0639;0;;;61,85;l1061w;3d4b65;0640;0;0;55,48;55,48;l1063c;3d 4c65;0641;0;0;102,32;102,32;l1063w;3d4c86;0640;0;0;97,65;97,65;l1064c1;3Fd787;0640;0;;;187,49;l1064c2;3d4cd9;0641;0;;;231,23;l1064w1;3 FF655;0641;0;;;93,98;l1064w2;3d4cF5;0641;0;;;93,06;l1065c;3d4cbF;0640;0;;;31,87;l1065w;3d4c8c;0640;0;;;26,35;l1067c;3d4c7e;0640;0;;;53,27;l1067 w;3d4c2e;0641;0;;;41,31;l1068c;3d4cF1;0640;0;;;436,74;l1068w;3d4b81;0641;0;;;489,96;l1069;3d4c13;0640;0;;;82,9;lightoutside;0,1;1011010648;l103 3;3d4d69;0646;0;0;236,68;236,68;l1035;3d4d5e;0646;0;0;220,72;220,72;l1037;3d4d1F;0647;0;0;299,15;299,15;l1039c;3d4b7a;0647;0;0;114,20;114,2;l1039 w;3d4adb;0646;0;0;110,18;110,18;l1041c;3d4c35;0646;0;0;61,95;61,95;l1041w;3d4b51;0646;0;0;45,02;45,02;l1043c;3d4d01;0647;0;0;47,50;47,5;l104 3w;;0645;0;0;29,26;29,26;l1045c;;0648;0;0;13,13;13,13;l1045w;3d4d5d;0647;0;0;9,22;9,22;l1049;3d4c80;0646;0;1;101,72;101,72;l1051;3d4 cc3;0646;0;0;219,65;219,65;l1053;3d4c37;0645;0;0;195,14;195,14;l1057;3d4ca1;0646;0;0;57,43;57,43;l1059;3d4c8F;0646;0;0;115,88;115,88;l1061c;3d 4b31;0646;2,1;;;61,85;l1061w;3d4b65;0646;0;0;55,48;55,48;l1063c;3d4c65;0647;0;0;102,32;102,32;l1063w;3d4c86;0646;0;0;97,65;97,65;l1064c1;3 Fd787;0646;0;;;187,49;l1064c2;3d4cd9;0645;2;;;231,23;l1064w1;3FF655;0645;0;;;93,98;l1064w2;3d4cF5;0645;0;;;93,06;l1065c;3d4cbF;0646;0;;;31,87;l10 65w;3d4c8c;0646;0;;;26,35;l1067c;3d4c7e;0646;0;;;53,27;l1067w;3d4c2e;0647;0;;;41,31;l1068c;3d4cF1;0647;0;;;436,74;l1068w;3d4b81;0647;0;;;489,9 6;l1069;3d4c13;0646;0;;;82,9;lightoutside;0,1;1011010654;l1033;3d4d69;0652;0;0;236,68;236,68;l1035;3d4d5e;0652;0;0;220,72;220,72;l1037;3d4d 1F;0653;0;0;299,15;299,15;l1039c;3d4b7a;0653;0;0;114,20;114,2;l1039w;3d4adb;0652;0;0;110,18;110,18;l1041c;3d4c35;0652;0;0;61,95;61,95;l1041w;3d 4b51;0652;0;0;45,02;45,02;l1043c;3d4d01;0653;0;0;47,50;47,5;l1043w;;0651;0;0;29,26;29,26;l1045c;;0654;0;0;13,13;13,13;l1045w;3d4d5d; 0653;0;0;9,22;9,22;l1049;3d4c80;0652;0;1;101,72;101,72;l1051;3d4cc3;0652;0;0;219,65;219,65;l1053;3d4c37;0651;0;0;195,14;195,14;l1057;3d4 ca1;0653;0;0;57,43;57,43;l1059;3d4c8F;0652;0;0;115,88;115,88;l1061c;3d4b31;0652;2,1;;;61,85;l1061w;3d4b65;0652;0;0;55,48;55,48;l1063c;3d 4c65;0654;2,1;0;102,32;102,32;l1063w;3d4c86;0652;0;0;97,65;97,65;l1064c1;3Fd787;0652;0;;;187,49;l1064c2;3d4cd9;0651;0;;;231,23;l1064w1;3 FF655;0651;0;;;93,98;l1064w2;3d4cF5;0651;0;;;93,06;l1065c;3d4cbF;0652;0;;;31,87;l1065w;3d4c8c;0652;0;;;26,35;l1067c;3d4c7e;0652;0;;;53,27;l1067 w;3d4c2e;0653;0;;;41,31;l1068c;3d4cF1;0653;0;;;436,74;l1068w;3d4b81;0653;0;;;489,96;l1069;3d4c13;0653;0;;;82,9;lightoutside;0,1;1011010700;l103 3;3d4d69;0657;0;0;236,68;236,68;l1035;3d4d5e;0657;0;0;220,72;220,72;l1037;3d4d1F;0656;0;0;299,15;299,15;l1039c;3d4b7a;0655;0;0;114,20;114,2;l1039 w;3d4adb;0654;0;0;110,18;110,18;l1041c;3d4c35;0655;0;0;61,95;61,95;l1041w;3d4b51;0655;0;0;45,02;45,02;l1043c;3d4d01;0657;0;0;47,50;47,5;l104 3w;;0657;0;0;29,26;29,26;l1045c;;0656;0;0;13,13;13,13;l1045w;3d4d5d;0656;0;0;9,22;9,22;l1049;3d4c80;0654;0;1;101,72;101,72;l1051;3d4 cc3;0655;0;0;219,65;219,65;l1053;3d4c37;0654;0;0;195,14;195,14;l1057;3d4ca1;0659;0;0;57,43;57,43;l1059;3d4c8F;0659;0;0;115,88;115,88;l1061c;3d 4b31;0659;0;;;61,85;l1061w;3d4b65;0659;0;0;55,48;55,48;l1063c;3d4c65;0657;2,1;0;102,32;102,32;l1063w;3d4c86;0659;0;0;97,65;97,65;l1064c1;3 Fd787;0655;0;;;187,49;l1064c2;3d4cd9;0657;0;;;231,23;l1064w1;3FF655;0657;0;;;93,98;l1064w2;3d4cF5;0657;0;;;93,06;l1065c;3d4cbF;0659;0;;;31,87;l10 65w;3d4c8c;0659;0;;;26,35;l1067c;3d4c7e;0659;0;;;53,27;l1067w;3d4c2e;0657;0;;;41,31;l1068c;3d4cF1;0656;0;;;436,74;l1068w;3d4b81;0657;0;;;489,96 ;l1069;3d4c13;0656;0;;;82,9;lightoutside;0,1;1011010706;l1033;3d4d69;0657;0;0;236,68;236,68;l1035;3d4d5e;0657;0;0;220,72;220,72;l1037;3d4d 1F;0656;0;0;299,15;299,15;l1039c;3d4b7a;0655;0;0;114,20;114,2;l1039w;3d4adb;0654;0;0;110,18;110,18;l1041c;3d4c35;0655;0;0;61,95;61,95;l1041w;3d 4b51;0655;0;0;45,02;45,02;l1043c;3d4d01;0657;0;0;47,50;47,5;l1043w;;0657;0;0;29,26;29,26;l1045c;;0656;0;0;13,13;13,13;l1045w;3d4d 5d;0656;0;0;9,22;9,22;l1049;3d4c80;0654;0;1;101,72;101,72;l1051;3d4cc3;0655;0;0;219,65;219,65;l1053;3d4c37;0654;0;0;195,14;195,14;l1057;3d4 ca1;0703;0;0;57,43;57,43;l1059;3d4c8F;0703;0;0;115,88;115,88;l1061c;3d4b31;0703;0;;;61,85;l1061w;3d4b65;0703;0;0;55,48;55,48;l1063c;3d 4c65;0703;0;0;102,32;102,32;l1063w;3d4c86;0703;0;0;97,65;97,65;l1064c1;3Fd787;0701;0;;;187,49;l1064c2;3d4cd9;0701;0;;;231,23;l1064w1;3 FF655;0701;0;;;93,98;l1064w2;3d4cF5;0701;0;;;93,06;l1065c;3d4cbF;0703;0;;;31,87;l1065w;3d4c8c;0703;0;;;26,35;l1067c;3d4c7e;0702;0;;;53,27;l1067 w;3d4c2e;0705;0;;;41,31;l1068c;3d4cF1;0704;0;;;436,74;l1068w;3d4b81;0705;0;;;489,96;l1069;3d4c13;0704;0;;;82,9;lightoutside;0,1;1011010712;l103 3;3d4d69;0657;0;0;236,68;236,68;l1035;3d4d5e;0657;0;0;220,72;220,72;l1037;3d4d1F;0656;0;0;299,15;299,15;l1039c;3d4b7a;0655;0;0;114,20;114,2;l1039 w;3d4adb;0654;0;0;110,18;110,18;l1041c;3d4c35;0655;0;0;61,95;61,95;l1041w;3d4b51;0655;0;0;45,02;45,02;l1043c;3d4d01;0657;0;0;47,50;47,5;l104 3w;;0657;0;0;29,26;29,26;l1045c;;0656;0;0;13,13;13,13;l1045w;3d4d5d;0656;0;0;9,22;9,22;l1049;3d4c80;0654;0;1;101,72;101,72;l1051;3d4 cc3;0655;0;0;219,65;219,65;l1053;3d4c37;0654;0;0;195,14;195,14;l1057;3d4ca1;0708;0;0;57,43;57,43;l1059;3d4c8F;0708;0;0;115,88;115,88;l1061c;3d 4b31;0708;0;;;61,85;l1061w;3d4b65;0708;0;0;55,48;55,48;l1063c;3d4c65;0709;2,1;0;102,32;102,32;l1063w;3d4c86;0708;0;0;97,65;97,65;l1064c1;3 Fd787;0708;0;;;187,49;l1064c2;3d4cd9;0708;0;;;231,23;l1064w1;3FF655;0708;0;;;93,98;l1064w2;3d4cF5;0708;0;;;93,06;l1065c;3d4cbF;0708;0;;;31,87;l10 65w;3d4c8c;0708;0;;;26,35;l1067c;3d4c7e;0708;0;;;53,27;l1067w;3d4c2e;0710;0;;;41,31;l1068c;3d4cF1;0710;0;;;436,74;l1068w;3d4b81;0711;0;;;489,96 ;l1069;3d4c13;0710;0;;;82,9;lightoutside;0,1;1011010718;l1033;3d4d69;0657;0;0;236,68;236,68;l1035;3d4d5e;0657;0;0;220,72;220,72;l1037;3d4d 1F;0656;0;0;299,15;299,15;l1039c;3d4b7a;0655;0;0;114,20;114,2;l1039w;3d4adb;0654;0;0;110,18;110,18;l1041c;3d4c35;0655;0;0;61,95;61,95;l1041w;3d4b

(3)

yann sinke

student-number 2007725 cohort 2007 / 2008 graduation project v2 February - 17 June 2011 avans university of professional education academy of media & user experience communication & multimedia design, breda

caroline maessen Johan slager

philips research,

high tech campus 34, eindhoven distributed sensor systems

alessio Filippi armand lelkens

human interaction & experiences group

paul shrubsole

(4)

What is the best way to visualize energy usage data so that

expert

-

users can effectively find new ways in reducing

energy consumption in offices

?

“

”

(7)

foreword

_{when finishing high}_-_{school i}

continued my study at senior secondary vocational education

(mbo) doing electrical engineering.

here i really enjoyed the analytical thinking, but after i graduated i had the choice to continue my studies in electrical engineering or do something else. because i became more intrigued by design,

eventualy i didn’t continued my study in technique, but chose for communication & multimedia design at avans university of professional education, breda. it turned out to be a good decision. i really liked it. during the schooling i focused more on the information and interaction side of design still fascinated about technique though.

in my final year i started thinking about a nice graduation project and thought of philips as a suitable company since we already did some nice projects for philips through the first years of the study. after some contact, they offered me a project about visualizing energy data. in the first place i had some thoughts about the assignment because it would involve a lot of programming. eventualy i decided to go for it! the main reason was that the assignment was a project where both studies come together and would fit me perfectly.

this report is written for my mentors at avans university of professional education, breda and mentors at philips research to get insights in the process; the steps and decisions i made to create the end-product.

i would like to thank my mentors at avans university: caroline maessen and Johan slager. at philips research i would like to thank my mentors paul shrubsole from the human interaction & experience group, alessio Filippi and armand lelkens from the distributed sensor

(8)

introduction

_{in a world where technology is}

getting more advanced, where we aim for innovation. Funded by all the warnings about climate change companies start to look for green solutions, new ways to develop and use different materials to reach a more sustainable world.

philips’ vision includes:“we seek to improve the quality of people’s lives through focusing on their health and well-being. Quite simply, we want to help people live a healthy, fulfilled life”. basically philips tries to improve the lives of people by offering products that will help to do that, but they also think about improving the lives of future generations by aiming for sustainable products. to achieve this, philips research is the research department who does research on multiple fields to see what to possibilities are with nowadays and the technology of tomorrow.

one research project is to look for new ways in reducing the energy consumption in office buildings. a way to achieve this is doing multiple measurements to collect a lot of data. this data can be used to find unknown patterns, deviations or correlations which can lead to new energy reducing possibilities and eventually to practical solutions and products. the problem with a lot of data is how can someone still understand what he is seeing?

this is where i joined the research project. my role was to do research for the best possible way to visualize energy and other relevant data who can give an expert -with knowledge about electricity and what the possibilities are to reduce it- the best available insights to find new ways in reducing the energy consumption in office buildings.

eventually the knowledge gained by the research is used to developed a working prototype.

the main goal of this graduation project is to manage and realize this project by using all the knowledge i obtained during my study.

the report is written during the process of the project, step-by-step,

phase-by-phase. it starts with the research phase (a diverge phase), where all the directions

/ opportunities of the project are researched, followed by the conceptual phase (converge phase),

where the best direction with the most opportunities are developed and transformed in the best suitable data visualizing interface for the project. the process is user and requirement driven and in the end iterative, where research followed by concept, realization, test and again research. the final chapters in the report are about the realization phase, how it all came together.

Followed by a reflection of all the steps i made during the process of the project.

(9)

philips research

_{philips research is based in}

eindhoven at the high tech campus. the high tech campus is an area of one square kilometre where researchers, developers and entrepreneurs work closely together developing the technologies

and products of tomorrow. the companies (not only philips) at the campus share the drive to create innovative solutions that make human life healthier, more pleasant,

easier and interesting.

philips research is like the name says: research, divided in different groups, where every group does its own research and experiments to find new opportunities and solutions.

during the project i had three mentors at philips to assist me:

paul shrubsole, alessio Filippi and armand lelkens. the reason that i had three mentors was because the project was a collaboration of two groups within philips research, the human interaction & experiences -(hie) and distributed data systems

(dds) group. these where the groups i was connected with. in the system i was part of the dds, but my desk was on the floor of the hie in an open office where more interns had their desk. they placed me on the hie floor because there were more interns with projects based on interaction and it would be more inspiring.

paul, alessio and aramnd started the project in 2010, but eventually needed someone to make the data visualization. armand is the one who collected all the data for the project. together they developed the assignment and the scope for my work.

paul from the hie was my main mentor for helping me within philips and assisting me with the information and interaction thoughts. alessio and armand were the person’s to talk to about the

data and gave feedback and new requirements.

every week we had a meeting where we talked about the project,

showing my findings and progress where paul, alessio and armand gave feedback or other insights they obtained during the past week, but basically i was the one who was on the project, where they guided me.

besides my three mentors there were enough other colleagues with explicit skills to assist me.

(10)

case description

_{philips research is developing}

a technology for detecting the electrical consumption of individual appliances using a large data-set.

the energy consumption data need to be visualized in an effective and flexible way. a professional user will visualize the data to identify the possible energy saving strategies and provide recommendations to reduce the carbon footprint of the building. assignment

• provide the visualization concept that illustrates the graphical richness needed to support an expert user, • develop a working

implementation of such a user interface using real-world energy consumption data from one of the philips buildings.

data

the energy data collected is processed to dis-aggregate the overall electricity consumption. as a result the energy data will consist of the overall power consumption and the power consumption of many individual appliances. this energy data combined with available relevant data, such as weather and presence, will form the data-set for the application.

target group

the end-user is an expert who has knowledge about electricity and what the possibilities are to reduce the energy consumption. he is part of an organisation which can offer energy services to reduce the energy consumption in large offices or households.

visualization tool

the visualization will be a graphical tool which would make it easy for the expert to look at the different parts of the energy data (e.g. only the lighting energy usage on a particular floor) and also to zoom in and out over time to look at how energy is being used within the building (e.g. by showing graphical

overlays of different appliances, to detect patterns of consumption or relationships between office appliances).

working prototype

the working prototype is a proof of concept of the ideal concept. the data of the prototype is measured by different sensors in the philips research building, high tech campus #34. this data-set includes: • energy data, which included’s:

lighting, printer, personal computers and pc-screens,

• weather data (the amount of light in lumen),

• human presence in the offices. test group

the test group are the people who are within philips research related to the project.

(11)

planning

_{the planning is divided in different}

phases over a time span of 90 working days, phases filled by user input and requirement driven design with some iteration until the final concept is approved and a working prototype is realized.

the planning

1 planning / scope phase 2 research phase 2.1 diverge phase 2.1.1 visualizing data 2.1.2 interfaces 2.2 related companies 2.3 user 2.4 converge phase 2.4.1 relevant applications 3 conceptual phase 3.1 concept phase 3.2 proof of concept 3.3 test and review 3.4 improve phase 4 realization phase 4.1 realization 4.2 test and review 4.3 improve phase 4.4 Final concept

5 preparing for presentation 5.1 research

5.2 concept 5.3 presentation

(12)

through time

_{infographics and data visualizations}

are not a new phenomenon. in prehistory, early humans created cave paintings to show information.

later maps where created, images turned into icons and eventually icons became text.

From 1850 until 1900 the so-called: “golden age of data graphics”,

visualization made a step forward.

a growth of the importance of numeric information for social,

industrial, commercial and transportation planning made analysis offices open their doors in europe.

in september 1854 dr. John snow made a map of broad street’s cholera outbreak in london, which was one of the first visualizations where data was visualized in a map.

in his cholera research he decided to visualize all the cholera death’s within each address on the map of london. by drawing small lines,

which indicate the corpses and adding the water pumps in the surrounding, a pattern appeared:

most of the people that died lived around the water pump in broad street. due to his visualization of the cholera data snow was able to investigate the outbreak and to test his hypothesis: cholera is a water

-borne disease that is originating at the broad street pump.

broadstreetmap, J. snow

(13)

another great data visualiser in the same time is Florence nightingale,

nurse, writer and statistician. during the crimean war she was sent to the main british military camp as a volunteer nurse. she was so intrigued by all the deaths that she decided to collect all the death data in detail. when the war was over

(1857) she collected over two years of death data. with this data she tried to persuade the government to set up a royal commission of inquiry. nightingale wrote a rapport and visualised her data to support it. she visualised her data in a polar area graph, with multiple variables:

soldiers who died from preventable diseases (blue), deaths from wounds

(red) and deaths from accidents and other causes (black). with this visualisation nightingale could show the death pattern and show facts which support her story: that most deaths were due to poor nutrition and overworking of the soldiers.

in 1869 charles Joseph minard a French civil engineer illustrated one of the most famous visualizations:

the disastrous campaign of

napoleon against russia in 1812. it shows the number of soldiers in the campaign, map, route, temperature,

deaths and soldiers who came back. it is still very famous about its complex data, functionality and its narrative richness.

nowadays data visualisations are very popular, thanks to people

like el gore’s who used data visualizations in an inconvenient truth and showed them to the public and hans rosling who inspires at ted by showing the power of interactive animated data visualizations.

carte Figurative, c.J. minard

mortality, F. nightingale

(14)

definition

data visualizations

“data graphics visually display measured quantities by means of the combined use of points, lines, a coordinate system, numbers, symbols, words, shading, and colour”

(e. tufte, the display of quantitative information, 2001). information graphics

“in both print and web design infographics - visual representations of information, data or knowledge - are often used to support information, strengthen it and present it within a provoking and sensitive context, depending on

designer’s creativity”

(v. Friedman, smashingmagazine.com, 2008). difference

“the difference between data visualizations and infographics is the objective. both display information, but infographics tell a story or answer a question, where data visualizations let the user find his own story or answer”

(b. wiederkehr, datavisualization.ch, 2010). “attractive things work better...

when you wash and wax a car, it drives better, doesn’t it? or at least feels like it does” (d. norman, emotional design: why we love or hate everyday things, 2003).

in a world where technology is getting more advanced there are new ways to easily collect a large amount of data. while the amount of data is getting larger and larger it becomes more complex and eventually unreadable. data visualizing or information graphics

(infographics) are ways to make complex data accessible, but they are not the same thing.

(15)

process

_{data visualizations require a lot of}

thinking; analysing how to present,

how it will be used and what it should tell. ben Fry, the writer of visualizing data made a step-by

-step process plan about how to make data visualizations. seven steps that should be followed and can be repeated during the process.

ben Fry’s seven steps of data visualization process:

1 acquire; obtain the data.

2 parse; provide some structure in the data and divide in categories.

3 Filter; remove irrelevant data.

4 mine; examine the data for patterns, correlations and deviations.

5 represent; choose a chart to visualize the data.

6 refine; improve the chart, changing the hierarchy, colours or shapes.

7 interact; add methods for manipulating the data.

besides Fry’s steps other simple questions can help and guide to get started with a data visualization.

Questions like:

• For what will they use the information? • what would i like to tell?

• who am i telling it to? • which data will i use? • which method will i use?

(16)

chart types

_{through the years many different}

charts are used to give insights in data. all these charts can be divided in groups based on the type of data they can represent.

bar / column area bubble doughnut dot matrix line bubble relation pie multiset multiple line metro polar area span stacked area relation radar stacked bar

two axis bar line

scatterplot waterfall venn Quantitative data continuous data relations exact quantity

each chart type tells his own story.

in the search for the right data visualization to tell the stories of the energy data. it’s good to know which stories can already be told with the existing data visualizations.

Quantitative data visualizations tell the story about a value of something compared to other values.

continuous data visualizations show a value which have a relation to something continuous (mostly an time ax).

relation data visualizations show how the data is related.

an exact quantity data visualization tells the story of what makes the exact quantity. 15

(17)

heat map tree diagram Flow thematic map tree map sankey diagram meter topographic map thread arcs position based hierarchy Flow dynamic

position based data visualization show data which is linked to location.

hierarchy visualizations tell a story by its importance, hierarchy.

Flow data visualization tell a story in a chronological order, a sequence, an alogorithm or proces from start to end.

dynamic visualizations show data realtime.

(18)

elements

_{For creating a good data}

visualization which is easy for the viewer to perceive there are a lot of elements that need to be considered. what are the capabilities of the viewer? are there design laws which guide to present the data right? and how does the viewer perceive the information?

size square proximity pragnanz position circle linking closure angle triangle rimming symmetry shape marking variables shapes laws of gestalt

how can an object be changed to perceive it as something unique, compared to other objects of its kind?

on the basis of all 2d objects there are three shapes: the square, circle and triangle. all three of them have their own characteristics. squares can make up a grid and have two variables. circles, can indicate, are a whole and perfect. triangles have three dimensions and can point in a direction.

the laws of gestalt are about the relations between objects. proximity: objects that are close belong to each other. linking: objects who are connected have a link. rimming: rimmed objects are connected. marking: a marked object, points out.

pragnanz: an complex image will be perceived as an simple image. closure: the brain will complete incomplete shapes. symmetry: symmetrical objects have a relation.

(19)

interposition height cues similarity shadow saturation perspective smoothness linear perspective monocular cues

For pointing something out colour coding can be used. by using higher contrasts in the data it will become easier to differentiate data.

texture gradient

Familiar size motion parallax Figure

-background common-fate

colour contrasts

warm - cold complementary

colour - colour light - dark saturation simultaneaus

deuteranomaly tritanomaly

normal vision protanomaly colour sensitiveness

colour blindness

with simple elements the user can perceive a lot of information.

monocular cues show depth in 2d this needs to be considered for presenting the information right.

they can be used and work against the perception of the data.

protanomaly: red cones are absent what affect the red-green hue. deuteranomaly: no green cones which affect the red-green hue. tritanomaly: blue cones are absent which affect the blue-yellow hue.

interposition: layered objects suggest depth. shadow: a shadow suggest depth. linear perspective:

narrowing lines suggest depth. texture gradient: less white space in a gradient suggest depth. height cues: the closer to the horizon, the further away. saturation perspective: the more saturated the colours, the further away.

Familiar size: smaller objects are further away. motion parallax: objects in the distance move slower.

similarity: identical objects are related. smoothness: a fluent line will be followed. common-fate: objects with a common fate are related. Figure - background: the perceiver will perceive aether one of them.

types of colour blindness:

1 anomalous trichromacy: the eye can detect all the three colours

(red, blue and green), but the cones, which detect the colour, of one colour is altered in its spectral sensitivity.

2 dichromacy: the eye can only distinguish two of the three colours.

3 monochromacy: with momochromacy people can not distinguish colours. colour and lightness are reduced to only one dimension.

(20)

relevant visualizations

gap minder component art

while doing research a lot of data visualization came by. the most relevant and vulnerable for my process are gap minder and component art.

gap minder

hans rosling, professor of global health impresses everyone with his ted-talks about health and economics. they way he convinces the audience is by using gap minder to visualize his data. gap minder brings the data to live by animating

the time axis. by doing this it becomes very easy to detect patterns in the data. the software is very complete, it has the ability to zoom, adjust and select the data. the interface is all about the functionality, providing everything that is needed to analyze the data. component art

the component art software is a complete package to analyze different kind of data-sets.

the package includes multiple visualizations, where the user has the freedom to choose a preferred visualization.

the screenshot of the component art includes an overview of multiple visualizations to analyze a company income and expenditure. what

makes this visualization relevant is the time selection. the time selection is leading and influences the other visualization directly.

besides the hierarchy, the functionality of the time-bar is extremely flexible and well thought out.

not only print and interactive data visualizations, but documentaries about data visualization inspired as well. in britain from above the look at great britain from the sky,

looking for patterns and changes in the environment of great britain.

in money & speed inside the black box they show the narrative power of data visualizations. last but not least the Joy of stats where hans rosling shows the value of data visualizations.

other inspiration and guidelines came from the data Flow books and in particular the books of e. tufte.

in his books tufte guides and warns to create the best data visualization.

after the research-phase the following do’s and don’ts pointed out to create a good visualization.

do’s and dont’s

• animated data visualizations should have a ghost to see previous values,

which gives more rest and prevent that the user will miss vulnerable data. • give the user the control when the data visualization is animated, so the user can analyze at his or her preferred speed.

• make it easy and otherwise teach the user how to examine the data. • averages alone don't display the whole data, all people over the world have at average less than two feet.

• show time as a movement, to get insights in the process and patterns. • whach for absolute and relative information, they can trap the user. • aim for a goal while visualizing data,

• the more abstract the easier to perceive,

• create a data visualization where the user is guided, but still can explore. • no data out of context,

• no unlabelled data,

• maximize the data-to-display ratio,

• look for multifaceted representations; small multiples,

• rimming will result in negative white space, which is harder to perceive, • small lines close to each other will result in disorder for the eyes, • the label of an element should always be above the element, • use continuity in the design.

(21)

related products & resellers

_{related products}

currently there are multiple companies who are offering products to measure energy consumption in a house or office environment. companies such as: cisco, energy hub, enistic,

green energy options, plugwise.

component art and navetas. all the products give insight in the energy usage, measuring different electrical appliances and display the insights on a (mobile)device or website. but non of them uses presence and weather data to get a wider view of insights in the patterns of energy usage.

plugwise

current plugwise is the program which philips employees use to analyze energy data. software made by plugwise to analyze plugwise sensor data. it does give insights, but cannot show other data than data collected with plugwise-plugs. potential resellers

the potential resellers of the final product will be energy suppliers or specialized companies who have the knowledge and can provide solutions to reduce energy. the four potential resellers and biggest

energy suppliers in the netherlands now a days are: nuon, eneco, essent and delta.

while being a green company is getting more popular, they all provide their clients with information about how to reduce energy consumption. all of them have online shops where they sell products which reduce the energy consumption. and all four also offer a services where the clients can calculate their energy expenditure.

besides the calculation the client has the opportunity to invite an expert on energy savings to examine his house or office. during the visit the expert will give advice and look for physical energy saving solutions such as insulation and the state of the electrical appliances, but he will measure and look at the pattern of the kwh-meter as well.

potential end user

the potential end-user will most likely be the expert who does the same measurements as described above, but has more an electrical or information technology background instead of installation technology.

(22)

interaction & costs

data visualizations are all about visualizing data in such a way that new insights can be gained. if user interaction is not well thought out,

finding new insights can be hard.

in 2008 heidi lam published a paper titeld:“a Framework of interaction costs in information visualization”. she realized that every time we interact with a visualization, interaction has a cost. so by making effective data visualizations while knowing what the costs are helps to reduce them.

the framework of interaction is based on donald norman’s seven stages of actions model, which describes the psychology how people interact with machines and

(their) interfaces.

heidi lam’s interaction cost of

1 decision

complex visualizations often multiple overviews without clues on what to do next. how do we form a goal? and how can the system help to focus on interesting data?

2 system power

once people have a goal in mind, they need to translate it into operations.

if the interface is too complex or does not provide the right clues, the user might get stuck or lost.

3 multiple input modes

to deal with complex analysis tasks, designers and researchers had to invent complex interactions that might require multiple modes or functions, which can make it even more complicated.

4 motions

this cost refers the number of clicks that need to be done for an action and to Fitt’s law; the time that is required to move to a target area depends on the distance and size of the target area.

5 visual clutter

once an operation has been executed at the interface level the user expect the visualization to react and provide feedback. this can be hindered by visual clutter.

6 view changes

in visualizations different views are often used to show new insights, but each view has a cost to re-interpret it.

7 state of changes

when analyzing data, user’s change a lot of views or variables. each change has a cost to understand the current state and to be able to go back to previous settings.

donald norman’s seven stages of actions

1 Forming the goal,

2 Forming the intention,

3 specifying an action,

4 executing the action,

5 perceiving the state of the world,

6 interpret the state of the world,

7 evaluating the outcome.

(23)

solutions to reduce the costs

• less is more: don’t provide extra function or show irrelevant information, provide the user with a minimal interface.

• keep the user in control: don’t let things happen automatically, let the user have the control.

• don’t use fancy techniques: new ways of visualizations, new ways of interaction have a cost only use them if they add value for viewing the data. • support re-finding: while people interact with an interface during data analysis, they go through the data, find something, continue searching and eventually what to return to a previous finding. the interface should make it easy or have a function to navigate to it.

when all the cost’s are mapped,

solutions can be created. in heidi lam’s paper she also give advice how to reduce the cost’s. again she based it on donald norman’s model, where he suggests to link the gulf of execution (the difference between the user’s perceived execution actions and the required actions) with the gulf of evaluation

(the difference between the way the system provides information and how the user thinks the system will provide the information).

laws of interaction design

good interaction design is guided by laws, which make it easy for the user to use an object or interface.

• Fitts’ law

the time that is required to move to a target area is a function of the distance to and the size of the target.

• hick’s law

the time it takes for a person to make a decision depends on the possible choices available.

• magical number seven

the human mind is best able to remember information in chunks of seven plus-minus two items.

• tesler’s law

every application must have an inherent amount of irreducible complexity.

this means that some complexity cannot be reduced only moved. • poka-yoke principle

prevent errors with constraints on products so user cannot do it wrong.

all these guidelines where considered in the creation process of the interface and had a role in it. in the report are references to this section.

(24)

data

_{the data which should be}

visualized is the disaggregated energy data collected by the sensors processed to the overall electricity consumption. as a result the energy data will consist the overall power consumption and the power consumption of many individual appliances. this individual power consumption combined with available relevant data, such as weather and presence will form the data-set for the application.

the data is interconnected, where the time is leading. as an example:

at a certain moment in time an appliance -on a certain location where someone or nobody was

present- had an energy consumption under these weather conditions. in this case, time will be leading in the data visualization. when looking more in detail at the data, energy has a value and cannot be divided further. the same thing counts for presence. it’s either true or false.

weather data on the other hand can be divided in temperature, wind

(speed and direction), humidity,

amount of light, under a certain type of weather. the appliance level is different, it is a part of a group,

which is part of a category. in this case, time is the moment of the measurement. each time-stamp is connected to all data variables as mentioned above.

23

n

E

(25)

type of data

now the data is clarified, the next question is: what are the possibilities? expert questions (right)

formed after talking with experts,

creating persona’s and scenarios help to find what the data should tell to get the preferred insights.

looking at the data with the expert questions in mind. energy can have a value at a certain moment, but can also be cumulative over a time span. weather and its variables are all values. presence can be seen as a boolean it is either true / false,

on / off, but it also can be used cumulative, counting the presence over a time span.

data to visualization

the data is analyzed, the possibilities with the data are mapped. the next step is to translate the data to a visualization. referring back to the expert questions while looking at the data, the most important data within the data can be chosen.

this data will be leading in the visualization. in this case, energy and the appliance data are leading,

both have a value at a certain moment. weather and presence are less important, they can be an attributed of the leading data in the visualization. weather, time and presence can be show continuous in a graph, but over a certain period

(time span) as well. differences within the data become visible by analyzing it and it becomes clear how to tell the story.

combining the visualizations

span meter meter dot matrix bar / column animated dot multiple line radar pie animated span after analyzing the data a few visualizations remained suitable for the energy data. some visualizations can be improved to become more suitable by combining two of them.

so are the span chart and dot matrix suitable in one way, but can be way more informative by combining it with the meter chart to bring them alive like hans rosling does with his gap minder software.

how to be used?

bar / column chart can display multiple appliances show their energy consumption at a certain time.

the multiple line chart can display multiple appliances as lines over a certain time span.

the pie chart can show the category breakup of the total energy

consumption.

the radar chart can be used to visualize an appliance or multiple appliances and their energy usage over a time span to compare them.

the animated span chart is a combination of the span and meter chart. it can display multiple appliances with their energy usage and even show a ghost of previous usage.

the animated dot chart uses the power of a dot matrix to show abstract the usage of multiple appliances by colour-hue and rank them by usage.

(27)

visualization test

_{in a visualization test the animated}

span chart was reviewed on his readability and information richness in a comparison between the new chart animated the hans rosling way and an animated line graph. test

in the comparison between the animated span chart and the line graph they were both connected to the same data-set. appliances are colour-coded, the height of the energy consumption is the height on the y-axis. presence (as empty)

is visualized in the animated span chart as a gap in the line, where in the other visualization it is white.

weather data is not included and both visualizations where animated and could be controlled by the user.

the goal in the test included: look for patterns / deviations in the data by using the visualizations.

the difference

the first and main difference between the visualizations is the way they show the data. the animated span chart shows the value variation on the y-axis (depth), where the line graph shows the value variation on the x-axis (latitude).

showing the value variation on the y-axis (current value highlighted,

past values (ghost) is fading away) is more abstract and saves space. but on the other hand it is less detailed.

analyzing the data on the y-axis makes it harder to find patterns, but makes it easier to detect deviations in the data. the line graph proofed his value in the past, but is hard to read when there are more lines. conclusion

the animated span chart has value when looking for deviations.

the line graph is good for finding patterns and correlations, but cannot be used with multiple variables. this includes for the interface that there is no data visualization know which could tell the full story of the data. in other words, the interface should include multiple visualizations on different levels: deviation, pattern /

correlation and compare.

line graph animated span chart

(28)

linking the data with a

visu-alization

the visualization test gave some

new insights in what should be included in the final interface:

multiple data visualizations which together will form full story of the energy usage. multiple data visualization with all their own stories. with these new insights,

expert questions, persona and scenarios new expert questions about the interface can be formed. expert questions (visualization)

• how much energy does this building consume compared to other buildings?

• what in the energy data springs out for this building?

• which appliance type/group/category consumes the most energy? • which part of the building consumes the most energy?

• what day/area represent an average energy consumption day/area for a certain period for the measured building?

• on which moments did the energy consumption exceeded the average consumption?

• on which moments was the energy consumption below average? • what is the energy usage pattern of the building?

• how does it behave under different weather types?

• what is the influence of presence on the energy consumption pattern? • what is the variation in appliance patterns?

the new expert questions combined to a plausible scenario led to three levels in the interface.

interface levels

• abstract level, where the user can look for deviations within the data. (how to form a goal, heidi lam #1).

• detail level, to look in detail at specific selected data in the interface. • compare level, where multiple variables easily can be compared. data possibilities

three levels, three stories, three visualizations. to find out which data in what representation is most suitable for a visualization. it is best to map all the possibilities.

using only one icon / possibility for each variable led to ten suitable combinations.

e.g. on an abstract level energy can be visualized -one time to infinity-, it depends on the number of appliances. weather is less important on an abstract level so it can be an attribute of the time data which on itself is continues.

presence can be an attribute

of the energy value indicator in the visualization, they are both connected to the appliance. For the detail level the most suited combination is where there is an exact number of appliances, weather and presence are visualized on the same importance level as energy and time is continues. this will result in a complex visualization with multiple variables on the same level,

but it provides the insights needed.

For the compare level an exact number of appliances is used, where weather and presence are also visualized on the same importance level as energy and the time span is specified.

(29)

n

E

n

E

n

E

n

in the interface the user uses the available controls buttons, sliders,

sets settings and switches between screens. by performing these actions the interface elements can give feed-forward, show a preview of the changes, execute the action and give feedback afterwards. this can be called the behaviour of the interface.

when a user uses the interface he has a goal (expert questions visualization). in order to achieve this, the user will analyze the data and adjust settings. in other words,

he will discover the data by taking control of the interface going through the provided knowledge. it is task for the interface to support these actions by its behaviour.

user interface behaviour (feelings) and how

1 control

• simple functionality, • ability to adjust settings, • do not do things automatically, • do not interrupt the user.

2 discovering

• enthusiastic in appearance,

• help the user and learn how to do it, • give indications.

3 knowledge

• no data gets lost, or needs to be reloaded, • all information within reach,

• remembering settings. • show last used settings.

(31)

hierarchy

the hierarchy, the axes on which the interface should be navigable.

in the data-set are a few variables included: the appliances, energy usage, weather and presence all with a leading time-stamp. which variables will be useful for the user to navigate in.

referring back to the first expert

-question of the data: how much energy did appliance #a in location

#a used over any time? energy usage, weather and presence cannot be used as axes. energy usage is what will be visualized and analyzed,

while weather and presence are used to find correlations with the energy usage.

the axes will be: an appliance

(energy consumer steps), has an energy consumption under certain conditions (weather and presence)

on a position within the building

(position steps) at a certain moment in time (time steps). From each position the user should be able to make any step on three axes.

e.g.: the user does a measurement in a building over a year. in this data he must be able to see a group of appliances, within the building in a certain area, over the year on every monday. in this case, the user skips a lot of steps, but by skipping those steps the user creates a lot of new insights and has the freedom to discover the data, but does not exclude anything. year quarter month week day hour minute second

category group appliance everything

buildingfloor wingarea most specific/detailed level most abstract/

overview level

energy consumer scope

time scope

position scope

(32)

interface: navigation

in the hierarchy chapter came forward that the user should be able to navigate on three axes, the position, time and energy consumer axis. in this chapter, the three axes will be discussed about their appearance and functionality. workplace

the interaction of the interface is thought out for a desk-computer.

when going through scenarios over how a measurement will be done the findings are that the expert will collect a lot of data and analyze it at a desk, where the user can take the time to analyze. the data is collected for finding patterns this can take time in this case the most suitable input devices are a mouse and keyboard.

Functionality

the main functionality of the axes is offering the user easy filters which make it simple to selecting or deselect variables. the first step was to think out the main functionality along the user interface behaviour, simple functionality,

and make sure that every action is one click away. another important guideline is overview. all available variables should fit in one screen.

this makes the interface simple,

fast and the user will not get lost.

the thoughts on the functionality and associated guidelines resulted in the first three wire-frames with interface elements as seen on the right. where the user has an overview of all the steps and where every step is one click away.

these wire-frames offer a lot of possibilities, a lot of choices, which goes against a law of interaction design; hick’s law; the decision time of a user depends on the amount of choices. reducing this can be done by showing differences between the data using a dot matrix, the unused data visualization in the linking the data with a visualization chapter.

floor building area wing everything own group category group appl ianc e year quarter month week hour day 00:00 03:00 06:00 09:00 12:00 15:00 18:00 21:00 00:00

mon tue wed thu fri sat sun

main functionality navigate in position

main functionality navigate in time

main functionality navigate in energy consumer

(33)

ground 1st 2nd 3rd 4th 5th 6th 7th + -HTC34 7th 6th N W S E 5th 4th 3rd 2nd 1st ground N W S E + -average bias navigate in position

next is step is to add more functionality to the wire-frames to get more and better insights in the data. when this screen will open the first selection will be the whole building, then the user can select or deselect every step on the axis, rotate the building to get the preferred angle, zoom in / out and compare the energy consumption of the building with other buildings by using the bar chart in the top right.

when the user performs an action a history state will be held with all the steps made and when switching

from screen all settings will be saved to remain knowledge.

colour-coding

the red, yellow and green colour coding provides the user with information by showing in colour and hue which steps on the axis consume more / an equal amount /

less energy than average. this will give the user information where to look for. it supports the user in the discovery, reduces the amount of choices (hick’s law), help to create a goal (heidi lam #1) and turns the navigation in a data visualization.

average bias

depending on the average bias the colour-coding will be calculated.

to give the user more control the average bias will influences all three axes, the possibilities are:

• the average of the selection, • configurable (by drag), • average of the full data-set, • value from another data-set, • average divided by occupancy. Filters

in all the axes the user has the option to turn occupancy and

(34)

January 1 2 3 4 5 7 9 10 11 12 13 14 15 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2010 May October February June March August July

September November December

mondays tuesdays wednesdays thursdays fridays saturdays sundays

mon tue wed thu fri sat sun

0 1 2 3 4 00:00 02:00 04:00 06:00 08:00 10:00 12:00 14:00 16:00 18:00 20:00 22:00 00:00 April 16 6 8 average bias navigate in time

the navigate in time screen has a calendar view, where years, months,

weeks, days and specific days of the month can be selected. above the calendar there are the specific day selector (where i.e., all tuesdays in the data-set can be selected) and a time-line. when the screen will open for the first time the preset selection will be the most recent month.

same as the navigate in position screen it has a colour-coding depending on the average bias, a list

with history states and will save all settings.

behaviour

in this screen there are a lot of variables which can influence each other. when selecting days of the week (monday) all mondays will be selected in the specific month,

but when the second week of that month will be selected it also includes a monday. the result will be that all mondays and second week will be selected. it will not exclude monday in the second week. when clicking again on the second week

it will exclude the week from the selection including the monday of the second week. the selection that remains is are all the mondays of that month excluding the monday in the second week.

weather

each day has its own weather so it can easily be linked to the navigation visualization. small weather symbols can show the type of weather and major changes. this function will support the quest in finding correlations and patterns between weather and energy consumption. 33

(35)

appliance type 1

appliance type 1aappliance type 2 appliance type 2 ppliance type 3 appliance type 1 appliance type 2

category e category c

category a category b category d

appliance type 1 appliance type 1 everything own group empty + own group own groups average bias category f appliance type 1

navigate in energy consumer

the last of the three axes; the navigate in energy consumer axis can make steps in categories,

groups, appliances and show a breakup of the total energy usage of the categories in a pie chart. it has the same filters as the other axes, own history state and will save settings when going to another screen. when it will open for the first time the selection will be categories. which means if the users visualizes the selection it will show the sum of everything within the category of each of the categories.

automatic grouping

to create the categories and groups an algorithm will go through the data analyzing the consumption data to find usage patterns of the appliances, by looking at these patterns the algorithm will learn which appliance is what and thereby categorize and group them.

own groups

own groups can be made by dragging appliances / groups /

categories to the own group section. the appliances will remain in their original group, but will be

copied to the own made group and colour-coded in the same colour as their own made group to maintain the overview.

average bias

the screen also has the ability of the average bias and uses colour-coding to guide the user on the levels,

category and group, but will not colour-code on appliance level because all appliances in a group are of the same type (mentioned in the data chapter). Further for the average bias it has the same bias

(36)

interface: visualization

abstract level

abstract visualization

the first level, the abstract level contains a visualization where values of multiple appliances can be shown at a specific time. in combination with a ghost value it can show previous values as well. weather is visualized on the right (black dot)

and occupancy can be visualized in the background of the dot. when the visualization will be animated it comes to live and shows its value.

in combination with the ghost it will make it easier to find deviations. user interface elements

the speed of the animation can be controlled by the dial. a time-line is show beneath the visualization with functionality to extend the ghost length (drag the rectangle further back in time to extend its width).

during the animation the time-line will go on and the indicator stays at the same position. by reducing the amount of user interface elements and reusing them (for the same function) in other visualizations the user will get more easily used to the interface elements which make them easier to understand

(heidi lam #3). in all three the visualization screens are buttons implemented to go to the navigation screens, but there will also be small screens with information about the state of the navigation axes and the other way around to prevent loss of knowledge. this will give feed

-forward to the user and reduces the costs of interpreting new views

(heidi lam #6 &#7). user flow

when the user opens the program,

the data will be loaded, set and the first thing the user will see is the navigate in time screen. From this navigation screen the user is able to go to visualizations (abstract, detail or compare level) or a navigation screen (position or energy consumer) to wide or narrow the

visualization scope. the user flow it like this to directly understand what is visualized and the average bias in the navigate in time screen will guide the user where to look for first. i.e.: the program is loaded with a new data-set. navigation axes are set on their initial values.

the user is in the navigate in time screen and not yet sure what he is looking for. in this case, the user can go to the abstract visualization screen which helps the user to find deviations. if something catches his eye the user can stop the animation and select the appliance, group or category of choice. with this selection the user can move on

to the detail level or with multiple selections to the compare level to get more insights in the details,

which can lead to patterns. colour scheme

to perceive the data easily, a good colour scheme is of essence.

in the first visualization test a black background was used. the advantage of a black background is that everything else is lighter and will be easier to perceive and focus on. when using a light background darker colours will move to the

background which does not create the perfect hierarchy; data is of most importance. below are colour

-bars the first one goes from green to red, the second goes from blue to yellow. below the colour bars,

there is a colour sensitiveness scale.

the scale shows that the eye is most sensitive to red. For the interface this can result that red can be used for highlighting, but green is often used as a counterpart of red. red and green are almost as sensitive as each other. because of this,

colours in the interface will be blue and yellow. yellow for indicating something, blue as a stable rest-full colour on a gray background.

(37)

detailed level

compare level

detail level

as thought out, on detail level the visualization should contain all the data from the data-set on the same level of importance. the visualization is a line graph where appliances are represented as different lines colour-coded with a value on the y-axis and the time on the x-axis. weather will also be visualized as a line and presence will

be indicated by the hue of the line.

to control the animation a dial is included. the visualization scale, the x and y-axes are flexible to zoom in and out to get a more detailed view on the data.

time controls

the timelines below the visualization have a very important function. the detail level is all about finding

patterns and correlations in multiple data variables. as seen in the image there can be multiple selected data (from one to infinite) these will all be represented as individual timelines. each timeline will be colour-coded like the line and have their own time-scope. the advantage of these different time

-scopes is when an usage pattern will repeat in time but, not on the same day of the week at the same time.

in some cases it can happen that a non-continuous timeline will be selected in the time-axis screen.

in this case, the program will add the loose days together to create a chronological time-line.

compare level

when multiple data is selected the user can go to the compare screen.

in the compare screen data will be visualized in a radar graph where each data selection will form an area. where easily differences in the data can be seen. like the other two visualizations it has the same user interface elements, the dial and time controls.

(38)

working prototype

after thinking everything through.

the last step is creating a working prototype in Flash using actionscript three. with real energy usage data from a philips building. the data-set includes the usages of thirty-one energy sensors divided over nineteen rooms, each with their presence and corresponding energy consumption data. in the data-set is also weather data included; the amount of lumen during the days.

the energy usage data is measured on tl-lighting some of them are controlled by the amount of lumen in the room, other have a presence sensor or are manually controlled.

with the working prototype a user can look for deviations in the energy usage of the category lighting on a

floor in a philips building over the period november 2010.

build up

the working prototype loads the energy usage data from a .csv file

(comma separated values file)

and builds up the visualization dynamically. the prototype counts the number of rooms in the data and according to that number the prototype knows where to find the other data that is connected with the room. in other words, the .csv file is the basis of the visualization. what is included?

after the visualization is loaded, the number of rooms will be visualized as rectangles in the middle of the screen, where the visualization is.

left is a legend, right a map and line graph, below the time control

and time indicator. due to the length of the internship the working prototype is reduced to only the abstract visualization. other visualizations or navigation axes are not included.

visualization

the visualization includes a number of rectangles equal to the number of rooms in the data. the rectangles can change in colour which

represent the occupancy state in combination with the usage. in the rectangles are white indicators,

which represent the current energy usage in the room. indicators in another colour represent history values (ghost) of the energy data.

Just right of the visualization the weather data is shown by a sun indicator (amount of lumen) with a history state.

abstract visualization

(39)

time indicator

the time indicator is the rectangle positioned below the visualization and time control. the function of the time indicator is showing where on the time axis the current visualized data is. in the blue triangle is the current time-stamp pointing at the moment of the day. on the left and right of the bar are the start and end day of the selected data.

connected to the current position in time (where the time-stamp triangle points at) is the ghost length control. the ghost line control can be dragged left or right to extend or narrow the ghost length. in the prototype the maximum ghost length is limited to ten hours due to performance issues in Flash.

time control

the time control is above the time indicator and underneath the visualization with the time control the user can animate the visualization, by dragging the handle to the left or right to go either back or forward in time. in earlier wire-frames the time control slider was a dial. during the develop and test process the dial did not seem ideal to control in combination with a mouse and keyboard. still a dial would add value to the animation,

but it should be physical. map

the current data-set and selection is ideal to show the data in a map. in the upper right corner a map is shown, which shows the presence data. the rectangles in the visualization show presence as well, but by visualizing the presence data in a map it becomes easier

too perceive. in a final version this will also be shown, but smaller acting like a button for the navigate in position screen. in this case, it shows the power of the navigate in position screen and adds extra value to the current selection.

line graph

the line graph below the map is a visualization of the weather data,

the sunlight (lumen). besides the weather data it can show the ghost data of the rooms as well. which is ideal for the current data selection.

the category light in combination with the weather data shows patterns in how the lights consume energy and what the influence of sunlight is on how the lights in the offices are used. the time-span of the line graph is controlled by the length of the ghost.

user interface elements design

Functionality and behaviour was thought out in the interface chapter,

but how can the appearance of the elements support this. referring back to heidi lam’s guidelines to reduce the interaction costs. the element should give clues about what they can do (heidi lam

#2). the tailored user interface elements of Flash / actionscript were tested in a few small tests. the tests were about the appearance of the elements and how they were positioned. how they can give feed-forward by design; hover,

mouse-cursor, mouse down and mouse up feedback (heidi lam

#5). all changes were done in an iterative process making small changes in the design elements and using design laws to aim for

an optimized functionality in the first final working prototype of the abstract visualization.

interaction

all interaction can be done by mouse, but to make the interface more user-friendly and ideal for power users who use the program often key-combinations are implemented.

key bindings

• up arrow,

(increase) animation speed forward. • down arrow,

(increase) animation speed backwards.

• left arrow,

one time-stamp back in time. • right arrow,

one time-stamp further in time. • spacebar,

stop animation.

Energy Visualization

contents

What is the best way to visualize energy usage data so that

expert

-

users can effectively find new ways in reducing

energy consumption in offices

?

“

”

foreword

introduction

philips research

case description

planning

through time

definition

process

chart types

elements

relevant visualizations

related products & resellers

interaction & costs

data

n

E

combining the visualizations

visualization test

linking the data with a

visu-alization

n

E

E

E

n

E

E

n

E

E

n

E

n

E

n

E

n

E

E

n

E

n

E

E

n

E

n

user experience

hierarchy

interface: navigation

interface: visualization

working prototype